Discussion :

[Lnhab]

Bonjour,

Je souhaite afficher dans un dojox.charting.Chart2D des donn�es issue d'une base de donn�e.
Pour cela, j'ai �crit une fonction un php qui interroge la base de donn�e et me retourne un fichier JSON.

1� question:quelle structure doit avoir le fichier json

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
{x: [1,2,3,4,5,6,7,8], y:[8,7,6,5,4,3,2,1] }

ou

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
[        { x: 0, y: 110},
         { x: 10, y: 24},
	 { x: 15, y:63},
	 { x: 25, y: 5},
	 { x: 40, y: 98},
	 { x: 45, y: 54}
];

2� question: comment int�grer ces donn�es dans mon chart d�fini comme ceci:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
var chart1 = new dojox.charting.Chart2D("simplechart");
            chart1.addPlot("default", {
                type: "Lines"
            });
            chart1.addAxis("x");
            chart1.addAxis("y", {
                vertical: true
            });

Je r�cup�re le fichier JSON en utilisant la fonction

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
var obj = new dojo.data.ItemFileReadStore({ url:"PhpAndJsonChart.php"});

Mais ensuite, je n'arrive pas � r�cup�rer les donn�es du fichier json et � les ajouter � mon chart sachant que les donn�es "x" repr�sentent les abscisses et "y" les ordonn�es.

Merci de votre aide

H�l�ne

[emmanuel.remy]

Salut H�l�ne,

selon la doc:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
chart1.addSeries("Serie A", [
      { x: 0.5, y: 5 },
      { x: 1.5, y: 1.5 },
      { x: 2, y: 9 },
      { x: 5, y: 0.3 }
    ]);

Il te faut donc obtenir tes donn�es sous ce format.
Pour les avoir, il n'est pas n�cessaire de passer par un ItemFileReadStore, un peu lourd dans ton cas. Je te conseille plut�t de passer par un appel Ajax standard, xhrGet dont tu pr�cises que les donn�es de retour sont attendues au format JSON (handleAs: "json"):

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
dojo.xhrGet({
  url : "PhpAndJsonChart.php",
  handleAs: "json",
  load : function(response, ioArgs) {
    //response est l'objet JSON
    //...
  },
  error : function(response, ioArgs) {
    console.log("Haie !", response, ioArgs);
  }
});

Bon dev,

ERE

[Lnhab]

Tout d'abord merci pour la r�ponse rapide!

J'ai modifi� mon code en cons�quence:

Pour le moment, mon php fait simplement un echo:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
 
<?php
echo "[
        { x: 0, y: 110},
        { x: 10, y: 24},
        { x: 15, y:63},
        { x: 25, y: 5},
        { x: 40, y: 98},
        { x: 45, y: 54}
]"
?>

Dans le code Javascript, j'utilise le foncyion xhrGet:

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
 
dojo.xhrGet({
	url: "PhpAndJsonChart.php",
	hanleAs: "json",
	load: function(data){
		var chart1 = new dojox.charting.Chart2D("simplechart");
        	chart1.addPlot("default", {
                	type: "Lines"
		 });
		 chart1.addAxis("x");
		 chart1.addAxis("y", {
		       vertical: true
		 });
           	 chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
		 chart1.addSeries("Series 2", data);
		 chart1.render();
	}
});

La s�rue 1 est affich�e correctement pa contre la s�rie 2 (qui utilise le Json) n'apparait pas

Merci

H�l�ne

[emmanuel.remy]

Ne serait ce pas plut�t:

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
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {
   type: "Lines"
 })
.addAxis("x");
.addAxis("y", {
       vertical: true
});

dojo.xhrGet({
	url: "PhpAndJsonChart.php",
	handleAs: "json",
	load: function(data){
		 chart1.addSeries("Serie", data)
		 .render();
	}
});

Attention, c'est handleAs et non hanleAs

ERE

[Lnhab]

J'ai fait les modifications correspondantes:

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
 
dojo.addOnLoad(function(){			
	var chart1 = new dojox.charting.Chart2D("simplechart");
	chart1.addPlot("default", {
	   type: "Lines"
	 })
	 .addAxis("x")
	.addAxis("y", {
           vertical: true
	});
 
	dojo.xhrGet({
		url: "PhpAndJsonChart.php",
		handleAs: "json",
		load: function(data){
			 chart1.addSeries("Serie", data)
				 .render();
		}
	});
});

mais j'ai maintenant l'erreur suivante qui apparait dans ma console:

Warning: Unexpected value NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN parsing points attribute. File: http://127.0.0.1:8000/TestChartRefresh.html Line: 0 Column: 0

Encore merci et bon week end

H�l�ne

[emmanuel.remy]

Salut,

Test� avec IE8, FF3 et Chrome:

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
 
<html>
<head>
<title>Dojo Chart</title>
<script type="text/javascript" src="/dojotoolkit/dojo/dojo.js" 
	djConfig="parseOnLoad:true, isDebug: false"></script>
	<script type="text/javascript">
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: "datas.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: 120,
					majorTick: { stroke: "black", length: 30 },
					minorTick: { stroke: "gray", length: 10 }
				}).
				addSeries("Serie 1", data)
				.render();
			}
		});
});
 
</script>
 
</head>
<body>
 
 <div id="container" style="width:600px;height:500px;">
</div>
 
</body>
</html>

datas.php:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
<?php
echo "[
        { x: 0, y: 110},
        { x: 10, y: 24},
        { x: 15, y:63},
        { x: 25, y: 5},
        { x: 40, y: 98},
        { x: 45, y: 54}
]";
?>

J'ai ajout� les �chelles et le format des axes.
A noter qu'une partie du code doit pouvoir �tre sorti du xhrGet

ERE