Boucle sur graphique google chart

**triaguae** · 06/04/2013, 13h41

pour l'instant j'ai abandonné la boucle je reste sur la fonction initiale donc les fonctions drawchart et drawunechart que tu m'as indiquées je les mets de cîté;
je voudrais bien faire fonctionner ce fichu tableau JS
-j'ai viré le echo $tableau_json (ça c'était pour voir à quoi ça ressemblait!)
-je mets le tableau 1 dans donne avec

Code :

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

var donnee = tableau["1"];

j'ai donc fait les modifs qui me semblait nécessaire mais......rien

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=5432 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-10') 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"];
 
      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>

code source généré :

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
 
  <!DOCTYPE html>
<html>
  <head>
 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
    <script type="text/javascript">
    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"]],"3":[["2011-01-04","290"],["2011-01-05","287"],["2011-01-06","293"],["2011-01-07","286"],["2011-01-08","311"]],"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"]],"6":[["2011-01-04","255"],["2011-01-05","245"],["2011-01-06","275"],["2011-01-07","258"],["2011-01-08","250"]]};
 
    var donnee = tableau["1"];
 
      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, 15h45

pour l'instant j'ai abandonné la boucle je reste sur la fonction initiale

je pense que c'est une erreur car ton problème est ailleurs.

Envoyé par dernier code transmis

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"],...etc...

Envoyé par avant dernier code transmis

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

comment ce fait-il que les données de valeurs soient devenues des text et non plus des float, présence des guillemets autour de la valeur.

**triaguae** · 06/04/2013, 18h02

Envoyé par NoSmoking

comment ce fait-il que les données de valeurs soient devenues des text et non plus des float, présence des guillemets autour de la valeur.

Ce que j'ai changé c'est la façon de faire le tableau en php : je suis passé de mon truc pas très beau au tient bien plus propre.

**triaguae** · 06/04/2013, 21h10

voici un code qui marche avec la boucle :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?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,7,8,9) 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, JSON_NUMERIC_CHECK);
 //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];
 
 
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
 
      function drawChart() 
      {
       for (var i in tableau) 
        {
        drawUneChart('div'+i, tableau[i]);
        }
       }
 
 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']
  });
}
 
 
 
      </script>
  </head>
 
  <div id="div1"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div6"></div>
  </html>

j'ai ajouté l'option JSON_NUMERIC_CHECK à la création de l'objet Json pour supprimer les guillemets.
la boucle que tu m'as fournie fonctionne
Il me reste à générer des div dynamiquement, et qq trucs comme les titres de graph et ce sera bon

merci pour ton aide

**NoSmoking** · 06/04/2013, 22h35

j'ai ajouté l'option JSON_NUMERIC_CHECK à la création de l'objet Json pour supprimer les guillemets.

ce qui laisse à penser que la valeur est stockée en tant que text dans ta base.

Il me reste à générer des div dynamiquement, ...

dans ce cas tu n'as surement pas besoin de gérer l'ID des DIV, il te suffit de tester si elle existe(!) et si non de la créer.

Cela peut donner

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
function drawUneChart(id, donnee) {
  var oDiv = document.getElementById(id);
  if( !oDiv){
    oDiv = document.createElement('DIV');
    oDiv.id = id;  // pas forcément utile
    document.body.appendChild( oDiv);    
  }
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'date');
  data.addColumn('number', 'MG');
  data.addRows(donnee);
 
  var chart = new google.visualization.LineChart( oDiv);
  chart.draw(data, {
    width: 500,
    height: 500,
    title: 'MG',
    curveType: 'function',
    colors: ['green']
  });
}

à voir l'utilité du passage en paramètre de l'ID si non utile

**triaguae** · 07/04/2013, 08h02

concernant le stockage au format text dans la base, et bien non je suis en numeric

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
CREATE TABLE tbl_stat_sta
(
  sta_id bigserial NOT NULL,
  sta_date date,
  sta_esp integer,
  sta_valeur numeric(7,3),
  ana_id integer,
  CONSTRAINT sta_id PRIMARY KEY (sta_id),
  CONSTRAINT ana_id FOREIGN KEY (ana_id)
      REFERENCES tbl_analyse_ana (ana_id) MATCH SIMPLE
      ON UPDATE NO ACTION ON DELETE NO ACTION,
  CONSTRAINT sta UNIQUE (sta_date, sta_esp, ana_id)

et la fonction arrondi renvoi également du numéric :

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
CREATE OR REPLACE FUNCTION arrondi(numeric, integer)
  RETURNS numeric AS
$BODY$
DECLARE 
s RECORD;
crit integer := $2;
nb integer;
cur CURSOR FOR SELECT ana_decimal FROM tbl_analyse_ana WHERE ana_id = crit;
 
BEGIN
	OPEN cur;
	LOOP
	FETCH NEXT FROM cur INTO s;
	EXIT WHEN NOT FOUND;
	nb := s.ana_decimal;
	END LOOP;
	CLOSE cur;
 
	RETURN round($1, nb);
END
$BODY$
  LANGUAGE plpgsql VOLATILE