Blog der Heimetli Software AG

Zeitreihen mit Chart.js

von

Auch für die Darstellung von Zeitreihen eignet sich Chart.js.

Dieses Beispiel zeigt wie das realisiert werden kann. Die gemessenen Werte werden beim Laden der Seite vom Server geholt. So lange die Darstellung unverändert bleibt, braucht der Server also nur die aktuellen Daten zu liefern.

Der Code dazu

var config = {
   type: "line",
   data: {
      labels: [],
      datasets: [{
         label: "Load",
         backgroundColor: "red",
         borderColor: "red",
         data: [],
         fill: false,
         pointRadius: 0
      },{
         label: "Load",
         backgroundColor: "blue",
         borderColor: "blue",
         data: [],
         fill: false,
         pointRadius: 0
      },{
         label: "Load",
          backgroundColor: "green",
         borderColor: "green",
         data: [],
         fill: false,
         pointRadius: 0
      }]
   },
   options: {
      responsive: true,
      legend: {
         display: false
      },
      tooltips: {
         mode: "index",
         intersect: false,
      },
      hover: {
         mode: "nearest",
         intersect: true
      },
      scales: {
         xAxes: [{
            type: "time",
	        time: { displayFormats: { minute: "HH:mm" } },
            display: true,
            scaleLabel: {
               display: true,
               labelString: "Point"
            }
         }],
         yAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: "Value"
            }
         }]
      }
   }
} ;

fetch( "load.json" )
     .then( response => response.json() )
     .then( json => {
          config.data.labels = json.map( row => moment(row.x).toDate() ) ;
          config.data.datasets[0].data = json.map( row => row.a ) ;
          config.data.datasets[1].data = json.map( row => row.b ) ;
          config.data.datasets[2].data = json.map( row => row.c ) ;
          console.table( config.data.datasets[0].data ) ;
          var ctx   = document.getElementById( "canvas" ).getContext( "2d" ) ;
          var chart = new Chart( ctx, config ) ;
     } )
     .catch( error => alert("Error: "+error) ) ;

Das Datenformat

Um die Daten im Browser einfach verarbeiten zu können habe ich mich für JSON entschieden. Das JSON sieht so aus:

[{"x":"2019-09-21T09:16+02:00","a":1.12,"b":0.56,"c":2.24},
{"x":"2019-09-21T09:17+02:00","a":0.91,"b":0.455,"c":1.82},
.
.
.
{"x":"2019-09-21T14:03+02:00","a":0.17,"b":0.085,"c":0.34},
{"x":"2019-09-21T14:04+02:00","a":0.26,"b":0.13,"c":0.52}]

x gibt den Zeitpunkt der Messung an, a, b und c sind die Messwerte für diesen Punkt.