jqPlot
Installation
JavaScript-Files
Das neueste jQuery (jQuery - Homepage) und jqPlot (jqPlot - Homepage) herunterladen. Ich habe der Übersichtlichkeit wegen alle jqPlot-Dateien in ein eigenes Verzeichnis ausgepackt.
jpPlot benötigt jquery als Grundlage. Deshalb muss es vor jqPlot eingebunden werden. In der Datei erichweigand.js werden dann die Javascript-Programmierungen vorgenommen, um die Graphen zu erstellen. Deshalb wird diese als letzte eingebunden.
<script type='text/javascript' src='/js/jquery.min.js'></script> <script src="js/jqplot/jquery.jqplot.min.js"></script> <script type='text/javascript' src='/js/erichweigand.js'></script>
CSS-Files
Dann muss noch die CSS von jpPlot eingebunden werden und schon ist jqPlot fertig eingerichtet.
<link rel="stylesheet" type="text/css" href="js/jqplot/jquery.jqplot.css" />
DIV-Element
An der Stelle im HTML-Dokument, an der später der Graph erscheinen soll, muss ein leeres DIV-Element stehen.
<div id="myChart" style="width: 600px"></div>
JavaScript-Code
Mit dieser Vorarbeit kann mit diesem JavaScript-Code bereits ein Graph erstellt werden.
$(function () {
$.jqplot('myChart', [[1,9,4,3,8,5]]);
});
Das Ergebnis sieht so aus:
Die HTML-Datei als ganzes ist hier zu finden.
Programmierung
Daten-Formate
Die Daten werden wie oben gesehen als zweites Argument übergeben. Der Typ des Arguments ist eine Liste. Jedes Element dieser Liste wird als eigener Graph dargestellt. D.h. jedes Element dieser Liste ist wieder eine Liste von Datenpunkten für diesen Graphen. Hierfür gibt es mehrere Möglichkeiten.
- Eine Liste von Werten. Diese werden als y-Werte interpretiert. Die zugehörigen x-Werte werden hochgezählt. Der erste Wert erhält den x-Wert 1. (s. Beispiel oben)
- Eine Liste von Werte-Paaren. Die Werte werden als zusammengehörige x- und y-Werte eines Koordinaten-Punktes interpretiert. Beispiel [[1,2],[2,4],[4,3]].
- Das zweite Argument zu jpPlot kann auch ein String sein. Dieser wird dann als URL interpretiert, von dem die Daten geholt werden. Diese URL wird einer Render-Funktion übergeben. Mehr darüber im Kapitel Data-Renderer.
Data-Renderer
Daten müssen häufig von externen Datenquellen geholt werden und sind selten im korrekten Format, um als Graph dargestellt zu werden. Das holen und aufbereiten der Daten erledigen sogenannte Data-Renderer. Dies sind JavaScript-Funktionen, die von jqPlot die URL der Datenquelle (url), das jqPlot-Objekt (plot) und das Options-Objekt (options) übergeben bekommen. Die Rückgabe der Funktion muss aus Daten bestehen, die einem der obigen Formate entspricht.
var rendererFunction = function (url, plot, options) {
data = [];
return data;
}
Die Funktion muss in den Optionen von jqPlot übergeben werden. Das zweite Argument von jqPlot ist die URL der Datenquelle.
var plot = $.jqPlot('myChartDiv','/data/source.json',{
dataRenderer: rendererFunction
});
Konfigurationen
Der Graph kann beim Erstellen konfiguriert werden. Dafür wird ein dritter Parameter übergeben. Dies ist ein assoziatives Array mit vielen Möglichkeiten der Konfiguration. Im Beispiel wird der Titel des Graphen gesetzt.
$.jqplot('myChart', [[1,9,4,3,8,5]], {title: 'My Chart'});
Der genaue Aufbau des Optionen-Objekts wird auf der Seite Optionen erklärt.
Datum auf der X-Achse
Häufig wird bei Graphen auf der x-Achse das Datum dargestellt. Damit dies in jqPlot funktioniert muss der dateAxisRenderer nach jqPlot eingefügt werden.
<script src="js/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
Ist dieses Renderer installiert kann nun der x-Wert der Liste durch ein Datum ersetzt werden. Damit dies funktioniert muss noch über die Konfigurations-Variable mitgeteilt werden, dass für das Erstellen der X-Achse nun der dateAxisRenderer zuständig ist. Dies sieht dann so aus.
$.jqplot(
'myChart',
[[['2018-01-05', 2], ['2018-01-10', 4], ['2018-01-25', 3]]],
{
axes: {
xaxis: {renderer: $.jqplot.DateAxisRenderer}
}
}
);