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] }"