|
|
|
![]() |
|
Strumenti |
![]() |
#1 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
Google Charts (Gauge) e PHP
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> Come posso fare? 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 |
![]() |
![]() |
![]() |
#2 |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2142
|
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. |
![]() |
![]() |
![]() |
#3 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
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 |
![]() |
![]() |
![]() |
#4 |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2142
|
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 ![]() |
![]() |
![]() |
![]() |
#5 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
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 |
![]() |
![]() |
![]() |
#6 |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2142
|
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. |
![]() |
![]() |
![]() |
#7 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
Questo è il codice della pagina linkata.
Codice PHP:
__________________
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 |
![]() |
![]() |
![]() |
#8 |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2142
|
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) ![]() |
![]() |
![]() |
![]() |
#9 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
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 |
![]() |
![]() |
![]() |
#10 |
Senior Member
Iscritto dal: Nov 2010
Città: Londra
Messaggi: 620
|
Codice HTML:
new google.visualization.Gauge(document.getElementById('visualization')). draw(data); 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> |
![]() |
![]() |
![]() |
#11 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
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); Codice:
<div id='chart_div'> <div id='chart_div2'>
__________________
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 |
![]() |
![]() |
![]() |
#12 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
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>
__________________
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 |
![]() |
![]() |
![]() |
#13 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
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 |
Senior Member
Iscritto dal: Jan 2003
Città: Roma Messaggi Totali:50333
Messaggi: 3517
|
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 | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 12:20.