Discussion :

[thecatz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
 
data: {
						                            x: [0h],
                            y: [5347] 
							                            x: [1h],
                            y: [3121] 
							                            x: [2h],
                            y: [2362] 
							                            x: [3h],
                            y: [1591] 
							                            x: [4h],
                            y: [1692] 
							                            x: [5h],
                            y: [2206] 
							                            x: [6h],
                            y: [4684] 
							                            x: [7h],
                            y: [10821] 
							                            x: [8h],
                            y: [19478] 
							                            x: [9h],
                            y: [22051] 
							                        }

Voici aussi mon code complet :

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

[SpaceFrog]

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

[thecatz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 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 :

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

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

[thecatz]

je viens de m'apercevoir que si je m’étais manuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SpaceFrog]

Ha je crois voir le souci ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[thecatz]

je viens de suivre ton conseil :

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

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

[SpaceFrog]

ok pour les quotes ...

mais sinon sors le x: de la boucle !!!!!

[thecatz]

je comprends pas trop, désolé ?

[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.

[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 ...

[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 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.

[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

[thecatz]

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 :

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

[SpaceFrog]

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 :

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[thecatz]

j'ai enfin réussi merci pour ton aide

[SpaceFrog]

je suppose que le code final ressemble à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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