Boucle sur graphique google chart

**triaguae** · 28/03/2013, 20h53

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

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

**NoSmoking** · 29/03/2013, 16h14

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

**triaguae** · 29/03/2013, 16h44

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

**NoSmoking** · 29/03/2013, 17h16

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

Code php :

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

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 :

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

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

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 :

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

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.

**triaguae** · 29/03/2013, 20h51

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 :

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

**triaguae** · 30/03/2013, 09h56

essayons de récupérer un tableau json:

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

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

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

**NoSmoking** · 30/03/2013, 12h08

Ce que tu récupères est un tableau, pg_fetch_row, dont chaque élément est un tableau.

**triaguae** · 30/03/2013, 18h03

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

**NoSmoking** · 30/03/2013, 23h14

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

Code :

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

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

**triaguae** · 31/03/2013, 08h23

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

!

petite question en plus du novice que je suis : c'est quoi la différence entre un tableau et un objet json?

**NoSmoking** · 03/04/2013, 20h38

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.

Mais je ne sais pas faire ça

!

il n'est pas de fatalité

**triaguae** · 03/04/2013, 20h51

Après un peu de galère j'ai réussi à avoir un tableau comme 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
$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 :

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

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 :

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

**triaguae** · 04/04/2013, 13h33

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

Code :

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

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

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

Code :

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

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 :

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

data.addRows(donneeJS);

j'ai donc affiché les valeurs

Code :

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

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 :

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

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 !

**NoSmoking** · 04/04/2013, 18h53

je ne comprends pas ce que tu essaies de faire ici

Code :

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

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 :

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

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

**triaguae** · 04/04/2013, 20h37

ça

Code :

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

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 :

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

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

Code :

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

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]"};

**NoSmoking** · 04/04/2013, 22h57

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

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

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.

**triaguae** · 05/04/2013, 09h24

Je ne comprends plus rien

Code :

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

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 :

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

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 :

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

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 :

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

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]
)"

**NoSmoking** · 05/04/2013, 22h44

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

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

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

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

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 :

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

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

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 :

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

**triaguae** · 06/04/2013, 08h04

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

**NoSmoking** · 06/04/2013, 10h26

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.

Inutile de faire un echo $tableau_json; en dehors des balises <script></script>.

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

Boucle sur graphique google chart [Autres]

APIs Google

Discussions similaires

Partager

Partager