ajout d'une légende à un DataChart

Version imprimable

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:

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:

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

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:

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

16/12/2009, 09h29
Lnhab

Merci ca marche.

Hélène
16/12/2009, 18h35
emmanuel.remy

Re,

J'ai modifié vite fait ton code, donc il y a certainement plus élégant... :?
Regarde peut-être d'un peu plus prêt.

ERE