Ho voluto provare a prelevare le letture di alcuni valori da un mio database MySql e visualizzarli in Google Charts.
Ecco come ho fatto :
<!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="refresh" content="180" > <!-- ogni 180 secondi si aggiorna la pagina -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Andamento temperatura ed umidita' Cat's House
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Crea e popola la tabella dati.
var data = new google.visualization.DataTable();
data.addColumn('string', 'orario');
data.addColumn('number', 'Temp. Interna');
data.addColumn('number', 'Umid. Interna');
data.addColumn('number', 'Temp. Esterna');
<?php
$db_host = 'localhost';
$db_database = 'nome del tuo database';
$db_user = 'nome utente del db';
$db_password = 'password';
$db = mysql_connect($db_host, $db_user, $db_password);
mysql_select_db($db_database);
$sqlQuery = "SELECT timeStamp as orario, temperatura_interna as tempint, umidita_interna as umidint,
temperatura_esterna as tempest FROM tempLog d1
group by 1";
$sqlResult = mysql_query($sqlQuery);
while ($row = mysql_fetch_assoc($sqlResult)) {
echo " data.addRow(['{$row['orario']}', {v: {$row['tempint']}, f: 'C {$row['tempint']}' }, {v: {$row['umidint']}, f: '% {$row['umidint']}' }, {v: {$row['tempest']}, f: 'C {$row['tempest']}' } ]); ";
}
?>
// Crea e disegna la visualizazione.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
title: "Andamento temperature ed umidita'",
titleTextStyle: {color: "orange"},
width: 800, height: 400,
vAxis: {minValue: 0},
vAxis: {baseline: 0},
vAxis: {gridlines: {count: 10} },
vAxis: {title: "Valori temperature/umidita'", titleTextStyle: {color: "orange"}},
hAxis: {title: "Orario", titleTextStyle: {color: "orange"}},
interpolateNulls: 1
}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 500px; height: 400px;"></div>
</body>
</html>
Ed ecco il risultato
A questo link si trovano valide informazioni circa i parametri di personalizzazione del grafico : https://developers.google.com/chart/interactive/docs/gallery/linechart
0 commenti