Ormai ci siamo quasi, siamo giunti all’ultimo capitolo di questa guida!
Abbiamo costruito la nostra stazione meteo e salvato i dati nel nostro database! Tutto questo però è poco utile se non realizziamo un sistema per visualizzare e condividere questi valori con i nostri amici.
Per farlo abbiamo deciso di utilizzare Google Charts, uno strumento online gratuito offerto da Google che permette di creare e personalizzare grafici e visualizzazioni di dati.
La pagina web che andremo a creare conterrà una tabella iniziale che riassume gli ultimi valori raccolti, le quantità massime e minime della giornata ed un confronto con lo stesso periodo dell’anno precedente.
Inoltre per ogni grandezza fisica ci saranno due grafici dedicati che mostrano l’andamento nelle ultime 24 ore e negli ultimi 12 mesi.
Di seguito possiamo vederne due di esempio relativi alla temperatura:
Il codice di questa pagina web è relativamente lungo quindi ora ci concentreremo sugli aspetti più importanti ed interessanti, ma al termine di questo articolo sarà possibile scaricare il file completo.
Il primo punto chiave degno di nota riguarda la temperatura: a seconda di dove sarà posizionata la stazione meteo (in pieno sole, all’ombra, in un punto arieggiato, ecc.) sarà necessario introdurre una correzione della temperatura per tentare di riportarla al valore reale. Per farlo abbiamo quindi introdotto la variabile $correzione_temperatura che, nel nostro caso, introduce una correzione pari a 2 gradi.
// correzione di temperatura rispetto ai valori rilevati
$correzione_temperatura = 2.0;
Una volta effettuata la connessione al database mysql, in modo analogo a come già visto per le altre pagine web negli articoli precedenti, si prosegue con una sezione di codice dedicata ad estrapolare tutti i dati necessari a popolare la tabella riepilogativa relativa ai valori delle ultime 24 ore ed al confronto con l’anno precedente.
Proseguiamo poi con tutti i grafici che visualizzano i dati delle ultime 24 ore. A titolo di esempio analizziamo di seguito il primo dedicato alla temperatura:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Orario','Temperatura'],
<?php
$query = "SELECT (temperatura - $correzione_temperatura) AS temperatura, DATE_FORMAT (time_stamp, \"%Y-%m-%d %H:%i\") AS orario FROM `stazione_meteo` where time_stamp >= addtime(CURRENT_TIMESTAMP(), \"-24:00:00\")";
$exec = mysqli_query($con, $query);
while($row = mysqli_fetch_array($exec)){
$orario = $row['orario'];
//modifica necessaria perchè il comando new Date in Google chart prevede i mesi da 0 a 11
$anno = date("Y", strtotime($orario));
$mese = date("n", strtotime($orario))-1;
$giorno = date("d", strtotime($orario));
$ora = date("H", strtotime($orario));
$minuti = date("i", strtotime($orario));
$orariomodificato = $anno.",".$mese.",".$giorno.",".$ora.",".$minuti;
echo "[new Date(".$orariomodificato."),".$row['temperatura']."],";
}
?>
]);
var options = {
title: 'Temperatura ultime 24 ore',
titleTextStyle: {
color: '#FFFFFF'
},
chartArea: {
backgroundColor: {
fill: '#F4F4F4',
opacity: 100
},
},
vAxis: {
title: "Temperatura (°C)",
minValue: 0,
textStyle: {color: 'FFFFFF'},
titleTextStyle: {
color: '#FFFFFF'
}
},
hAxis: {
title: 'Orario',
format: 'HH:mm',
textStyle: {color: 'FFFFFF'},
titleTextStyle: {
color: '#FFFFFF'
}
},
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
legend: {
alignment: 'center',
position: 'bottom',
textStyle: {color: 'FFFFFF'}
},
series: {
0: {
// impostazioni per la prima serie di dati
color: '#FFA33B'
}
},
backgroundColor: '#0C0C16'
};
var chart = new google.visualization.AreaChart(document.getElementById("temperatura24ore"));
var formatter = new google.visualization.DateFormat({pattern: 'HH:mm'});
formatter.format(data, 0);
options.chartArea = { left: '8%', right: '4%', top: '8%', width: "100%"};
chart.draw(data,options);
}
</script>
Come si evince dal codice il grafico mostrerà lungo l’asse x l’orario e lungo l’asse y la temperatura, valori che estrapoliamo dal database con la seguente query:
$query = "SELECT (temperatura - $correzione_temperatura) AS temperatura, DATE_FORMAT (time_stamp, \"%Y-%m-%d %H:%i\") AS orario FROM `stazione_meteo` where time_stamp >= addtime(CURRENT_TIMESTAMP(), \"-24:00:00\")";
Purtroppo in Google Charts i mesi devono essere dichiarati dal 0 (gennaio) all’11 (dicembre) e quindi per far questo abbiamo dovuto effettuare la seguente conversione:
//modifica necessaria perchè il comando new Date in Google chart prevede i mesi da 0 a 11
$anno = date("Y", strtotime($orario));
$mese = date("n", strtotime($orario))-1;
$giorno = date("d", strtotime($orario));
$ora = date("H", strtotime($orario));
$minuti = date("i", strtotime($orario));
$orariomodificato = $anno.",".$mese.",".$giorno.",".$ora.",".$minuti;
Seguono infine tutte le impostazioni del grafico riguardanti descrizioni, colori, formattazione di date e orari.
In modo analogo sono stati creati anche tutti gli altri grafici riguardanti le altre grandezze fisiche, sia per visualizzare i dati delle ultime 24 ore sia per le rappresentazioni degli ultimi 12 mesi.
Il file contenente il codice completo è disponibile cliccando qui ma ricordate di modificare i dati di accesso al vostro database mysql per una corretta connessione.