Graphenmalerei mit Google Charts

Benötigen Sie Auswertungen ihrer Daten in Form von farbigen Graphen, gibt es diverse Möglichkeiten, diese zu erzeugen und in ihre Webseite einzubinden. Die von Google bereitgestellte Bibliothek Charts basiert auf JavaScript und lässt sich mit überraschend wenigen Zeilen Programmcode integrieren:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
 
function drawChart() {
 var data = google.visualization.arrayToDataTable([
 ['Zeitstempel', 'Mittelwert der Momentanleistung (AC) in W (WR 1)'],
 ['02.07.2014 10:00:00', 1964],
 ...
 ]
);
 
var options = {
 title: 'Auswertung',
 legend: { position: 'bottom' }
};
 
var chart = new google.visualization.LineChart(document.getElementById('graph'));
 
chart.draw(data, options);
}
</script>

Nachfolgende Darstellung zeigt einen Graphen, der mit obigem Code zur Aufrufzeit des Scripts erzeugt wird. Um die weitere Informationen zu einem gewünschten Meßpunkt zu bekommen, klicken Sie auf den jeweiligen Punkt im Graphen. Danach erhalten sie die Details im einem kleinen Fenster.

Weitere Formen zur Darstellung - Linien, Tortengrafiken und Balken - lesen Sie in der Dokumentation nach oder spielen mit den Beispielen herum.

Mehrere Meßkurven als Graph