URL differents DATA dans le même CHART

Version imprimable

Bonjour,

J'ai fait ce test pour construire un graphique.
les données provenant de ma base de données, je les transforme en JSON et les soumets à DOJO.

voilà mon code pour générer un graph et qui marche très bien

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
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.Minty");
 
dojo.addOnLoad(function(){
	var chart1 = new dojox.charting.Chart2D("container");
	chart1.setTheme(dojox.charting.themes.Minty);
 
	dojo.xhrGet({
			url: "data_test.php",
			handleAs: "json",
 
			load: function(data){
				console.log(data);
				chart1.addPlot("default", {
					   type: "Lines"
				 })
				.addAxis("x", {
					min: 0,
					max: 50,
					majorTick: { stroke: "black", length: 10 },
					minorTick: { stroke: "gray", length: 5 }
				}).
				addAxis("y", {
					vertical: true,
					min: 0,
					max: 60,
					majorTick: { stroke: "black", length: 30 },
					minorTick: { stroke: "gray", length: 10 }
				}).
				addSeries("Serie 1", data)
				.render();
			}
		});
});

Mon souci est de créer plusieurs lignes graphiques sur le même graphique et qui proviennent de différentes URL (ou si vous avez une autre idée je suis preneur).

Merci d'avance pour votre réponse.

Bonjour,

Je ne connais pas du tout les charts mais j'ai peut être une idée :p

Etant donné que tu récupères tes valeurs via un xhrGet et que tu crées ton chart dans le load, je pense que si tu crées une fonction qui récupère chaque data issu de chaque xhrget puis que tu crées ton chart une fois que tu as tous tes data ca pourrait le faire.
Par exemple :

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
 
function recupereData(url){
     var retourVar = "";
     dojo.xhrGet({
	     url: url,
             handleAs: "json",
             load: function(data){
                     retourVar = data;
             }
     });
     return retourVar;
}
dojo.addOnLoad(function(){
	var chart1 = new dojox.charting.Chart2D("container");
	chart1.setTheme(dojox.charting.themes.Minty);
        data1 = recupereData("urlData1.php");
        data2 = recupereData("urlData2.php");
        data3 = recupereData("urlData3.php");
        chart1.addPlot("default", {
		type: "Lines"
	})
	.addAxis("x", {
		min: 0,
		max: 50,
		majorTick: { stroke: "black", length: 10 },
		minorTick: { stroke: "gray", length: 5 }
	}).
	addAxis("y", {
		vertical: true,
		min: 0,
		max: 60,
		majorTick: { stroke: "black", length: 30 },
		minorTick: { stroke: "gray", length: 10 }
	}).
	addSeries("Serie 1", data1)
	addSeries("Serie 2", data2)
	addSeries("Serie 3", data3)
	.render();

Je n'ai pas testé mais c'est dans l'idée :)

merci pour ta réponse.

je suis vraiment perdu. :(

j'ai essayé cela et ça n'a pas marché !

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
function recupereData(url){
     var retourVar = "";
     dojo.xhrGet({
	     url: url,
             handleAs: "json",
             load: function(data){
                     retourVar = data;
             }
     });
     return retourVar;
}
dojo.addOnLoad(function(){
	var chart10 = new dojox.charting.Chart2D("container");
	chart10.setTheme(dojox.charting.themes.Minty);
        data1 = recupereData("urlData1.php");
        data2 = recupereData("urlData2.php");
        //data3 = recupereData("urlData3.php");
        chart10.addPlot("default", {
		type: "Lines"
	});
	chart10.addAxis("x", {
		min: 0,
		max: 50,
		majorTick: { stroke: "black", length: 10 },
		minorTick: { stroke: "gray", length: 5 }
	});
	chart10.addAxis("y", {
		vertical: true,
		min: 0,
		max: 60,
		majorTick: { stroke: "black", length: 30 },
		minorTick: { stroke: "gray", length: 10 }
	});
	chart10.addSeries("Serie 1", {data : data1});
	chart10.addSeries("Serie 2", data2);
	//addSeries("Serie 3", data3)
	chart10.render();
});

01/09/2010, 13h23
Daniel_Gibot

L'idée c'est de récupérer tes tableaux de valeurs avant la création du chart.
La fonction recupereData a, en entrée, l'url de ton programme php qui récupère tes tableaux. Le fait d'avoir l'url en entrée permet de pouvoir appeler plusieurs programmes différents.
Cette fonction retourne ton résultat dans une variable que tu pourras ensuite utiliser pour ajouter une série à ton graphique.
C'est la même chose que ce que tu présentes dans ton premier post à la différence que tu peux appeler plusieurs URL.

L'exemple que je t'ai donné est une "idée". Ça aurait été surprenant que cela fonctionne :)