Ajaxschmiede.de

Flot ist eine Javascript-Bibliothek zum Erstellen von ansprechenden Diagrammen auf einfache Weise. Das dänische Web-Studio Iola entwickelte flot als Plugin für das Ajax-Framework jQuery. Aktuell ist flot in der Version 0.3 verfügbar und wird auf einer Projektseite bei Google Code publiziert.Ich habe ein paar Beispiele erstellt, anhand derer ich die Funktionsweise und die Möglichkeiten von flot aufzeigen will.

Im html-Header müssen zuerst die Javascript-Dateien eingebunden werden. Das wäre zum einen die jQuery- und zum anderen die Flot-Bibliothek. Da Flot die erst mit HTML5 und bisher nur von Firefox unterstützte Canvas-Zeichenoberfläche verwendet, muss zusätzlich die Bibliothek angehangen werden, die Canvas für den Internet Explorer verfügbar macht.

<!--&#91;if IE&#93;><script type="text/javascript" src="excanvas.pack.js"></script><!&#91;endif&#93;-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

Anschließend kann man beginnen die Diagramme zu positionieren. Dies geschieht über das div-Element, in dem auch gleich die Ausmaße des Plots angegeben werden. Wichtig ist hierbei das id-Element zum eineindeutigen identifizieren des div.

<div id="dia1" style="width: 500px; height: 200px"></div>

Der „Zaubertrick“ zum einfachen Erstellen von Diagrammen geschieht in einer Javascript-Funktion. Zu aller erst legt man einen oder mehrere Datensätze fest (das können festgelegte Werte sein oder Datenpaare, die man mittels einer Schleife sich erzeugen lässt, sein). Im Anschluss ruft man über die plot-Methode des $-Operator die Funktion zum Erstellen des Diagramms auf und gibt dabei alle benötigen Variablen. Hier ein Beispielaufruf:

$(function () {
	var d1 = [[0, 6], [1, 2], [4, 5], [7, 8], [9, 10]];

	$.plot($("#dia2"), [
	{
		color: "rgb(0, 0, 255)",
		data: d1,
		bars: { show: true }
	}
	]);
});

Wie bereits beschrieben, legt man zuerst den Datensatz fest – im Beispiel d1. Ein Datensatz besteht aus einem Array mit beliebig vielen Elementen, wobei jedes Element ein zweidimensionales Array ist. Das erste Datenpaar lautet [0,6], d.h. für x = 0 ist y = 6.

Der Aufruf der $.plot-Methode erwartet bis zu 3 Parameter. Der erste Parameter enthält die id des div, in das der Plot geschrieben werden soll. Mit zweiten Parameter werden der Funktion sowohl die Daten als auch die Art der Darstellung übergeben. Dies geschieht ebenfalls in einem Array. Würde man also 2 Kurven in ein Diagrammm zeichen wollen, würde ein solcher Aufruf etwa die Form $.plot($(„#dia2“), [{data: d1, lines: { show: true }}, {data: d2, lines: { show: true }} ]); haben. Der dritte Parameter ist optional, also keine Pflicht. Über diesen ist es möglich, das Diagramm an die eigenen Bedürfnisse genauer anzupassen.

Folgende Möglichkeiten zur Darstellungen der Daten (2. Parameterteil) sind verfügbar:

• color – legt Farbe des Graphen fest
• data – die zu übergebenden Daten
• label – Bezeichnung / Titel des Graphen (z.B. in der Legende)
• lines – Darstellung der Daten als Linie
• bars – Darstellung der Daten als Balken
• points – Darstellung der Daten als Punkte
• shadowSize – Größe des vom Graphen erzeugten Schattens

Zum Formatieren der Legende wurden folgende Optionen implementiert (Auszug):

• show – erwartet true oder false, je nachdem ob die Legende zu sehen sein soll oder nicht
• noColumns – Anzahl der Legendenspalten
• position – erwartet als Parameter „ne“, „nw“, „se“ oder „sw“ um festzulegen in welcher Ecke die Legende stehen soll
• margin – Abstand der Legende vom Diagrammrand
• backgroundColor – definiert die Hintergrundfarbe
• backgroundOpacity: setzt den Transparenzwert (zwischen 0.0 und 1.0)

Es existieren noch unzählige weitere Möglichkeiten zum individuellen Anpassen des Diagramms wie zum Beispiel das Fixieren der Achsenausmaße oder das Festlegen eines Rastes. Wer mehr dazu erfahren will, sollte die Dokumentation lesen.

Verglichen mit der Google Chart API bietet Flot zwar weniger Diagrammarten, läuft dafür aber lokal statt stets über Google. Des weiteren finde ich die Chart API weitaus kryptischer und damit bei komplexeren Diagrammen schwerer handhabbar. Für welchen Art man sich letztlich entscheidet, steht jedem frei.