chart et Json

Version imprimable

chart et Json

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:

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

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:

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:

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

Salut Hélène,

selon la doc:
Code:

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:

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

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:

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:

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

Ne serait ce pas plutôt:

Code:

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

J'ai fait les modifications correspondantes:
Code:

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:

Citation:

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

Salut,

Testé avec IE8, FF3 et Chrome:

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
 
<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:

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

02/11/2009, 17h01
Lnhab

Merci beaucoup c'est exactement ce que je cherchais.

Hélène

une derniére question

Bonjour,

J'ai une dernière question: je souhaiterai donner des noms aux axes de mon chart: par exemple id pour les abscisses et température pour les ordonnées.

J'ai essayé d'ajouter le paramètre label comme suit:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .addAxis("x", { min: 0, max: 15, label: "id", majorTick: { stroke: "black", length: 10 }, minorTick: { stroke: "gray", length: 5 } })
Il n'y a pas d'erreur mais la label n'est pas affiché.

Merci pour votre aide.

Hélène

Salut,

Code:

1
2
3
4
5
6
 
labels: [
   {value: 0, text: ""},
   {value: 1, text: "XXXX"}, 
   {value: 2, text: "YYYY"}
]

ERE

03/11/2009, 17h35
Lnhab

Merci pour la réponse rapide mais ce que je cherche à faire c'est à renommer les axes pas à modifier l'affichage des valeurs sur l'axe.

Merci

Hélène
03/11/2009, 21h15
emmanuel.remy

Re,

Ce n'est pas possible. Mais fais preuve d'originalité, mets uniquement un label sur la dernière valeur (valeur max de l'axe), et cela fera tout comme une simple étiquette de l'axe !

ERE
04/11/2009, 10h32
Lnhab

Merci!
24/08/2010, 12h27
frexville

Bonjour,

Désolé de faire revivre ce post. Mais, je suis dans le même cas que toi.
Et j'aurais besoin de voir ton script qui génére les données json à partir de la base de données.
JE veux créer mon CHART sur JSOn mais je n'arrive pas à créer un formalisme de données correcte pour les abscisses et les ordonnées.

Donc, je te prie de m'aider !
Merci beaucoup.