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?

Boucle sur graphique google chart [Autres]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager