Im folgenden Beispiel soll ein Graph dargestellt und kontinuierlich aktualisiert werden, dessen Daten asynchron von einer Web-Ressource nachgeladen werden. Hierfür kommt die HTML5/Javascript Library RGraph (http://www.rgraph.net/) zum Einsatz, die im privaten Gebrauch umsonst verwendet werden darf. Es ist lediglich ein Verweis auf die Web-Seite von RGraph notwendig. Auf dieser kann die aktuelle Version der Library in Form eines ZIP-Archives bezogen werden. Aus dem Verzeichnis RGraph/libraries werden für dieses Beispiel die folgenden Javascript-Dateien benötigt:

• jquery.min.js
• RGraph.common.core.js
• RGraph.line.js

Diese werden in die HTML-Seite eingebunden:

<script type=“text/javascript“ src=“js/jquery.min.js“ />
<script type=“text/javascript“ src=“js/RGraph.common.core.js“ />
<script type=“text/javascript“ src=“js/RGraph.line.js“ />

Die Grafik wird im HTML5-Element Canvas integriert:

<canvas id=“myCanvas“ width=“600″ height=“250″>[No canvas support]</canvas>

Am Ende der HTML-Seite wird das nun folgende Javascript eingebunden. Zuerst werden die Graph-Daten mit null initialisiert:

d1=[];

for (var i=0; i<250; ++i) {
d1.push(null);
}

Anschließend wir die Funktion getGraph implementiert. Beim ersten Aufruf wird ein Line-Graph erstellt, spätere Aufrufe geben das bereits erzeugte Objekt zurück. Im Konstruktor wird die Id des Canvas und das Daten Array übergeben. Eine vollständige Liste aller möglichen Eigenschaften inklusive ihrer Default-Werte können in RGraph.line.js eingesehen werden:

function getGraph(id, d1)
{
if (!window.line) {
window.line = new RGraph.Line(id, d1);
window.line.Set(‚chart.xticks‘, 100);
window.line.Set(‚chart.title.xaxis‘, ‚Time >>>‘);
window.line.Set(‚chart.title.yaxis‘, ‚Number of Worker‘);
window.line.Set(‚chart.title.vpos‘, 0.5);
window.line.Set(‚chart.title‘, ‚Assigned Jobs‘);
window.line.Set(‚chart.title.yaxis.pos‘, 0.5);
window.line.Set(‚chart.title.xaxis.pos‘, 0.5);
window.line.Set(‚chart.colors‘, [‚red‘]);
window.line.Set(‚chart.linewidth‘,3);
window.line.Set(‚chart.yaxispos‘, ‚right‘);
window.line.Set(‚chart.ymax‘, 30);
window.line.Set(‚chart.xticks‘, 25);
}

return window.line;
}

Nun wird die drawGraph-Funktion erstellt, die einen asynchronen AJAX-Aufruf auf eine Web-Ressource durchführt. In diesem Beispiel liefert sie einen Number-Wert, der im Graph dargestellt werden soll. Auf das Ergebnis kann in der übergebenen Callback-Funktion zugegriffen werden:

function drawGraph() {
RGraph.AJAX(‚http://server_url‘, myCallback);
}

Die Callback-Funktion setzt zunächst das Canvas-Element zurück, um anschließend den Graphen aus der getGraph-Funktion neu zu zeichnen. Über this.responseText erhält man den Rückgabe-Wert der Web-Ressource, welcher zu einer Number konvertiert und anschließend im Daten-Array hinterlegt wird. Sofern das Daten-Array mehr als die maximale Anzahl von 250 Elementen besitzt, wird das erste Element entfernt, so dass die Größe des Graphen trotz fortlaufender Aktualisierung gleich bleibt. Anschließend wird das neue Daten-Array dem Graphen-Objekt zugewiesen und die drawGraph-Funktion mit einer Verzögerung von 100 ms erneut aufgerufen:

function myCallback() {
RGraph.Clear(document.getElementById(„myCanvas“));

var graph = getGraph(‚myCanvas‘, d1);
graph.Draw();
var data = this.responseText;
d1.push(Number(data));

if (d1.length > 250) {
d1 = RGraph.array_shift(d1);
}

if (document.all && RGraph.isIE8()) {
alert(‚[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts‘);
} else {
graph.original_data[0] = d1;
setTimeout(drawGraph, 100);
}
}

Zum Schluss muss die drawGraph-Funktion einmal Initial ausgeführt werden, um die Graphen-Darstellung zu starten:

drawGraph();

Das Resultat kann dann – abhängig von den Daten der Web-Ressource – wie folgt aussehen:

RGraph wird von allen gängigen Browsern in den jeweils aktuellen Versionen unterstützt. Auch der Internet Explorer akzeptiert ab Version 9 das HTML5-Tag Canvas.