Google Charts (Gauge) e PHP

digital_brain · 07-07-2014, 13:12

Salve a tutti,
ho la necessità di inserire il valore di una variabile php come parametro per dei grafici google charts.

il codice del google chart è il seguente:

Codice HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['gauge']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68
        ]);
      
        // Create and draw the visualization.
        new google.visualization.Gauge(document.getElementById('visualization')).
            draw(data);
      }
      

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 300px;"></div>
  </body>
</html>

e nell'array al posto dei valori numerici fissi devo inserire delle variabili di un altro codice php.

Come posso fare?

Grazie!

airon · 07-07-2014, 13:29

La pagina deve essere php. Servita da un webserver con php. Poi usi i classici <?php ?> nei quali chiami la tua funzione che restituisce i dati che poi vengono passati alla arraytotable di google.

Qualsiasi linguaggio lato server va bene, per intenderci, pyhton, java, javascript (nodejs). Sta a te decidere.

digital_brain · 07-07-2014, 14:53

Ciao,
sto usando php come linguaggio, e come value nel google.visualization.arrayToDataTable ho messo <?php echo ($variabile_php); ?>
ma così non esegue il codice js, forse faccio degli errori di sintassi??
Grazie

airon · 07-07-2014, 16:42

Eh ma l'html generato com'é? In console cosa dice?

Molto probaiblmente non hai chiuso qualche parentesi o hai fatto errore di sintassi dell'array

digital_brain · 08-07-2014, 01:09

Ciao,
puoi vederlo a questo indirizzo:
http://www.tailornet.it/energy_panel/gauge.php

non credo di aver fatto errori di sintassi eprchè se metto come valore dell'array un numero funziona tutto.Solo se al posto del valore metto la variabile php non visualizza nulla.

Grazie

airon · 08-07-2014, 09:15

Posta il codice php della funzione che ti genera l'array di valori. Così è impossibile aiutarti.

Ah attento che l'ultimo array di valori vuole la parentesi quadra...

Codice:

var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

digital_brain · 08-07-2014, 10:26

Questo è il codice della pagina linkata.

Codice PHP:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>

      Google Visualization API Sample

    </title>

    <script type="text/javascript" src="//www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load('visualization', '1', {packages: ['gauge']});

    </script>

    <script type="text/javascript">

      function drawVisualization() {

        // Create and populate the data table.

        var data = google.visualization.arrayToDataTable([

          ['Label', 'Value'],

          ['Media Consumo Anno Rif', <?php echo ($row["Attiva"]); ?>],

          ['CPU', 55],

          ['Network', 68]

        ]);

        

      

        // Create and draw the visualization.

        new google.visualization.Gauge(document.getElementById('visualization')).

            draw(data);

      }

      



      google.setOnLoadCallback(drawVisualization);

    </script>

  </head>

  <body style="font-family: Arial;border: 0 none;">

    <div id="visualization" style="width: 600px; height: 300px;"></div>

    

    <?php

/*variabili connessione DB */

$DBhost = ***

$DBuser = ****

$DBpass = ****

$DBName = ****





$a=time();

$ora=date('H', $a).":00";

$data=date('M');

$ora_rif=$ora-1 .":00";

$data1=date ('d/m/y');

$giorniMese=date('t');

$giorno_del_mese = date('j');







/* dichiarazione nomi tabelle */

$table = anno_rif;

$table1 = dati_real_timests;



/* Connessione al database */







$connessione = mysql_connect(****)or die("Connessione non riuscita: " . mysql_error());

   /*print ("Connesso con successo");*/



mysql_select_db('paneldb', $connessione) or die("Errore nella selezione del database");





/*Query su tabella anno di riferimento*/





$result = mysql_query ("SELECT * FROM $table where Data='$data' && Ora='$ora_rif' ")

or die ("Query non valida");

/*echo "Query avvenuta correttamente";*/





if($result && mysql_num_rows($result)>0){

     while($row=mysql_fetch_assoc($result)){

        

       echo (/*$row["Data"] .";".*/"Media Consumo Anno di Riferimento ora precedente:" .$row["Attiva"] ."<br/>");

       

     }

     

     

}



else

     echo "nessun risultato";

     mysql_close($connessione);

?>

    

  </body>

</html>

airon · 08-07-2014, 14:46

Hai guardato la console?

Il problema è che tu fai un echo di una variabile che per lui ancora non esiste. Php è di tipo procedurale...all'inizio la variabile $row["attiva"] ancora non esiste. Php stampa un errore di var non esistente (una stringa) e lo script va giustamente in errore.

Prova a mettere il codice del DB (che non ho controllato) all'inizio di tutto l'html e vedrai che funziona (ripeto di non aver controllato lo script di accesso e retrive dei dati dal db)

digital_brain · 09-07-2014, 14:41

Grazie airon, non ci avevo pensato, in effetti mettendo prima il codice php funziona.
Ho però un altra domanda:
come faccio a replicare il "gauge" di google charts "clonando" la funzione nella stessa pagina?
Un risultato di questo tipo:
-----echo php-----
-----gauge1-------
-----echo php------
-----gauge2--------
ho provato replicando il codice e cambiando var data in var data1 ma mi sovrascrive il risultato.

Grazie.

OoZic · 09-07-2014, 19:14

Codice HTML:

new google.visualization.Gauge(document.getElementById('visualization')). 
            draw(data);

ti sta dicendo che andrà a inserire il grafico nell'elemento con id = visualization.

ti basta dargli un altro elemento con un altro id.

tipo

Codice HTML:

<div id="visualization2"></div>

<script>
...
new google.visualization.Gauge(document.getElementById('visualization2')). 
            draw(data); 
...
</script>

digital_brain · 14-07-2014, 10:25

Grazie OoZic,
ho provato come dici tu ma qualcosa non mi torna...
Ho clonato lo stesso codice dello script,modificandolo con un id diverso:

Codice:

var chart = new google.visualization.Gauge(document.getElementById('chart_div2'));
        chart.draw(data, options);

e mettendo del body

Codice:

<div id='chart_div'>
  <div id='chart_div2'>

ma mi visualizza solo i grafici del primo codice...

digital_brain · 14-07-2014, 10:27

il codice dello script è il seguente:

Codice HTML:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['1', <?php echo $a ?>],
          ['2', <?php echo $b ?>],
		  ['3', <?php echo $cons  ?>],
		  ['4', <?php echo $accumulatore/1000 ?>],
		
          
        ]);

        var options = {
          width: 1100, height: 400,
          redFrom: 4000, redTo: 5000,
          yellowFrom:3000, yellowTo: 4000,
          minorTicks: 5,
          majorTicks: 8,
          max: 5000,
          min: 0
        };
		
		
		
	

        
      

        var chart = new google.visualization.Gauge(document.getElementById('chart_div2'));
        chart.draw(data, options);
		
		
		
      }
    </script>

digital_brain · 14-07-2014, 11:14

Inoltre,
come faccio a gestire la posizione dei grafici, ad esempio se li volessi su 2 o più righe?Di default li rimpicciolisce e li mette tutti sulla stessa riga.
Grazie

digital_brain · 14-07-2014, 11:37

La prima questione l'ho risolta, era un problema di div!

Resta capire come poter dire ai google charts su quale riga posizionarsi..

07-07-2014, 13:29	#2
airon Senior Member Iscritto dal: Feb 2004 Città: milano Messaggi: 2148	La pagina deve essere php. Servita da un webserver con php. Poi usi i classici <?php ?> nei quali chiami la tua funzione che restituisce i dati che poi vengono passati alla arraytotable di google. Qualsiasi linguaggio lato server va bene, per intenderci, pyhton, java, javascript (nodejs). Sta a te decidere. Ultima modifica di airon : 07-07-2014 alle 13:33.

07-07-2014, 14:53	#3
digital_brain Senior Member Iscritto dal: Jan 2003 Città: Roma Messaggi Totali:50333 Messaggi: 3519	Ciao, sto usando php come linguaggio, e come value nel google.visualization.arrayToDataTable ho messo <?php echo ($variabile_php); ?> ma così non esegue il codice js, forse faccio degli errori di sintassi?? Grazie __________________ Photo: Nikon D80 - Nikon 105Vr Micro + Nikon 70-300Vr + 18-135 + 50mm 1.8 + F65 + Canon S3 Is + Casio S600 Pc: Amd X2 6400+ - Asus M2N SLI Deluxe - 4 x 1Gb Corsair XMS2 800mHz cas 4 - Ati Hd 2600 Xt 512Mb ddr3 - Case TT Armor-Coolpanel2 Utenti con cui ho trattato

08-07-2014, 01:09	#5
digital_brain Senior Member Iscritto dal: Jan 2003 Città: Roma Messaggi Totali:50333 Messaggi: 3519	Ciao, puoi vederlo a questo indirizzo: http://www.tailornet.it/energy_panel/gauge.php non credo di aver fatto errori di sintassi eprchè se metto come valore dell'array un numero funziona tutto.Solo se al posto del valore metto la variabile php non visualizza nulla. Grazie __________________ Photo: Nikon D80 - Nikon 105Vr Micro + Nikon 70-300Vr + 18-135 + 50mm 1.8 + F65 + Canon S3 Is + Casio S600 Pc: Amd X2 6400+ - Asus M2N SLI Deluxe - 4 x 1Gb Corsair XMS2 800mHz cas 4 - Ati Hd 2600 Xt 512Mb ddr3 - Case TT Armor-Coolpanel2 Utenti con cui ho trattato

08-07-2014, 09:15	#6
airon Senior Member Iscritto dal: Feb 2004 Città: milano Messaggi: 2148	Posta il codice php della funzione che ti genera l'array di valori. Così è impossibile aiutarti. Ah attento che l'ultimo array di valori vuole la parentesi quadra... Codice: var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); Ultima modifica di airon : 08-07-2014 alle 09:26.

08-07-2014, 10:26	#7
digital_brain Senior Member Iscritto dal: Jan 2003 Città: Roma Messaggi Totali:50333 Messaggi: 3519	Questo è il codice della pagina linkata. Codice PHP: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['gauge']}); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Media Consumo Anno Rif', <?php echo ($row["Attiva"]); ?>], ['CPU', 55], ['Network', 68] ]); // Create and draw the visualization. new google.visualization.Gauge(document.getElementById('visualization')). draw(data); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 600px; height: 300px;"></div> <?php /variabili connessione DB / $DBhost = * $DBuser = $DBpass = $DBName = ** $a=time(); $ora=date('H', $a).":00"; $data=date('M'); $ora_rif=$ora-1 .":00"; $data1=date ('d/m/y'); $giorniMese=date('t'); $giorno_del_mese = date('j'); /* dichiarazione nomi tabelle / $table = anno_rif; $table1 = dati_real_timests; / Connessione al database / $connessione = mysql_connect(**)or die("Connessione non riuscita: " . mysql_error()); /print ("Connesso con successo");/ mysql_select_db('paneldb', $connessione) or die("Errore nella selezione del database"); /Query su tabella anno di riferimento/ $result = mysql_query ("SELECT FROM $table where Data='$data' && Ora='$ora_rif' ") or die ("Query non valida"); /echo "Query avvenuta correttamente";/ if($result && mysql_num_rows($result)>0){ while($row=mysql_fetch_assoc($result)){ echo (/$row["Data"] .";"./"Media Consumo Anno di Riferimento ora precedente:" .$row["Attiva"] ."<br/>"); } } else echo "nessun risultato"; mysql_close($connessione); ?> </body> </html> __________________ Photo: Nikon D80 - Nikon 105Vr Micro + Nikon 70-300Vr + 18-135 + 50mm 1.8 + F65 + Canon S3 Is + Casio S600 Pc: Amd X2 6400+ - Asus M2N SLI Deluxe - 4 x 1Gb Corsair XMS2 800mHz cas 4 - Ati Hd 2600 Xt 512Mb ddr3 - Case TT Armor-Coolpanel2 Utenti con cui ho trattato

07-07-2014, 16:42	#4
airon Senior Member Iscritto dal: Feb 2004 Città: milano Messaggi: 2148	Eh ma l'html generato com'é? In console cosa dice? Molto probaiblmente non hai chiuso qualche parentesi o hai fatto errore di sintassi dell'array

08-07-2014, 14:46	#8
airon Senior Member Iscritto dal: Feb 2004 Città: milano Messaggi: 2148	Hai guardato la console? Il problema è che tu fai un echo di una variabile che per lui ancora non esiste. Php è di tipo procedurale...all'inizio la variabile $row["attiva"] ancora non esiste. Php stampa un errore di var non esistente (una stringa) e lo script va giustamente in errore. Prova a mettere il codice del DB (che non ho controllato) all'inizio di tutto l'html e vedrai che funziona (ripeto di non aver controllato lo script di accesso e retrive dei dati dal db)

09-07-2014, 14:41	#9
digital_brain Senior Member Iscritto dal: Jan 2003 Città: Roma Messaggi Totali:50333 Messaggi: 3519	Grazie airon, non ci avevo pensato, in effetti mettendo prima il codice php funziona. Ho però un altra domanda: come faccio a replicare il "gauge" di google charts "clonando" la funzione nella stessa pagina? Un risultato di questo tipo: -----echo php----- -----gauge1------- -----echo php------ -----gauge2-------- ho provato replicando il codice e cambiando var data in var data1 ma mi sovrascrive il risultato. Grazie. __________________ Photo: Nikon D80 - Nikon 105Vr Micro + Nikon 70-300Vr + 18-135 + 50mm 1.8 + F65 + Canon S3 Is + Casio S600 Pc: Amd X2 6400+ - Asus M2N SLI Deluxe - 4 x 1Gb Corsair XMS2 800mHz cas 4 - Ati Hd 2600 Xt 512Mb ddr3 - Case TT Armor-Coolpanel2 Utenti con cui ho trattato

09-07-2014, 19:14	#10
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	Codice HTML: new google.visualization.Gauge(document.getElementById('visualization')). draw(data); ti sta dicendo che andrà a inserire il grafico nell'elemento con id = visualization. ti basta dargli un altro elemento con un altro id. tipo Codice HTML: <div id="visualization2"></div> <script> ... new google.visualization.Gauge(document.getElementById('visualization2')). draw(data); ... </script> __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

14-07-2014, 10:25	#11
digital_brain Senior Member Iscritto dal: Jan 2003 Città: Roma Messaggi Totali:50333 Messaggi: 3519	Grazie OoZic, ho provato come dici tu ma qualcosa non mi torna... Ho clonato lo stesso codice dello script,modificandolo con un id diverso: Codice: var chart = new google.visualization.Gauge(document.getElementById('chart_div2')); chart.draw(data, options); e mettendo del body Codice: <div id='chart_div'> <div id='chart_div2'> ma mi visualizza solo i grafici del primo codice... __________________ Photo: Nikon D80 - Nikon 105Vr Micro + Nikon 70-300Vr + 18-135 + 50mm 1.8 + F65 + Canon S3 Is + Casio S600 Pc: Amd X2 6400+ - Asus M2N SLI Deluxe - 4 x 1Gb Corsair XMS2 800mHz cas 4 - Ati Hd 2600 Xt 512Mb ddr3 - Case TT Armor-Coolpanel2 Utenti con cui ho trattato

14-07-2014, 11:14	#13
digital_brain Senior Member Iscritto dal: Jan 2003 Città: Roma Messaggi Totali:50333 Messaggi: 3519	Inoltre, come faccio a gestire la posizione dei grafici, ad esempio se li volessi su 2 o più righe?Di default li rimpicciolisce e li mette tutti sulla stessa riga. Grazie __________________ Photo: Nikon D80 - Nikon 105Vr Micro + Nikon 70-300Vr + 18-135 + 50mm 1.8 + F65 + Canon S3 Is + Casio S600 Pc: Amd X2 6400+ - Asus M2N SLI Deluxe - 4 x 1Gb Corsair XMS2 800mHz cas 4 - Ati Hd 2600 Xt 512Mb ddr3 - Case TT Armor-Coolpanel2 Utenti con cui ho trattato

14-07-2014, 11:37	#14
digital_brain Senior Member Iscritto dal: Jan 2003 Città: Roma Messaggi Totali:50333 Messaggi: 3519	La prima questione l'ho risolta, era un problema di div! Resta capire come poter dire ai google charts su quale riga posizionarsi.. __________________ Photo: Nikon D80 - Nikon 105Vr Micro + Nikon 70-300Vr + 18-135 + 50mm 1.8 + F65 + Canon S3 Is + Casio S600 Pc: Amd X2 6400+ - Asus M2N SLI Deluxe - 4 x 1Gb Corsair XMS2 800mHz cas 4 - Ati Hd 2600 Xt 512Mb ddr3 - Case TT Armor-Coolpanel2 Utenti con cui ho trattato

Strumenti
Mostra una versione stampabile Invia questa pagina per email