Graphique en jquery

Version imprimable

Graphique en jquery

bonjour,
voilà j'essaye d'utiliser un outil pour la mise en forme de graphique en jquerry mais comme je n'y connais presque rien en javascript j'utilise du php pour alimenter mon graphique.

Normalement pour que le graphique marche parfaitement il faut que les choses soient comme cela :

Code:

1
2
3
4
data: {
x: [new Date("10/21/2010"), new Date("10/22/2010"), new Date("10/23/2010"), new Date("10/24/2010"), new Date("10/25/2010"), new Date("10/26/2010"), new Date("10/27/2010"), new Date("10/28/2010"), new Date("10/29/2010")],
  y: [12, 30, 6, 22, 14, 25, 41, 14, 3]
                        }

C'est à dire que les datas soient dans un tableau et que chaque données soient séparées par une virgule :

data: {
x:[xdata1,xdata2,xdata3]
y: [ydata1,ydata2,ydata3]

Mais quand je rempli ces datas avec mon php voici comment cela affiche :

Code:

Voici aussi mon code complet :

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
<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijareachart").wijlinechart({
                type: "area",
                showChartLabels: false,
                header: {
                    text: "Audience"
                },
                hint: {
                    content: function () {
                        return this.y;
                    },
                    offsetY: -10
                },
                seriesList: [
 
                    {
                        label: "Aujourd'hui",
                        fitType: "spline",
                        legendEntry: true,
 
                        data: {
						<?php
        $sxml = simplexml_load_file('graph.xml');
foreach ($sxml->Row as $row) { ?>
                            x: [<?php echo $row["Dim1"];?>],
                            y: [<?php echo $row["Metric1"];?>] 
							<?php } ?>
                        }
 
                    }
 
                ],
                seriesStyles: [{
                    stroke: "#00a6dd", "stroke-width": 5, opacity: 0.8
                }],
                seriesHoverStyles: [{
                    "stroke-width": 8, opacity: 1
                }]
            });
        });
    </script>

Avez vous une idée ? pour que les datas se remplissent correctement ? Merci

26/09/2012, 14h04
SpaceFrog

tes x sont des dates au format date ?
c'est normal ?
ne faudrait il pas avoir du string ?

désolé, je sais que je vais passer pour un gros nul, mais où est déclaré que x est au format date ?

en faite :

Code:

x: [new Date("10/21/2010"),

ça c'est le script d'origine et j'ai juste voulu mettre dans x les valeur de mon tableau php.

script original :

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
<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijareachart").wijlinechart({
                type: "area",
                showChartLabels: false,
                header: {
                    text: "Audience"
                },
                hint: {
                    content: function () {
                        return this.y;
                    },
                    offsetY: -10
                },
                seriesList: [
                    {
                        label: "Aujourd'hui",
                        fitType: "spline",
                        legendEntry: true,
                        data: {
                            x: [new Date("10/21/2010"), new Date("10/22/2010"), new Date("10/23/2010"), new Date("10/24/2010"), new Date("10/25/2010"), new Date("10/26/2010"), new Date("10/27/2010"), new Date("10/28/2010"), new Date("10/29/2010")],
                            y: [12, 30, 6, 22, 14, 25, 41, 14, 3]
                        }
                    }
                ],
                seriesStyles: [{
                    stroke: "#00a6dd", "stroke-width": 5, opacity: 0.8
                }],
                seriesHoverStyles: [{
                    "stroke-width": 8, opacity: 1
                }]
            });
        });
    </script>

Ma modification :

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
  <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijareachart").wijlinechart({
                type: "area",
                showChartLabels: false,
                header: {
                    text: "Audience lesechos.fr"
                },
                hint: {
                    content: function () {
                        return this.y;
                    },
                    offsetY: -10
                },
                seriesList: [
 
                    {
                        label: "Aujourd'hui",
                        fitType: "spline",
                        legendEntry: true,
 
                        data: {
						<?php
        $sxml = simplexml_load_file('graph.xml');
foreach ($sxml->Row as $row) { 
?>
                            x: [<?php echo $row["Dim1"];?>],
                            y: [<?php echo $row["Metric1"];?>] 
							<?php } ?>
                        }
 
                    }
 
                ],
                seriesStyles: [{
                    stroke: "#00a6dd", "stroke-width": 5, opacity: 0.8
                }],
                seriesHoverStyles: [{
                    "stroke-width": 8, opacity: 1
                }]
            });
        });
    </script>

26/09/2012, 14h37
thecatz
je viens de m'apercevoir que si je m’étais manuellement :
Code:

1 2 3 4 data: { x: [0h, 1h, 2h, 3h, 4h, 5h, 6h, 7h, 8h], y: [12, 30, 6, 22, 14, 25, 41, 14, 3] }
ça ne marchait pas non plus, donc si je comprends bien, ( c'est la première fois que je manipule le jquerry et les graphiques) je dois dire que x va recevoir des heures, ici dans mon cas ?

quelqu'un aurait une idée de la manipulation, avec mon code php/jquerry ?

Merci.

Ha je crois voir le souci ...

Code:

1
2
3
4
5
6
foreach ($sxml->Row as $row) { 
?>
                            x: [<?php echo $row["Dim1"];?>],
                            y: [<?php echo $row["Metric1"];?>] 
							<?php } ?>
                        }

tu ne boucles pas comme il faut pour concaténer la bonne chaine de params pour x: ...

Code:

1
2
3
4
5
6
7
8
 
<?php
$dataX=array()
$dataY=array();
foreach ($sxml->Row as $row) { 
                $dataX[]=  $row["Dim1"];
                $dataY[]= $row["Metric1"];
?>

puis lors de l'intitalisation :

Code:

1
2
3
 
      x : <?php echo "[".implode(',',dataX)."]"; ?>,
      y : <?php echo "[".implode(',',dataY)."]"; ?>,

je viens de suivre ton conseil :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   data: {
						<?php
        $sxml = simplexml_load_file('graph.xml');
                $dataX=array();
$dataY=array();
foreach ($sxml->Row as $row) { 
 
 
$dataX[]=  $row["Dim1"];
$dataY[]= $row["Metric1"];
 
?>
 
                      x : <?php echo "[".implode(',',$dataX)."]"; ?>,
					y : <?php echo "[".implode(',',$dataY)."]"; ?>,  <?php }?>
 
							 }

et voici ce que mon navigateur me donne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 data: {
 
                      x : [0h],
					y : [5347],  
                      x : [0h,1h],
					y : [5347,3121],  
                      x : [0h,1h,2h],
					y : [5347,3121,2362],  
                      x : [0h,1h,2h,3h],
					y : [5347,3121,2362,1591],  
                      x : [0h,1h,2h,3h,4h],
					y : [5347,3121,2362,1591,1692],  
                      x : [0h,1h,2h,3h,4h,5h],
					y : [5347,3121,2362,1591,1692,2206],  
                      x : [0h,1h,2h,3h,4h,5h,6h],
					y : [5347,3121,2362,1591,1692,2206,4684],  
                      x : [0h,1h,2h,3h,4h,5h,6h,7h],
					y : [5347,3121,2362,1591,1692,2206,4684,10821],  
                      x : [0h,1h,2h,3h,4h,5h,6h,7h,8h],
					y : [5347,3121,2362,1591,1692,2206,4684,10821,19478],  
                      x : [0h,1h,2h,3h,4h,5h,6h,7h,8h,9h],
					y : [5347,3121,2362,1591,1692,2206,4684,10821,19478,22051],  
							 }

De plus je me suis aperçu que si on souhaite que les éléments de x soient pris en format texte il faut qu'il soi entre guillemet soit :
x : ['0h','1h','2h','3h','4h','5'h,'6h','7h','8h','9h'],

En tout cas merci pour ton aide, même si je patauge fois 10 000. Ça avait l'air si simple :) et en faite c'est hardcore pour un newbie comme moi.

26/09/2012, 15h12
SpaceFrog

ok pour les quotes ...

mais sinon sors le x: de la boucle !!!!!
26/09/2012, 17h06
thecatz

je comprends pas trop, désolé ?
27/09/2012, 10h05
thecatz

oui en faite, je viens de regarder mon code, et je comprends pas, si je retire x de la boucle il ne récupéré plus les données du xml.
27/09/2012, 10h15
SpaceFrog

j'ai dit sors le de la boucle ...
je n'ai pas dit de le supprimer ...

tu ne dois demander à php de rediger les paramètres x: et y: qu'une fois la boucle terminée et les array complets !

et n'en faire un echo qu'une seule fois ...
si tu regarde ton code toi tu fasi un echo de l'implode de l'array à chaque itération de la boucle ...
27/09/2012, 11h08
thecatz

quand je lit ta réponse je comprends , mais j'avoue ne pas savoir faire cela en php. Mais si je comprends bien , je ne dois pas utiliser foreach mais autre chose.
Mais "rediger les paramètres x: et y: qu'une fois la boucle terminée et les array complets " je t’avouerai ne pas avoir d'idée pour faire cela :oops: et oui j'apprends aussi le php en même temps, donc je n'ai pas vu encore tous les cas de figure.

Je n'ai pour le moment qu’appris avec la boucle foreach pour lire un xml.
27/09/2012, 11h14
SpaceFrog

si si le foreach est correct, le tout est qu'il faut le refermer avant de faire l'echo de x: et y:

Montre nous ton code actuel

Comment je galère, avec du php dans du jquerry... en tous cas merci de prendre de ton temps pour m'aider. C'est vraiment gentil.

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
<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijareachart").wijlinechart({
                type: "area",
                showChartLabels: false,
                header: {
                    text: "Audience"
                },
                hint: {
                    content: function () {
                        return this.y;
                    },
                    offsetY: -10
                },
                seriesList: [
 
                    {
                        label: "Aujourd'hui",
                        fitType: "spline",
                        legendEntry: true,
 
                         data: {
						<?php
        $sxml = simplexml_load_file('graph.xml');
                $dataX=array();
                $dataY=array();
                
                foreach ($sxml->Row as $row) { 
 
                $dataX[]=  $row["Dim1"];
                $dataY[]= $row["Metric1"];
?>
 
                      x : <?php echo "[".implode(',',$dataX)."]"; ?>,
					y : <?php echo "[".implode(',',$dataY)."]"; ?>,  
 
							<?php }?>
                        }
 
                    }
 
                ],
                seriesStyles: [{
                    stroke: "#00a6dd", "stroke-width": 5, opacity: 0.8
                }],
                seriesHoverStyles: [{
                    "stroke-width": 8, opacity: 1
                }]
            });
        });
    </script>

considère php comme une machine à ecrire ton js (jquery)
php va recupérer le elements dans un array
puis juste faire les echos là ou il faut

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
<?php
        $sxml = simplexml_load_file('graph.xml');
                $dataX=array();
                $dataY=array();
 
                foreach ($sxml->Row as $row) { 
 
                $dataX[]=  $row["Dim1"];
                $dataY[]= $row["Metric1"];
                }
?>
<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijareachart").wijlinechart({
                type: "area",
                showChartLabels: false,
                header: {
                    text: "Audience"
                },
                hint: {
                    content: function () {
                        return this.y;
                    },
                    offsetY: -10
                },
                seriesList: [
 
                    {
                        label: "Aujourd'hui",
                        fitType: "spline",
                        legendEntry: true,
 
                         data: { x : <?php echo "[".implode(',',$dataX)."]"; ?>,
				 y : <?php echo "[".implode(',',$dataY)."]"; ?>,  
                                }
 
                    }
 
                ],
                seriesStyles: [{
                    stroke: "#00a6dd", "stroke-width": 5, opacity: 0.8
                }],
                seriesHoverStyles: [{
                    "stroke-width": 8, opacity: 1
                }]
            });
        });
    </script>

27/09/2012, 12h03
thecatz
En faite si je comprends bien ""rediger les paramètres x: et y: qu'une fois la boucle terminée et les array complets " voulait dire de sortir du script jquerry mon appel en php du xml et faire le echo de x et y dans le script.

c'est bien ça ? ou j'ai tjs pas compris ?

voici ce que mon navigateur me donne :
Code:

1 2 data: { x : [0h,1h,2h,3h,4h,5h,6h,7h,8h,9h], y : [5347,3121,2362,1591,1692,2206,4684,10821,19478,22051],
bon j'avoue c'est exactement ce qu'il faut, maintenant il faut aussi que chaque valeur de x soit entre quote.

j'ai souvenir qu'en php il faut un \' : quelque chose dans ce genre

data: { x : <?php echo "[".implode(',\'',$dataX)'\''."]"; ?>,

mais biensur ça ne marche pas :)
28/09/2012, 21h16
thecatz

j'ai enfin réussi merci pour ton aide
29/09/2012, 09h09
SpaceFrog

je suppose que le code final ressemble à

Code:

data: { x : <?php echo"'[".implode("','", $dataX ). "']"; ?>,

ou

Code:

data: { x : <?php echo '[\''.implode('\',\'' , $dataX ). '\']'; ?>,