Modification objet javascript

**grigou25** · 14/08/2010, 16h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**DevServlet** · 15/08/2010, 00h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**vermine** · 16/08/2010, 07h59

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ?

**grigou25** · 20/08/2010, 15h18

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

**vermine** · 20/08/2010, 15h26

Et alert(graph.values) ?

**DevServlet** · 20/08/2010, 15h45

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

où as tu declaré la variable "mongraph"?

**grigou25** · 20/08/2010, 15h52

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

**DevServlet** · 21/08/2010, 17h35

Regardes ce bout de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Modification objet javascript

JavaScript

Discussions similaires

Partager

Partager