Grafiken dynamisch mit Ajax erstellen
Echtzeit-Statistik

DeveloperIT-ProjekteSoftware

Mit Javascript und Ajax können Sie Daten in Echtzeit vom Server beziehen und daraus dynamisch Grafiken erzeugen, etwa für Statistiken, Trends oder eine Serverüberwachung. Wie das funktioniert, erklärt dieser Workshop.

Flash, SVG und Canvas

Grafiken dynamisch mit Ajax erstellen

Wenn es um dynamische Grafiken im Webbereich geht, denken viele zuerst an Flash von Macromedia. Was als relativ einfaches Plug-in für Animationen gestartet ist, entwickelt sich immer mehr zu einer kompletten Plattform, die auch auf Daten vom Server zugreifen kann. Die Stärken liegen aber historisch bedingt im Grafikbereich. Die Entwicklung der Projekte im Ajax-Lager begann genau in der entgegengesetzten Richtung. Die technische Implementierung des Datenaustauschs zwischen Client und Server war das Ziel. Hier gibt es mittlerweile Bestrebungen, die die Implementierung von dynamischen Grafiken mit Javascript erlauben sollen. Beide Welten bewegen sich also aufeinander zu.

Drei populäre Möglichkeiten stehen im Moment zur Verfügung, wenn im Browser vektorbasierte und veränderbare Grafiken gezeichnet werden sollen. Neben dem bereits genannten proprietären Flash-Format sind dies das vom W3C propagierte SVG-Format und Canvas, eine Entwicklung, die beispielsweise in allen Gecko-basierten Browsern wie Firefox und Mozilla integriert ist. Alle drei Formate beinhalten spezifische Vor- und Nachteile und bieten vor allem sehr unterschiedliche Funktionen und Programmierschnittstellen, um von Javascript aus darauf zuzugreifen. Glücklicherweise gibt es mittlerweile einige Javascript-Bibliotheken, die versuchen, eine einheitliche Schnittstelle zu schaffen.


Charting

Grafiken dynamisch mit Ajax erstellen

Dynamische Grafiken unterscheiden sich von statischen dadurch, dass ihre Darstellung auf Grund von externen Daten und Aktionen bei jedem Anzeigen variieren kann. Charts wie Balken-, Torten- oder Verlaufsdiagramme sind gute Beispiele hierfür, da sie oft Daten wiedergeben, die sich ständig aktualisieren.

Die Bibliothek Plotkit liefert eine komplette Charting-Lösung. Plotkit steht unter einer Open-Source-Lizenz unter www.liquidx.net/plotkit zum Download zur bereit. Obwohl im Moment nur eine Version 0.9 verfügbar ist, können der Funktionsumfang und die Stabilität bereits überzeugen. Die drei verfügbaren Chart-Typen Balken, Linien und Kuchen können mit beliebigen Werten angezeigt werden, wobei die Achsenskalierung sowohl manuell als auch automatisch durch Plotkit erfolgen kann. Mit der Version 0.9 ist es möglich, die Charts entweder als SVG oder Canvas auszugeben.

Die populären Browser unterstützen diese Formate bisher unterschiedlich gut. SVG ist in vielen Browsern verfügbar. Firefox 1.5 und Opera 9 unterstützen SVG direkt, Safari und Internet Explorer benötigen dazu das SVG-Plug-in von Adobe, das leider nicht besonders weit verbreitet ist. Canvas wird neben allen Mozilla-basierenden Browsern auch von Opera und Safari direkt unterstützt. Für den Internet Explorer existiert ein Projekt, das Canvas emuliert. Mit Canvas ist somit eine Anzeige auf den meisten modernen Browsern möglich.


Chart mit Plotkit

Grafiken dynamisch mit Ajax erstellen

Die Plotkit-Bibliothek nutzt Mochikit als Basis, wobei eine Version 1.3 oder höher vorausgesetzt wird. Mochikit ist ebenfalls Open Source und kann unter www.mochikit.com heruntergeladen werden. Die Anwendung von Plotkit ist unkompliziert. Im Javascript-Bereich der Seite müssen zu Beginn die drei notwendigen Skriptdateien eingebunden werden. Dies geschieht durch folgende Zeilen:





Anschließend stehen die beiden Javascript-Klassen Layout und Renderer zur Verfügung, mit denen alle weiteren Operationen durchgeführt werden können. Instanzen der Klasse Layout kümmern sich um die Datenhaltung eines Charts. Der folgende Code-Schnipsel zeigt die notwendigen Schritte, um die Daten eines Liniendiagramms zu definieren:


var layout = new PlotKit.Layout();
layout.addDataset("CPU", [[0, 5], [1, 15], [2, 10.1], [3, 50.5], [4, 20], [5, 10.8]]);
layout.style = 'line';
layout.evaluate();

Die zu zeichnenden Daten werden dem Layout mit der Funktion addDataset übergeben und müssen als Array von Werte-Paaren vorliegen ([x,y]). Die Eigenschaft layout.style legt den Diagramm-Typ und damit das spätere Aussehen fest. Die aktuelle Plotkit-Version bietet hier die Chart-Typen line, bar und pie. Einer Layout-Instanz können mehrere Datensätze zugewiesen werden. Ein erneuter Aufruf der Funktion addDataset fügt dann jeweils ein weiteres Datenarray hinzu.

Die eigentliche Ausgabe des Charts erfolgt durch einen Renderer. Ob als Format der Ausgabe SVG oder Canvas verwendet wird, entscheidet sich durch die Instanzierung der Renderer-Klasse. Das folgende Listing zeigt die Ausgabe des bereits definierten Layouts im Canvas-Format:


cv = MochiKit.DOM.getElement("chartline");
plt = new PlotKit.SweetCanvasRenderer(cv, layout, {});
plt.render();

Soll das Chart stattdessen nach SVG gerendert werden, so muss einfach nur der SweetSvgRenderer verwendet werden. Die Variable cv definiert einen Bereich im HTML-Quellcode. Das Chart wird in diesem Bereich dargestellt.

Für eine Ausgabe in einen Canvas definieren Sie den Bereich wie folgt:




Optische Anpassungen

Grafiken dynamisch mit Ajax erstellen

Plotkit bietet eine Reihe von Möglichkeiten, das Aussehen der erzeugten Charts zu beeinflussen. Unter anderem kann so die Beschriftung und der Wertebereich der Achsen an eigene Bedürfnisse angepasst werden, wie im folgenden Codebeispiel zu sehen ist:


//y-Achsenbeschriftung
var yticks=[{label: "13:00", v: 0}, {label: "14:00", v: 1}];
//x-Achsenbeschriftung mit Grafiken
var xticks=[
{v:0,label:IMG({src:"img/a.png", width:16, height:16})},
{v:1,label:IMG({src:"img/b.png", width:16, height:16})}];
//Änderungen anwenden
layout.options={"yTicks":yticks,"xTicks":xticks, "xAxis":[0,10]};

Damit nicht genug, auch die Farben lassen sich ändern. Der einfachste Weg ist die Verwendung eines der sieben Farbschemata, die Plotkit bereits mitliefert. Standardmäßig wird das Farbschema blue verwendet, was aber mit wenigen Zeilen Javascript-Quellcode geändert werden kann.


//Grünes Farbschema
var plt=new PlotKit.SweetCanvasRenderer(canvas, layout, {"colorScheme": PlotKit.Base.palette (PlotKit.Base.baseColors()[2])});

Die Layout– und Renderer-Klassen bieten noch einige weitere Möglichkeiten. So lassen sich die Farben für jeden einzelnen Bereich des Charts getrennt einstellen oder auch die Schriftart der Achsenbeschriftungen ändern.


Daten vom Server

Grafiken dynamisch mit Ajax erstellen

Manch einer wird vielleicht am Sinn von auf Client-Seite erzeugten Grafiken zweifeln. Sie haben aber durchaus ihre Berechtigung und Einsatzmöglichkeiten. Stellen Sie sich beispielsweise eine Web-Anwendung vor, die zur Überwachung bestimmter Server-Parameter zuständig ist. Dies können technische Aspekte des Servers selbst sein, wie zum Beispiel Auslastungen von Prozessor, Speicher oder Festplatte. Aber auch die Überwachung von Maschinen oder Arbeitsabläufen ist denkbar. Die dabei anfallenden Daten werden in der Regel zyklisch erfasst und oft grafisch aufbereitet.

Für die Ajax-Zugriffe auf den Server können Sie das von Ihnen favorisierte Ajax-Framework verwenden. In den folgenden Beispielen kommt das Framework Ajason zum Einsatz (ajason.fanstastic-bits.de), sie können aber ebenso mit jedem anderen Framework nachvollzogen werden. Der erste Schritt besteht im Anlegen eines leeren Charts. Für das folgende Beispiel soll dies ein Linien-Chart sein, das die Auslastung des Prozessors auf einem Server anzeigen soll.

Die y-Achse wird daher auf einen Wertebereich von 0 bis 100 Prozent fixiert. Die x-Achse zeigt die letzte Minute an. Das alles ist mit den bereits vorgestellten Befehlen einfach implementiert. Hier kommt Ajax ins Spiel. Per Ajason werden die neuen Werte vom Server gelesen, was zyklisch passiert. Zwei Funktionen regeln den Serverzugriff auf der Client-Seite:


function updateChart() {
ajax_getCurrentCpuValue(cb_update);
}
function cb_update(result){
addCpuValue(result);
window.setTimeout('updateChart()',
2000);
}

Die Server-Methode getCurrentCpuValue wird hierdurch alle zwei Sekunden erneut aufgerufen. Diese Methode liefert ein Array mit dem aktuellsten Wert für die CPU-Auslastung des Servers.

Die Server-Funktion ist in diesem Beispiel eine einfache PHP-Methode, die neben der aktuellen Uhrzeit auch einen Zufallswert zwischen 1 und 100 liefert.

Damit die Ajax-Funktionen genutzt werden können, müssen auch hier einige Javascript-Bibliotheken eingebunden werden: