Blog der Heimetli Software AG

Graphen für Temperatur, Feuchtigkeit und Wind

von

Auf dem Dach steht neuerdings ein Sensor von TFA. Er liefert Daten zur Temperatur, der Luftfeuchtigkeit und der Windgeschwindigkeit.

Zur Darstellung der Zeitreihen dient Google Charts, weil es sich bisher gut bewährt hat. Selbstverständlich sind die Messwerte nicht auf den Hundertstel genau, es sind Durchschnittswerte in Intervallen von ungefähr 5 Minuten.

Temperatur

Feuchtigkeit

Wind

Die Daten vom Server

Der Server liefert die Daten als JSON aus, in folgendem Format:

[
 {"t":"2023-12-30T22:19:24","v":9.5},
 {"t":"2023-12-30T22:26:59","v":9.5},
 {"t":"2023-12-30T22:32:14","v":9.5}
 .
 .
 .
]

Das Script auf dieser Seite

function drawChart( id, label, unit )
{
   fetch( `https://www.heimetli.ch/data/${id}` )
      .then( response => response.json() )
      .then( json => {
         const data = new google.visualization.DataTable() ;
         data.addColumn('datetime', 'time') ;
         data.addColumn('number', 'value') ;
         data.addColumn({type: 'string', role: 'tooltip'}) ;
    
         const fmt = new google.visualization.DateFormat({pattern: "d.M.yy - HH:mm"});
    
         json.forEach( row => {
            const date = new Date( row.t ) ;
            data.addRow( [date, row.v, `${fmt.formatValue(date)}\n${label} ${row.v}${unit}`] ) ;
         } ) ;

         const options = {
                   explorer: {
                      axis: "horizontal"
                   },
                   chartArea: { left: "10%", top: "10%", width: "85%", height: "80%" },
                   legend: "none",
                   hAxis: {
                      title: "Datum",
                      format: "d.M"
                   },
                   vAxis: {
                      title: `${label} ${unit}`
                   },
                   backgroundColor: "#f1f8e9"
         } ;

         const chart = new google.visualization.LineChart( document.getElementById(id) ) ;
         chart.draw( data, options ) ;
      } )
      .catch( error => alert(error) ) ;
}
    
google.charts.load('current', {packages: ['corechart', 'line']} ) ;
google.charts.setOnLoadCallback( () => drawChart("temperature","Temperatur","\u00B0C") ) ;
google.charts.setOnLoadCallback( () => drawChart("humidity","Feuchtigkeit","%rF") ) ;
google.charts.setOnLoadCallback( () => drawChart("wind","Windgeschwindigkeit","km/h") ) ;