Modification objet javascript

Version imprimable

Bonjour � tous,

Apr�s de maintes recherches, je m'adresse � vous pour solutionner mon probl�me. D�butant en javascript et d�veloppement web, je dois rater quelque chose, car je n'y arrive pas du tout.

Je souhaite cr�er un graphique (bargraph) et mettre � jour ses donn�es.

J'utilise un code javascript (graphs.js) trouv� sur le net que j'int�gre dans ma page web que voici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<%@ Page Language="VB" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
</script>
 
<script type="text/javascript" src="graphs.js"></script>
<script type="text/javascript">
    function TEST() 
    {
 
}
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head id="Head1" runat="server">
    <title>Page Test JS</title>
    <link rel="stylesheet" type="text/css" href="myHouZe.css" />
</head>
<body onload="">
    <form id="form1" runat="server" >  
    <div id="graph">
 
        <script type="text/javascript" language="JavaScript" id="Consommation">
            var graph = new BAR_GRAPH("vBar");
            graph.values = "123,456,789,987,654,321";
            graph.labels = "Janvier,Février,Mars,Avril,Mai,Juin, Juillet, Aout, Septembre, Octobre, Novembre, Décembre";
            graph.showValues = 2;
            graph.barWidth = 40;
            graph.barLength = 1;
            graph.labelSize = 12;
            graph.absValuesSize = 12;
            graph.percValuesSize = 12;
            graph.graphPadding = 10;
            //Couleur du background général
            graph.graphBGColor = "Black";
            //Contour du bloc
            graph.graphBorder = "";
            graph.barColors = "#ADCF4F";
            graph.barBGColor = "Black";
            graph.barBorder = "4px outset #AEEE00";
            graph.labelColor = "White";
            graph.labelBGColor = "Black";
            graph.labelBorder = "";
            graph.absValuesColor = "White";
            graph.absValuesBGColor = "Black";
            graph.absValuesBorder = "";
            document.write(graph.create());  
        </script>
    </div>
    <div id="start">Test button</div>
    <div><input id="Device" type="text" size="30" value="" /></div>
    <div><input onclick="TEST();" id="Button1" type="button" value="button" />
 
    </div>
 
 
</form>    
</body>
</html>

Jusque l�, tout va bien et mon graphique s'affiche comme je veux.

Maintenant, je souhaite changer les valeurs de ce graphique lorsque l'on appuie sur le button1. Mon probl�me est que je n'arrive pas � retrouver mon objet javascript "graph" lorsque je suis dans la fonction TEST pour faire un truc du genre:
mongraph.values = "200,500,789,987,654,321"; (et donc changer le graphique).

Merci d'�clairer ma lanterne.

Grigou25

15/08/2010, 00h04
DevServlet

Ta variable "graph" est dispo normalement dans tout ton code, puisque tu ne l'as pas cr�e globalement, si tu modifies les dimensions, il faut refaire "create()" dessus. Mais ca ca peut pas marcher puisqu'il ne connait pas mongraph

Code:

mongraph.values = "200,500,789,987,654,321";
16/08/2010, 07h59
vermine
Bonjour,

Tout d'abord je ne pense pas que la balise script reconnaitra son id:
Code:

1 2 <script type="text/javascript" language="JavaScript" id="Consommation">
Vous utilisez vraiment "Consommation" a un moment donn� ? Sinon, ceci suffira amplement et �vitera des incoh�rences:

Code:

<script type="text/javascript">

Ensuite je vois que vous appelez votre div "graph" et une variable globale du m�me nom. M�me si �a fonctionne sans doute tr�s bien, il est peut-�tre util de les nommer diff�remment. De m�me que pour la fonction "TEST". Ca passe, mais "test" est � mon sens un mot r�serv� (crf. expression r�guli�re).

Que donne une alert(graph) dans votre fonction TEST ?
20/08/2010, 15h18
grigou25

1 pi�ce(s) jointe(s)

Tout d'abord, merci pour vos r�ponses.

J'ai d'abord fait un peu de nettoyage comme recommand� par vermine. J'ai renomm� ma fonction "graphique" et mon div "graphdiv" pour �viter toutes confusions.
Si je fais un alert(graph), il me met le "texte" d�crivant mon tableau (voir alert(graph).jpg).

Concernant le message de servlet, je ne comprends pas bien. Tu dis qu'il faut faire un create mais que �a saurait quand m�me pas marcher. As-tu une solution?

B�v

Grigou
20/08/2010, 15h26
vermine

Et alert(graph.values) ?
20/08/2010, 15h45
DevServlet

Non tu ne m'as pas compris.
Au vu de cette ligne :

Code:

mongraph.values = "200,500,789,987,654,321";

o� as tu declar� la variable "mongraph"?
20/08/2010, 15h52
grigou25

alert(graph.values) donne "undefined"...

mongraph.values �tait un exemple, sorry, je me suis mal exprim�. J'ai en effet essay� graph.values ="100;200;300;400", mais sans r�sultat. Comme tu peut le voir avec le alert(graph.values), il ne connait plus mon graph. Tu parlais de le d�finir de mani�re globale. Comment je peux faire cela en javascript?

B�v

Grigou

Regardes ce bout de code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<script type="text/javascript" src="graphs.js"></script>
<script type="text/javascript">
    function initGraph() 
    {
 //alert('bonjour='+graph)
 var graph = new BAR_GRAPH("vBar");
			var f = document.form1;
			valueSize = f.Device.value;
			alert('value='+valueSize);
            graph.values = valueSize;
            graph.labels = "Janvier,Février,Mars,Avril,Mai,Juin, Juillet, Aout, Septembre, Octobre, Novembre, Décembre";
            graph.showValues = 2;
            graph.barWidth = 40;
            graph.barLength = 1;
            graph.labelSize = 12;
            graph.absValuesSize = 12;
            graph.percValuesSize = 12;
            graph.graphPadding = 10;
            //Couleur du background général
            graph.graphBGColor = "Black";
            //Contour du bloc
            graph.graphBorder = "";
            graph.barColors = "#ADCF4F";
            graph.barBGColor = "Black";
            graph.barBorder = "4px outset #AEEE00";
            graph.labelColor = "White";
            graph.labelBGColor = "Black";
            graph.labelBorder = "";
            graph.absValuesColor = "White";
            graph.absValuesBGColor = "Black";
            graph.absValuesBorder = "";
            document.getElementById('graph').innerHTML = graph.create();
 
 
}
 
</script>
 
 
 
 
    <title>Page Test JS</title>
    <link rel="stylesheet" type="text/css" href="myHouZe.css" />
</head>
<body onload="initGraph()">
    <form name="form1">  
    <div id="graph">
    </div>
    <div id="start">Test button</div>
    <div><input name="Device" type="text" size="70" value="23,456,789,987,654,321" /></div>
    <div><input onclick="initGraph();" id="Button1" type="button" value="button" />
 
    </div>
 
 
</form>    
</body>
</html>

C'est un peu crade mais fait le boulot que tu veux. c'est juste une page dans laquelle y'a un champ de saisie des dimensions du graphe, tu modifies ce champ, et valide et ton graphe est redessin�, ton pb c'est que tu ne redsessinais pas ton graphe.

Code:

Tu parlais de le définir de manière globale. Comment je peux faire cela en javascript?

Une variable definie hors fonction javascript est une variable globale, donc graph telle que tu l'avais definie etait globale.
Bon codage :mouarf: