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: