Affichage d'un graphique jQplot

Version imprimable

Bonjour,

Mon problème est le suivant, je n'arrive pas à faire afficher un graphique en camember avec les valeurs ci-jointes :

Citation:

[['a',6.9],['b',2.4],['c',0.6],['d',0],['e',2.48],['f',9.41],['g',15.84],['h',11.97],['i',0],['j',3.37],['k',1.13],['l',10.5],['m',2.68],['n',16.22],['o',0.67],['p',0],['q',0.1],['r',1.9],['s',0],['t',3.89],['u',2.59],['v',0],['w',0],['x',1.38],['y',0.52],['z',3.18],['za',2.17]]

Voici le code utilisé :
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <h3>Evolution trafic Gn SGSN en To</h3> <center> <div id="Graph" style="height:450px; width:80%;"></div> </center> <br></br> <h3>Répartition du trafic Gn par SGSN (hebdo)</h3> <center> <div id="Camember" style="height:450px; width:80%;"></div> </center> <script type="text/javascript" class="code"> $(document).ready(function() { graph('Graph'); graph('Camember'); }); function graph(div) { var traf = <?php echo json_encode($sommeTraf);?>; var abscisseSem = <?php echo json_encode($nbSem);?>; var plot1 = $.jqplot ('Graph', [traf], { axes : { xaxis : { renderer : $.jqplot.CategoryAxisRenderer, ticks : abscisseSem } } }); var nomeq = <?php echo json_encode($tabEq);?>; var valeach = <?php echo json_encode($pourcent);?>; var tabFin = ""; for (i = 0 ; i < valeach.length ; i++) { if (i == 0) { tabFin += "['"+nomeq[i]+"',"+valeach[i]+"],"; } else if (i == valeach.length - 1) { tabFin += "['"+nomeq[i]+"',"+valeach[i]+"]"; } else { tabFin += "['"+nomeq[i]+"',"+valeach[i]+"],"; } } alert(tabFin); var plot2 = $.jqplot ('Camember', [[tabFin]], { title: ' ', seriesDefaults: { shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { startAngle: 180, sliceMargin: 4, showDataLabels: true } }, legend: { show:true, location: 'w' } } ); } </script> </table> </body> </html>
L'erreur se situe au niveau du plot2. J'ai farfouiller un peu partout et essayer de virer/rajouter des [] mais rien n'y fait.

Cependant, par exemple, en traçant une 2eme fois le premier graphique, ils s'affichent très bien tous les deux. Je pense que c'est une erreur de syntaxe cependant étant donné que je commence à peine à manipuler jQplot et le peu d’informations disponibles sur le sujet, je bloque.

Si vous avez des idées n'hésitez pas !

Merci d'avance.

PS : j'ai bien rajouté les renderer nécessaires etc

19/08/2014, 20h36
danielhagnoul

Bonsoir

Je ne peux rien faire avec du code PHP !

Je ne peux tester que des codes CSS, HTML et JS. Il faut copier-coller le code source de la page affichée dans le navigateur ou donner un lien vers cette page.

Si vous utilisez des données JSON, il faut impérativement des guillemets anglais doubles ("a" et pas 'a')

Voici le bout de code source qui nous intéresse.

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<script type="text/javascript" class="code">
$(document).ready(function() {
    graph('Graph');
    graph('Camember');
});
 
function graph(div) {
	var traf = [1493.58,1496.27,1491.14];
	var abscisseSem = ["S30","S31","S32"];
	var plot1 = $.jqplot ('Graph', [traf], {
		axes : {
			xaxis : {
				renderer : $.jqplot.CategoryAxisRenderer,
				ticks : abscisseSem
			}
		},
		cursor:{
            show: true,
            zoom: true
        }
	});
 
	var nomeq = [];
	var valeach = [];
	var tabFin = "";
 
	for (i = 0 ; i < valeach.length ; i++)
	{
		if (i == 0)
		{
			tabFin += "[[\""+nomeq[i]+"\","+valeach[i]+"],";
		}
		else if (i == valeach.length - 1)
		{
			tabFin += "[\""+nomeq[i]+"\","+valeach[i]+"]]";
		}
		else
		{
			tabFin += "[\""+nomeq[i]+"\","+valeach[i]+"],";
		}
	}
	alert(tabFin);
	var plot2 = $.jqplot ('Camember', [tabFin],
	{
		title: ' ',
		seriesDefaults: {
			shadow: false,
			renderer: jQuery.jqplot.PieRenderer,
			rendererOptions: {
				startAngle: 180,
				sliceMargin: 4,
				showDataLabels: true }
  		},
  		legend: { show:true, location: 'w' },
    	cursor:{
            show: true,
            zoom: true
        }
    }
  	);
}
 
</script>
</table>
</body>
</html></div></div></div></div></div></div></div></div></div>
 
</div>
</div>
 
</body>
</html>

20/08/2014, 10h12
devyan

Bonjour,

Dans la nouvelle version, tabFin n'aura plus la même structure (enfin si nomeq et valeach ne restent pas vides :)) :

Code:

[a,6.9],[b,2.4],[c,0.6]]
20/08/2014, 10h22
ciols

Dans la nouvelle version justement, l'affichage ressemble à ça non ?

Citation:

[["a",6.4],["b",2.4],["c",0.6]]

?
20/08/2014, 10h37
devyan
Citation:

Envoyé par ciols

Dans la nouvelle version justement, l'affichage ressemble à ça non ?

?

Oui quand j'ai écris ma réponse il n'y avait pas les \" mais ce n'est pas grave :)

Le problème est que tu ne passes pas ce que tu crois à jqplot avec tabFin ...

Il attend un tableau de tableau de paires [nom,valeur], pas un tableau de chaîne. ;)

Attendu :

Code:

[[["a",12],["b",45],["c",96]]]

Actuel :

Code:

["[[\"a\",12],[\"b\",45],[\"c\",96]]"]

Donc soit il te faut transformer tabFin de chaîne JSON en tableau avec jQuery.parseJSON(tabFin) pour le passer à jqplot, soit tu peux créer directement le tableau comme ceci :
Code:

1 2 3 4 5 6 7 var tabFin = []; for (i = 0 ; i < valeach.length ; i++) { tabFin.push([nomeq[i],valeach[i]]); }
devYan.
20/08/2014, 10h51
ciols

Ma-gni-fi-que !! Ca marche !

Merci beaucoup !!