ajout d'une légende à un DataChart

**Lnhab** · 15/12/2009, 11h07

Bonjour,

J'essaye sans succès pour le moment d'ajouter une légende à un DataChart.
Je voudrais faire qqchose comme ceci: http://www.sitepen.com/blog/2009/03/...jox-datachart/ paragraphe Chart Legends.

Mon code est le suivant

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
 
var chart1 = new dojox.charting.DataChart("container", {
	                comparative:true
	        });
chart1.addAxis("x", {
			min: data[0].min,
			max: data[0].max,
			majorTick: {
				stroke: "black",
				length: 10
			},
			minorTick: {
				stroke: "gray",
				length: 5
			}
		});
chart1..addAxis("y", {
			vertical: true,
			min: data[0].min,
			max: data[0].max, 
			majorTick: {
				stroke: "black",
				length: 10
			},
			minorTick: {
				stroke: "gray",
				length: 5
			}
		});
 
dojo.xhrGet({
		url: "GetTimeSubtool.php",
		handleAs: "json",
		content:{
			subtoolId: id1
		},		
		load: function(data){		
			chart1.addSeries("Serie1", data).render();
		}
	});
 
dojo.xhrGet({
		url: "GetTimeSubtool.php",
		handleAs: "json",
		content:{
			subtoolId: id2
		},		
		load: function(data){		
			chart1.addSeries("Serie 2",data).render();
		}
	});
 
var legend = new dojox.charting.widget.Legend({chart: chart1, horizontal: true}, "legend");

J'ai aussi essayé de créer la légende en utilisant le code donné sur le site "sitepen" mais sans plus de succés

Et le code HTML:

Code :

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

1
2
3
4
5
 
  <body>
	<div id="container" style="width:600px;height:500px;"></div>
	<div id="legend"></div>
  </body>

Le chart s'affiche correctement mais la légende n'apparait pas du tout

J'ai essayé avec la version 1.3.0 et 1.4.0 de Dojo.

Merci pour votre aide

Hélène

**emmanuel.remy** · 15/12/2009, 21h56

Salut Hélène,

Je crois que ton problème vient du fait que les données n'ont pas fini d'être chargées quand tu crées la légende.
Essaie plutôt quelque chose comme:

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
 
var chart1 = new dojox.charting.DataChart("container", {
	                comparative:true
	        });
chart1.addAxis("x", {
			min: data[0].min,
			max: data[0].max,
			majorTick: {
				stroke: "black",
				length: 10
			},
			minorTick: {
				stroke: "gray",
				length: 5
			}
		});
chart1..addAxis("y", {
			vertical: true,
			min: data[0].min,
			max: data[0].max, 
			majorTick: {
				stroke: "black",
				length: 10
			},
			minorTick: {
				stroke: "gray",
				length: 5
			}
		});
 
 
var legend ; 
dojo.xhrGet({
		url: "GetTimeSubtool.php",
		handleAs: "json",
		content:{
			subtoolId: id1
		},		
		load: function(data){		
			chart1.addSeries("Serie1", data).render();
 
      dojo.xhrGet({
      		url: "GetTimeSubtool.php",
      		handleAs: "json",
      		content:{
      			subtoolId: id2
      		},		
      		load: function(data){		
      			chart1.addSeries("Serie 2",data).render();
            legend = new dojox.charting.widget.Legend({chart: chart1, horizontal: true}, "legend");
      		}
      	});
		}
	});

ERE