Blog der Heimetli Software AG

Liniendiagramm mit Chart.js

Chart.js ist Open Source, steht unter der MIT Lizenz, und die Diagramme sind sehr ansehnlich. Die Linien werden sogar mit dem Bezier-Algorithmus geglättet.

Die Graphik sollte nicht statisch sein, sondern alle zwei Sekunden die aktuellen Daten vom Server holen und anzeigen.

Der Code dazu

var chart = null ;

var config = {
   type: "line",
   data: {
      labels: [],
      datasets: [{
         label: "Random data",
         backgroundColor: "red",
         borderColor: "red",
         data: [],
         fill: false,
      }]
   },
   options: {
      responsive: true,
      legend: {
         display: false
      },
      tooltips: {
         mode: "index",
         intersect: false,
      },
      hover: {
         mode: "nearest",
         intersect: true
      },
      scales: {
         xAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: "Point"
            }
         }],
         yAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: "Value"
            }
         }]
      }
   }
} ;

function update( json )
{
   fetch( "/cgi-bin/fake-data" )
         .then( response => response.json() )
         .then( json => {
                          config.data.labels           = json.labels ;
                          config.data.datasets[0].data = json.data ;

                          if( chart === null )
                          {
                             var ctx = document.getElementById( "canvas" ).getContext( "2d" ) ;
                             chart   = new Chart( ctx, config ) ;
                          }
                          else
                          {
                             chart.update() ;
                          }
                        } )
         .catch( error => alert("Error: "+error) ) ;

}

window.onload = () => {
   update() ;
   setInterval( update, 2000 ) ;
} ;

Der gösste Teil des Codes dient zur Konfiguration des Chart-Objekts.

In der Funktion update werden die Daten vom Server geholt und dem config-Objekt übergeben. Wenn der Chart noch nicht existiert dann wird er instanziiert, und sonst nur neu gezeichnet.

Die onload-Funktion sorgt dafür dass der Graph ein erstes mal gezeichnet wird, und startet dann einen periodischen Timer der die update-Funktion alle zwei Sekunden aufruft.

Serverseite

Auf dem Server läuft ein bash-Script das fünf Zufallszahlen ausgibt:

#!/bin/bash
echo -en "Content-Type: application/json\r\n\r\n"
echo -en "{ \"labels\" : [1,2,3,4,5], \"data\" : [$RANDOM,$RANDOM,$RANDOM,$RANDOM,$RANDOM] }"