PDA

View Full Version : 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:

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


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.

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

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

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

e mettendo del body

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

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