Boucle sur graphique google chart

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,
j'ai le code php suivant qui me permet de faire un graph à partir d'une bdd postgresql.

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
<?php   
        
        //graphique
        
        $sql= "select sta_date, arrondi(sta_valeur, ana_id) from tbl_stat_sta ";
        $sql.="where sta_esp = 1 and ana_id = 1 and (sta_date between '2011-01-01' and '2011-12-31') ";
        $sql.="order by sta_date;";
                
        
        //construction du tab de données
        $i=0;
        $result=pg_query($dbconn, $sql);
        while ($row = pg_fetch_array($result)) 
        {
                if ($i===0) {
                $tableau = "data.setValue(".$i.", 0, '".$row[0]."');";
                $tableau .= "data.setValue(".$i.", 1, ".$row[1].");";
                }
        else
                {
                $tableau .= "data.setValue(".$i.", 0, '".$row[0]."');";
                $tableau .= "data.setValue(".$i.", 1, ".$row[1].");";
                }
                $i++;
        }
 
?>
 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'date');
        data.addColumn('number', 'MG');
        data.addRows(<?php echo ($i) ?>);
        <?php echo ($tableau) ?>;
 
 
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {
        width: 700,
        height: 500,
        title: 'MG',
        curveType : 'function',
        colors:['green']});
      }
    </script>
  </head>
  <div id="chart_div"></div>
  <div id="chart_div2"></div>
  </html>

dans ce cas je ne génère qu'un seul graphique. il faut que j'en génère une 20aine avec pour facteur changeant le ana_id.
Est-il possible de créer une boucle pour générer tous les graph à la volée?
merci

29/03/2013, 16h14
NoSmoking

Bonjour,
la réponse va te paraître bizarre, mais qu'est ce qui t'en empêche?

Il te faudra surement aménager la fonction d'affichage en passant les données et la destination d'affichage mais bon...
29/03/2013, 16h44
triaguae

Oui j'imagine bien que c'est possible mais comme je ne suis pas un pro ni du php ni du JS, je ne sais pas comment m'y prendre!
Je voudrais juste avoir une piste.....

dans un premier temps regarde ce qui change dans ta fonction drawChart
Code:

1 2 data.addRows(<?php echo ($i) ?>); <?php echo ($tableau) ?>;
et bien sûr la destination d'affichage var chart = new google.visualization.LineChart(document.getElementById('chart_div')).

A partir de là on peut tout à fait présenter les données à afficher sous forme de tableau, ou d'objet jSON, que l'on passera à la fonction.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function drawUneChart( id, donnee) { var oDest = document.getElementById( id); var i, nbr = donnee.length); var data = new google.visualization.DataTable(); data.addColumn('string', 'date'); data.addColumn('number', 'MG'); // ajout nombre de ligne data.addRows( nbr); // ajout des donnees for( i=0; i<nbr;i++){ data.setValue( i, 0, donnee[i][0]); data.setValue( i, 1, donnee[i][1]); } var chart = new google.visualization.LineChart( oDest); chart.draw(data, { width: 700, height: 500, title: 'MG', curveType: 'function', colors: ['green'] }); }
cette fonction est destinée à afficher une Chart

La fonction drawChart devenant
Code:

1 2 3 4 function drawChart() { drawChart('div_0', tableau[0]); drawChart('div_1', tableau[1]); }
là encore on pourrait faire une boucle du type
Code:

1 2 3 4 5 6 function drawChart() { var i, nbr = tableau.length; for( i=0; i < nbr; i++){ drawChart('div_' +i, tableau[i)); } }
Tout ceci n'étant valable que si tes données sont rangées dans des tableaux (Array).

Voila en gros ce que tu peux envisager.

bon alors pour l'instant j'ai pas tout compris :-(

je pense que dans un premier temps il faut que je récupère mes données dans un tableau multidimensionnel en php==> première difficulté !!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$sql= "select ana_id, sta_date, arrondi(sta_valeur, ana_id) from tbl_stat_sta ";
	$sql.="where sta_esp = 1 and (ana_id between 1 and 2) and (sta_date between '2011-01-01' and '2011-01-31') ";
	$sql.="order by sta_date;";
 
 
	//construction du tab de données
	$i=0;
	$result=pg_query($dbconn, $sql);
	while ($row = pg_fetch_array($result)) 
	{
    $key=$row[0];
 		if ($i===0) {
 		$tableau[$key] = "data.setValue(".$i.", 0, '".$row[1]."');";
 		$tableau[$key] .= "data.setValue(".$i.", 1, ".$row[2].");";
 		}
 	else
 		{
  		$tableau[$key] .= "data.setValue(".$i.", 0, '".$row[1]."');";
  		$tableau[$key] .= "data.setValue(".$i.", 1, ".$row[2].");";
 		}
		$i++;
	}?>

mais ça ne fonctionne pas

donc première question : comment construire un tableau multidimensionnel?

essayons de récupérer un tableau json:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $sql = "select ana_id, sta_date, arrondi(sta_valeur, ana_id) from tbl_stat_sta "; $sql .= "where (ana_id between 1 and 2) and (sta_date between '2011-01-01' and '2011-01-31') order by ana_id, sta_date;"; echo $sql; $result = pg_query($dbconn, $sql); /*test requete*/ if (!$result) { echo "erreur."; exit; } /* execution requete */ $myarray=array(); while ($row = pg_fetch_row($result)) { $myarray[]=$row; } echo json_encode($myarray);
résultats renvoyés :

Code:

[["1","2011-01-04","44.64"],["1","2011-01-04","44.53"],["1","2011-01-05","44.90"],["1","2011-01-05","44.70"],["1","2011-01-06","45.43"],["1","2011-01-06","43.26"],["1","2011-01-07","44.02"],["1","2011-01-07","45.06"],["1","2011-01-08","43.95"],["1","2011-01-08","44.59"],["1","2011-01-11","42.71"],["1","2011-01-11","43.46"],["1","2011-01-12","43.86"],["1","2011-01-12","43.09"],["1","2011-01-13","44.15"],["1","2011-01-13","43.72"],["1","2011-01-14","43.12"],["1","2011-01-14","43.82"],["1","2011-01-15","43.67"],["1","2011-01-15","43.15"],["1","2011-01-18","43.16"],["1","2011-01-18","41.93"],["1","2011-01-19","43.36"],["1","2011-01-19","43.33"],["1","2011-01-20","42.38"],["1","2011-01-20","43.12"],["1","2011-01-21","43.09"],["1","2011-01-21","43.51"],["1","2011-01-22","44.67"],["1","2011-01-22","43.28"],["1","2011-01-25","45.45"],["1","2011-01-25","43.61"],["1","2011-01-26","43.61"],["1","2011-01-26","45.02"],["1","2011-01-27","45.01"],["1","2011-01-27","42.99"],["1","2011-01-28","43.18"],["1","2011-01-28","44.05"],["1","2011-01-29","43.50"],["1","2011-01-29","43.35"],["2","2011-01-04","37.69"],["2","2011-01-04","34.23"],["2","2011-01-05","34.20"],["2","2011-01-05","37.96"],["2","2011-01-06","33.89"],["2","2011-01-06","37.98"],["2","2011-01-07","34.03"],["2","2011-01-07","38.14"],["2","2011-01-08","37.81"],["2","2011-01-08","33.95"],["2","2011-01-11","33.60"],["2","2011-01-11","36.08"],["2","2011-01-12","36.18"],["2","2011-01-12","33.73"],["2","2011-01-13","37.22"],["2","2011-01-13","33.61"],["2","2011-01-14","33.48"],["2","2011-01-14","37.13"],["2","2011-01-15","36.60"],["2","2011-01-15","33.41"],["2","2011-01-18","36.17"],["2","2011-01-18","33.29"],["2","2011-01-19","33.33"],["2","2011-01-19","36.62"],["2","2011-01-20","33.36"],["2","2011-01-20","35.92"],["2","2011-01-21","33.23"],["2","2011-01-21","36.72"],["2","2011-01-22","37.13"],["2","2011-01-22","33.11"],["2","2011-01-25","36.74"],["2","2011-01-25","33.58"],["2","2011-01-26","33.62"],["2","2011-01-26","36.63"],["2","2011-01-27","36.69"],["2","2011-01-27","33.39"],["2","2011-01-28","36.53"],["2","2011-01-28","33.23"],["2","2011-01-29","36.26"],["2","2011-01-29","33.28"]]

avec [ana_id, date, valeur]
Est-ce que ce genre de tableau est exploitable par la suite?

30/03/2013, 12h08
NoSmoking

Ce que tu récupères est un tableau, pg_fetch_row, dont chaque élément est un tableau.
30/03/2013, 18h03
triaguae

et donc? est-ce que le format est utilisable ou non pour faire un graph google chart?

Comme je disais tu as un tableau qu'il faut retravailler pour obtenir un truc du style
Code:

1 2 3 4 var donnee = []; donnee[0] = [ /* les données du 1st tracé date, valeur */]; donnee[1] = [ /* les données du 2nd tracé date, valeur */]; // etc...

31/03/2013, 08h23
triaguae

ok, donc je récupère mon tableau en php qu'il faut que je retravaille en JS.

Mais je ne sais pas faire ça :cry:!

petite question en plus du novice que je suis : c'est quoi la différence entre un tableau et un objet json?
03/04/2013, 20h38
NoSmoking

Citation:

ok, donc je récupère mon tableau en php qu'il faut que je retravaille en JS

il serait plus judicieux de le faire proprement coté serveur.

Citation:

Mais je ne sais pas faire ça :cry:!

il n'est pas de fatalité ;)

Après un peu de galère j'ai réussi à avoir un tableau comme il faut :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$sql= "select ana_id, sta_date, arrondi(sta_valeur, ana_id) from tbl_stat_sta ";
  $sql.="where sta_esp = 1 and ana_id in(1,3,4,6) and (sta_date between '2011-01-01' and '2011-01-31') order by ana_id,sta_date;";
 
  $i=0;
  $result=pg_query($dbconn, $sql);
 
  $tableau =array();
    while ($row = pg_fetch_row($result)) 
  { 
    $ligne = "['".$row[1]."', ".$row[2]."]";
    if ($row[0]===$cle) 
    {
      $tableau[$cle] .= ",".$ligne;
    }
    else{
      $cle=$row[0];
      $tableau[$cle].=$ligne;
    }  
  } 
 
  var_dump($tableau);

le var_dump renvoyant ça :

Code:

1
2
3
4
 1 => string '['2011-01-04', 44.64],['2011-01-05', 44.70],['2011-01-06', 43.26],['2011-01-07', 44.02],['2011-01-08', 43.95],['2011-01-11', 43.46],['2011-01-12', 43.86],['2011-01-13', 43.72],['2011-01-14', 43.12],['2011-01-15', 43.15],['2011-01-18', 43.16],['2011-01-19', 43.36],['2011-01-20', 43.12],['2011-01-21', 43.09],['2011-01-22', 43.28],['2011-01-25', 43.61],['2011-01-26', 43.61],['2011-01-27', 42.99],['2011-01-28', 43.18],['2011-01-29', 43.35]' (length=439)
  3 => string '['2011-01-04', 290],['2011-01-05', 287],['2011-01-06', 293],['2011-01-07', 286],['2011-01-08', 311],['2011-01-11', 320],['2011-01-12', 312],['2011-01-13', 277],['2011-01-14', 290],['2011-01-15', 333],['2011-01-18', 299],['2011-01-19', 299],['2011-01-20', 321],['2011-01-21', 337],['2011-01-22', 361],['2011-01-25', 267],['2011-01-26', 286],['2011-01-27', 344],['2011-01-28', 293],['2011-01-29', 296]' (length=399)
  4 => string '['2011-01-04', 522.0],['2011-01-05', 521.0],['2011-01-06', 525.0],['2011-01-07', 523.0],['2011-01-08', 523.0],['2011-01-11', 521.0],['2011-01-12', 521.0],['2011-01-13', 522.0],['2011-01-14', 522.0],['2011-01-15', 521.0],['2011-01-18', 522.0],['2011-01-19', 521.0],['2011-01-20', 522.0],['2011-01-21', 521.0],['2011-01-22', 522.0],['2011-01-25', 523.0],['2011-01-26', 522.0],['2011-01-27', 520.0],['2011-01-28', 520.0],['2011-01-29', 520.0]' (length=439)
  6 => string '['2011-01-04', 255],['2011-01-05', 245],['2011-01-06', 275],['2011-01-07', 258],['2011-01-08', 250],['2011-01-11', 258],['2011-01-12', 256],['2011-01-13', 256],['2011-01-14', 259],['2011-01-15', 256],['2011-01-18', 248],['2011-01-19', 248],['2011-01-20', 259],['2011-01-21', 252],['2011-01-22', 261],['2011-01-25', 263],['2011-01-26', 253],['2011-01-27', 264],['2011-01-28', 259],['2011-01-29', 259]' (length=399)

j'ai donc un tableau avec des index qui ne se suivent pas, chaque index étant égal à une valeur de ana_id.

pour afficher un graph donné, voici le code

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
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
 
      function drawChart() {
 
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'date');
        data.addColumn('number', 'MG');
        data.addRows(<?php echo '['.($tableau[3]).']' ?>);
 
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {
        width: 500,
        height: 500,
        title: 'MG',
        curveType : 'function',
        colors:['green']});
      }
 
    </script>
  </head>
  <div id="chart_div"></div>
 
  </html>

comment adapter ça pour générer les graphiques à la volée?

Je suis arrivé maintenant à passer mon tableau php en JS

Code:

var tableau = <?php echo json_encode($tableau)?>;

affichage des valeurs pour ana_id = 3 (par exemple):
Code:

1 2 var donneeJS = new Array(tableau[3]); document.write(donneeJS);
mais quand je passe ensuite donneeJS à data.addRows, je n'ai plus de graph !

Code:

data.addRows(donneeJS);

j'ai donc affiché les valeurs
Code:

1 2 3 4 5 var donneeJS = new Array(tableau[3]); document.write("JS==>"+donneeJS); var donneephp = new Array(<?php echo '['.$tableau[3].']' ?>); document.write("PHP==>"+donneephp);
et je n'ai pas la même chose
Code:

1 2 JS==>['2011-01-04', 290],['2011-01-05', 287],['2011-01-06', 293],['2011-01-07', 286] PHP==>2011-01-04,290,2011-01-05,287,2011-01-06,293,2011-01-07,286
comment dire.... ça me fatigue !:furieux:

04/04/2013, 18h53
NoSmoking
je ne comprends pas ce que tu essaies de faire ici
Code:

1 2 var donneeJS = new Array(tableau[3]); document.write(donneeJS);
si tu veux que la variable donneeJS ait comme valeur le tableau[3], il faut simplement écrire

Code:

var donneeJS = tableau[3];

Lorsque tu écrits var tableau = <?php echo json_encode($tableau)?>; que donne le code HTML généré, CTRL +U pour voir le code généré.
04/04/2013, 20h37
triaguae
ça
Code:

1 2 var donneeJS = new Array(tableau[3]); document.write(donneeJS);
c'est un essai !!!
je cherche bcp sur le net, et j'essaye autant .....

le code source généré avec

Code:

var tableau = <?php echo json_encode($tableau)?>;

Code:

var tableau = {"1":"['2011-01-04', 44.64],['2011-01-05', 44.70],['2011-01-06', 43.26],['2011-01-07', 44.02],['2011-01-08', 43.95],['2011-01-11', 43.46],['2011-01-12', 43.86],['2011-01-13', 43.72],['2011-01-14', 43.12],['2011-01-15', 43.15],['2011-01-18', 43.16],['2011-01-19', 43.36],['2011-01-20', 43.12],['2011-01-21', 43.09],['2011-01-22', 43.28],['2011-01-25', 43.61],['2011-01-26', 43.61],['2011-01-27', 42.99],['2011-01-28', 43.18],['2011-01-29', 43.35]","3":"['2011-01-04', 290],['2011-01-05', 287],['2011-01-06', 293],['2011-01-07', 286],['2011-01-08', 311],['2011-01-11', 320],['2011-01-12', 312],['2011-01-13', 277],['2011-01-14', 290],['2011-01-15', 333],['2011-01-18', 299],['2011-01-19', 299],['2011-01-20', 321],['2011-01-21', 337],['2011-01-22', 361],['2011-01-25', 267],['2011-01-26', 286],['2011-01-27', 344],['2011-01-28', 293],['2011-01-29', 296]","4":"['2011-01-04', 522.0],['2011-01-05', 521.0],['2011-01-06', 525.0],['2011-01-07', 523.0],['2011-01-08', 523.0],['2011-01-11', 521.0],['2011-01-12', 521.0],['2011-01-13', 522.0],['2011-01-14', 522.0],['2011-01-15', 521.0],['2011-01-18', 522.0],['2011-01-19', 521.0],['2011-01-20', 522.0],['2011-01-21', 521.0],['2011-01-22', 522.0],['2011-01-25', 523.0],['2011-01-26', 522.0],['2011-01-27', 520.0],['2011-01-28', 520.0],['2011-01-29', 520.0]","6":"['2011-01-04', 255],['2011-01-05', 245],['2011-01-06', 275],['2011-01-07', 258],['2011-01-08', 250],['2011-01-11', 258],['2011-01-12', 256],['2011-01-13', 256],['2011-01-14', 259],['2011-01-15', 256],['2011-01-18', 248],['2011-01-19', 248],['2011-01-20', 259],['2011-01-21', 252],['2011-01-22', 261],['2011-01-25', 263],['2011-01-26', 253],['2011-01-27', 264],['2011-01-28', 259],['2011-01-29', 259]"};

Le soucis est que ton objet jSON n'est pas formé pour ce que tu souhaites faire, tes Array de données sont des String, à cause des guillemets
{"1":"['2011-...259],['2011-01-29', 259]"};
je tenterais un truc du style
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $tableau = array(); while ($row = pg_fetch_row($result)) { // $ligne = "['".$row[1]."', ".$row[2]."]"; // tableau temporaire $array = array( $row[1] ,$row[2]); // EDIT confusion langage if ($row[0] === $cle) { // $tableau[$cle]. = ",".$ligne; $tableau[$cle] = $array; } else { $cle = $row[0]; // $tableau[$cle]. = $ligne; $tableau[$cle] = $array; } }
PS: si tu rencontres des difficultés il existe somme toute le forum PHP, avec pleins de bons spécialistes.

Je ne comprends plus rien:rouleau:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
while ($row = pg_fetch_row($result)) 
	{ 
		$ligne = "['".$row[1]."', ".$row[2]."]";
		if ($row[0]===$cle) 
		{
			$tableau[$cle] .= ",".$ligne;
		}
		else{
			$cle=$row[0];
			$tableau[$cle].=$ligne;
		}  
 	}

ce code fonctionne très bien quand je fais

Code:

data.addRows(<?php echo '['.$tableau[3].']' ?>);

le graphique est parfaitement créé, le format date est à considérer comme String pour googlechart, d'où les quotes.

Mon objectif de départ est de faire une boucle pour générer plusieurs graphs.
La boucle je ne peux la faire qu'en JS si j'ai bien compris.

je convertis donc mon tableau php en tableau JS avec

Code:

var tableau = <?php echo json_encode($tableau)?>;

c'est apparemment cette conversion qui ne fonctionne pas puisque ça me colle des guillemets au debut et à la fin du tableau :
code source de la page quand je fais un print_r($tableau):

Code:

1
2
3
4
5
6
7
8
 
"Array
(
    [1] =&gt; ['2011-01-04', 44.64],['2011-01-05', 44.70],['2011-01-06', 43.26],['2011-01-07', 44.02],['2011-01-08', 43.95],['2011-01-11', 43.46],['2011-01-12', 43.86],['2011-01-13', 43.72],['2011-01-14', 43.12],['2011-01-15', 43.15],['2011-01-18', 43.16],['2011-01-19', 43.36],['2011-01-20', 43.12],['2011-01-21', 43.09],['2011-01-22', 43.28],['2011-01-25', 43.61],['2011-01-26', 43.61],['2011-01-27', 42.99],['2011-01-28', 43.18],['2011-01-29', 43.35]
    [3] =&gt; ['2011-01-04', 290],['2011-01-05', 287],['2011-01-06', 293],['2011-01-07', 286],['2011-01-08', 311],['2011-01-11', 320],['2011-01-12', 312],['2011-01-13', 277],['2011-01-14', 290],['2011-01-15', 333],['2011-01-18', 299],['2011-01-19', 299],['2011-01-20', 321],['2011-01-21', 337],['2011-01-22', 361],['2011-01-25', 267],['2011-01-26', 286],['2011-01-27', 344],['2011-01-28', 293],['2011-01-29', 296]
    [4] =&gt; ['2011-01-04', 522.0],['2011-01-05', 521.0],['2011-01-06', 525.0],['2011-01-07', 523.0],['2011-01-08', 523.0],['2011-01-11', 521.0],['2011-01-12', 521.0],['2011-01-13', 522.0],['2011-01-14', 522.0],['2011-01-15', 521.0],['2011-01-18', 522.0],['2011-01-19', 521.0],['2011-01-20', 522.0],['2011-01-21', 521.0],['2011-01-22', 522.0],['2011-01-25', 523.0],['2011-01-26', 522.0],['2011-01-27', 520.0],['2011-01-28', 520.0],['2011-01-29', 520.0]
    [6] =&gt; ['2011-01-04', 255],['2011-01-05', 245],['2011-01-06', 275],['2011-01-07', 258],['2011-01-08', 250],['2011-01-11', 258],['2011-01-12', 256],['2011-01-13', 256],['2011-01-14', 259],['2011-01-15', 256],['2011-01-18', 248],['2011-01-19', 248],['2011-01-20', 259],['2011-01-21', 252],['2011-01-22', 261],['2011-01-25', 263],['2011-01-26', 253],['2011-01-27', 264],['2011-01-28', 259],['2011-01-29', 259]
)"

Je viens de relire la discussion pour remise en mémoire et ais corrigé une ânerie dans le code PHP, confusion dans les langages.

Pour la récupération des infos je te propose de récupérer cela de la façon suivante, simplifiable
Code:

1 2 3 4 while ($row = pg_fetch_row($result)) $tab = array( $row[1], $row[2]); $tableau[$row[0]][] = $tab; }
et pour le "transfert" vers javascript

Code:

echo "var tableau =", json_encode( $tableau), ";\n";

de sorte que tu devrais récupérer une structure de ce type, d'après les données que tu nous a indiquées
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 var tableau = { "1": [ ["2011-01-04", 44.64], ["2011-01-05", 44.7], ["2011-01-06", 43.26], ["2011-01-07", 44.02], ["2011-01-08", 43.95], ["2011-01-11", 43.46] ], "3": [ ["2011-01-04", 290], ["2011-01-05", 287], ["2011-01-06", 293], ["2011-01-07", 286], ["2011-01-08", 311], ["2011-01-11", 320] ], "6": [ ["2011-01-04", 255], ["2011-01-05", 245], ["2011-01-06", 275], ["2011-01-07", 258] ] };
on obtient un objet à la notation jSON.

Ce que cela va changer c'est la façon de récupérer les données pour les passer à la fonction drawUneChart.

Il te faut parcourir l'objet via un for...in, la fonction drawChart pourrait ressembler à cela
Code:

1 2 3 4 5 function drawChart() { for( var i in tableau){ drawUneChart('div_' +i, tableau[i]); } }
Pour finir, j'ai jeté un oeil à la librairie, et... on peut pas mal simplifier pour arriver à une écriture du type
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function drawUneChart(id, donnee) { var data = new google.visualization.DataTable(); data.addColumn('string', 'date'); data.addColumn('number', 'MG'); data.addRows(donnee); var chart = new google.visualization.LineChart(document.getElementById(id)); chart.draw(data, { width: 500, height: 500, title: 'MG', curveType: 'function', colors: ['green'] }); }
la méthode addRows acceptant un Array.

effectivement la façon de créer le tableau en php est bien plus propre!!

par contre quand je transfère le tableau à js avec

Code:

echo "var tableau=".json_encode($tableau).";\n";

puis quand je cherche à travailler avec la var tableau en JS, plus rien
par exemple document.write(tableau[1]) ne renvoie rien

alors j'ai fait comme ça :
coté php

Code:

1
2
3
4
5
6
7
8
9
10
$result=pg_query($dbconn, $sql);
 
  while ($row = pg_fetch_row($result)) 
  {
  $tab = array( $row[1], $row[2]);
  $tableau[$row[0]][] = $tab;
}
 
 
 $tableau_json=json_encode($tableau);

ensuite côté JS :

Code:

1
2
3
4
var tableau = <?php echo $tableau_json?>;
    //document.write(tableau);
    var donnee = tableau[1];
    document.write(donnee);

et là j'obtiens bien les valeurs pour ana_id =1

Code:

2011-01-04,44.64,2011-01-05,44.70,2011-01-06,43.26

sans parler de la boucle que je veux faire pour le moment, j'ai passé la variable donnee à google chart et rien!!

je mets le code complet de la page, il y a peut être qqc qui ne va pas et dont je n'ai jamais parlé !
voici aussi la configuration :
php 5.4.3
apache 2.2.22
postgresql 9.2
OS : XP pro sp3

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
<?php
$conn_string = "host=localhost port=5433 dbname=madb user=postgres password=pw";
$dbconn = pg_connect($conn_string);
 
 
    $sql= "select ana_id, sta_date, arrondi(sta_valeur, ana_id) from tbl_stat_sta ";
  $sql.="where sta_esp = 1 and ana_id in(1,3,4,6) and (sta_date between '2011-01-01' and '2011-01-31') order by ana_id,sta_date;";
  
  $i=0;
  $result=pg_query($dbconn, $sql);
  
  while ($row = pg_fetch_row($result)) 
  {
  $tab = array( $row[1], $row[2]);
  $tableau[$row[0]][] = $tab;
}
 
 
 $tableau_json=json_encode($tableau);
 echo $tableau_json;
  ?>
  <!DOCTYPE html>
<html>
  <head>
 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
    <script type="text/javascript">
    var tableau = <?php echo $tableau_json?>;
 
    var donnee = tableau[1];
    document.write(donnee);
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
 
 
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'date');
        data.addColumn('number', 'MG');
        data.addRows(donnee);
 
 
        var chart = new google.visualization.LineChart(document.getElementById('div1'));
        chart.draw(data, {
        width: 700,
        height: 500,
        title: 'MG',
        curveType : 'function',
        colors:['green']});
      }
 
      </script>
  </head>
  <div id="div1"></div>
  </html>

06/04/2013, 10h26
NoSmoking

http://www.developpez.com/template/kit/kitwarning.png

Citation:

Envoyé par bonnes habitudes

- La première chose à OUBLIER est le document.write, bannies le de tes habitudes, il peut pourrir ton code.
- La deuxième chose à FAIRE est de regarder le code généré, il permet de voir des aberrations d'écriture.

http://www.developpez.com/template/kit/kitinfo.png
Inutile de faire un echo $tableau_json; en dehors des balises <script></script>.

Citation:

par exemple document.write(tableau[1]) ne renvoie rien

tu travailles sur un objet jSON donc il te faut écrire tableau["1"] pour accéder aux données associées.

Reprends bien ce que je t'ai indiqué, tu fais la confusion entre la fonction drawChart et drawUneChart

Voir 40 message(s) de cette discussion en une page