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