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