Grafiken dynamisch mit Ajax erstellenEchtzeit-Statistik
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:
<?php
include ("common_values.php");
$objAjax = createAjaxObject();
$objClient = $objAjax->getClient();
echo $objClient->getJavaScript();
?>
Alte Daten überschreiben
Grafiken dynamisch mit Ajax erstellen
Nun folgt der eigentlich interessante Teil: die Funktion addCpuValue. Diese Funktion fügt die aktuell ermittelten Werte zu den bereits ausgegebenen hinzu und zeichnet das Diagramm neu. Alle Einträge, die älter sind als eine Minute, werden wieder aus dem Datensatz entfernt. Um die bisher gezeichneten Werte des Charts zu überschreiben, reicht es aus, den Befehl addDataset erneut aufzurufen.
Dabei ist nur darauf zu achten, dass derselbe Name für das Dataset wieder verwendet wird. Anschließend wird das Chart mit den Befehlen clear() und render() neu gezeichnet. Fertig! Das folgende Listing zeigt das gerade besprochene Vorgehen:
function addCpuValue(res) {
//ältere Werte entfernen
if (data.length>=30)data.shift();
for (i=0;i<data.length;i++) {
data[i][0] = i*2;
}
//neuer Wert anhängen
data.push([data.length*2, res[1]]);
//neu zeichnen des Charts
layout.addDataset("cpu", data);
layout.evaluate();
plotter.clear();
plotter.render();
}
Alternativen und Ergänzungen
Grafiken dynamisch mit Ajax erstellen
Nehmen Sie sich die Zeit und betrachten Sie das Beispiel im Browser länger als eine Minute. Sie werden sehen, dass alte Werte einfach links aus dem Chart fallen und die neuen Werte am rechten Rand eingefügt werden. Die Chart-Werte wandern von rechts nach links. Damit ist die Grundlage für ein einfaches Serverüberwachungs-Tool in Echtzeit geschaffen. Wer möchte, findet das Beispiel mit zwei unterschiedlichen Charts auf der Heft-CD dieser Ausgabe und kann es nach Belieben erweitern.
Natürlich gibt es neben Plotkit auch noch andere Möglichkeiten, Charts mit Ajax und Javascript zu realisieren. Das Dojo-Toolkit (www.dojo-toolkit.org) liefert ebenfalls ein Chart-Widget. Dieses Control arbeitet ausschließlich mit Inline-SVG als Ausgabeformat und ist damit auf Firefox als Browser angewiesen, liefert im Gegenzug aber deutlich mehr Chart-Funktionen. Wer den Fokus auf Flash setzt, der kann zu den großen Lösungen Adobe Flex und Open Laszlo greifen, die beide auch Charts ermöglichen. Wer nur Charts in Flash benötigt, der muss derzeit entweder zu kommerziellen Lösungen greifen oder selbst Hand anlegen. Das Flash/Javascript Integration Kit (osflash.org/flashjs) ermöglicht ein reibungsloses Zusammenspiel zwischen Flash und Javascript. Diese Bibliothek wird auch von Google Finance genutzt, um Aktiencharts auszugeben, die per Ajax aktualisiert werden.
Neben Charts lassen sich mit Canvas, SVG oder Flash noch andere sinnvolle Anwendungen realisieren, wofür Ajax hervorragend geeignet ist, um die Grafiken mit dynamischen Inhalten zu versorgen. Vorstellbar sind hier selbst komplexe Systeme, wie die Prozess- und Zustandsvisualisierung von Anlagen, Spiele oder Simulationen. Eine kurze Einführung ist unter redsquirrel.com/dave/work/ajaxtrains verfügbar.
Fazit
Grafiken dynamisch mit Ajax erstellen
War es bis vor ein paar Jahren noch die reinste Qual, mit Javascript-Mitteln sich ändernde Grafiken zu programmieren, ist dies heute mit Hilfe von ausgereiften Bibliotheken wie Plotkit eine Kleinigkeit. Die gezeigten Beispiele finden Sie auch in kompletter Form auf der Heft-CD dieser Ausgabe. Die Bestrebungen der bekannten Projekte in diesem Bereich gehen hin zur Verschmelzung der drei populären Zeichenmöglichkeiten SVG, Canvas und Flash in eine Bibliothek. Diese kümmert sich um die Auswahl der geeigneten Ausgabemöglichkeit im vom User verwendeten Browser, abhängig von dessen verfügbaren Ausgabeoptionen.
Alle Dateien und Listings zum Workshop finden Sie auch unter listings.internet-pro.de.