[DE] Online Flash Charts mit AmCharts

Dem ein oder anderen Webentwickler ist sicher schon aufgefallen, dass in der heutigen Zeit nicht nur Funktionsumfang, sondern auch Präsentationsstil einer Webanwendung einiges zu deren Popularität beitragen. Eine dieser Präsentationsmöglichkeiten sind z.B. aufwändige Linien-, Balken- und Kreisdiagramme um große Mengen an Daten übersichtlicher darzustellen bzw. auch mit deren Effekten und Funktionen User anzulocken.

Nun gibt es dafür mehrere gute wie auch schlechte Möglichkeiten, beginnend mit der schlechtesten:

1. Die Verzweifelte: Man nutzt die GD Library von PHP und hat die größte Mühe, jede einzelne Linie richtig zu zeichnen, zu skalieren und im Anschluss noch eine Legende hineinzuzeichnen. Hover- und 3D-Effekte oder hübsche und informative Mausklickeffekte werden hier mit Sicherheit nie das Licht der Welt erblicken, denn man ist froh überhaupt eine Grafik erstellen zu können. Auch kann man nicht per “Befehl” die Chartart (also von Kreis- auf Liniendiagramm) ändern, sondern muss jeden Chart extra anpassen/programmieren.
2. Die Tüchtige: Statt GD Library beginnt man sein eigenes “Framework” zu entwerfen und nutzt z.B. hilfreiche Technologien wie Flash von Adobe. Das sieht dann zwar schöner aus (wenn man’s kann), allerdings gibt es mit Sicherheit noch mehr Arbeit als nur ein Bild mit der GD Library zu erstellen. Auch beginnt man mit dieser Arbeit nur, wenn die Deadline zur Arbeitsabgabe noch meilenweit entfernt ist.
3. Die Gemütliche: Bevor man sich überhaupt mit dem Gedanken auseinandersetzt, sein eigenes Framework zu entwerfen, versucht man mit diversen Suchmaschinen (hier sei den Anfängern Google empfohlen) bereits existierende Chartbibliotheken zu finden. Wer seine Suchmaschine benutzen kann, findet dann solche Perlen wie amCharts oder Fusion Charts. Und über Erstgenannte möchte ich nun in weiterer Folge berichten.

Es war noch nicht all zu lange her, da wollten meine Vorgesetzten eine hübsche Statistikerweiterung für ein bestehendes Projekt. Wie es mit den ganzen Zahlen und Daten nunmal so ist, sehen Sie in Linien, Farben und Grafiken verpackt doch besser und übersichtlicher aus, wie als schnöder Text. Also flugs den Fuchs gestartet und los ging die Suche. Nach nicht einmal einer Stunde hatte ich bereits mehrere Verzeichnisse mit allen möglichen Bibliotheken und Sourcecodes, um bis an mein Lebensende Charts zu generieren. Nachdem ich mehrere davon getestet und die einen für eine spätere Gelegenheit vermerkt (und die anderen wieder gelöscht) hatte, stolperte ich über amCharts.

Die, die diese Bibliothek (und deren Seite) kennen, werden mich verstehen, wenn ich sage, dass mich bereits die Startseite leicht in ihren Bann gezogen hatte. Wer dann auch noch detailliertere Live-Demonstrationen der Bibliothek gesehen hat, weiß warum ich davon nicht mehr losgekommen bin. Hier einmal ein paar Fakten zu dem Framework:

• Chartauswahl: Das Framework besteht aus 5 Grundpaketen (Column & Bar, Line & Area, Pie & Donut, Scatter & Bubble, Radar & Polar), die wiederum weitere paketspezifische Charts erlauben (z.B. Columns [also Säulen] nebeneinander, aufeinander, aufeinander zu 100%). Daraus ergeben sich schon eine ganze Menge an Basisdarstellungsformen (ca. über 20).
• Einstellungsmöglichkeiten: Zu jedem Chart gibt es eigene Settingseinstellungen. Mit diesen kann man z.B. Beim Columnchart über 17 wichtige Bereiche des Charts manipulieren (wieviele einzelne Settings enthalten sind, will ich gar nicht nachzählen). Außerdem gibt es immer eine Standardkonfiguration, die bereits relativ gute Farben und Styles wählt. Mit ein bis zwei weiteren Einstellungen wird ein Chart so schnell zum Hingucker.
• Dokumentation: Die Webseite bietet bei den Live-Demonstrationen die gewählten Settings zum Betrachten an und es gibt eine sehr umfangreiche Dokumentation mit Referenzen für die Einstellungen. Mit den Beispielen auf der Seite und der Dokumentation können so bereits sehr schnell erste Erfolge erzielt werden.
• Bereitstellung: Daten und Settings können in einem XML-File (oder auch als Textdatei) bereitgestellt werden, was das ganze sehr komfortabel für Programmierer macht (schließlich lässt sich mit dem richtigen Header einiges regeln :)).
• Sonstiges: Schlussendlich gibt es noch viele weitere Möglichkeiten sowohl designtechnisch als auch programmtechnisch für die Verwendung von amCharts. Man kann zwischen 2D und 3D Effekten wechseln, in Charts zoomen, scrollen, mithilfe der Legende Graphen und Linien deaktivieren, etc… für die Kreativen unter uns sicher genug Möglichkeiten um jeden Spleen auszuleben.

Um die genannten Punkte einmal kurz zu untermauern, erstellen wir einmal einen statischen Chart:

HTML-Template: Einbinden des SWF-Objektes

Zuerst erstellen wir einen HTML-Container (sprich eine normales, leeres HTML-File mit Head und Body-Tags) .  Im Body-Bereich des Files binden wir nun das Javascriptfile des Charts ein, welches die grundlegenden Funktionen steuert (siehe Zeile 2). Danach erstellen wir ein DIV-Element als Container, in dem der Chart ausgegeben wird (siehe Zeile 5 bis 8).  Schlussendlich binden wir das SWF-Objekt ein, welches den Chart zeichnet und die Konfigurations- und Datenquellen lädt (Zeile 10 bis 23). Wichtig hierbei ist, dass das ID-Attribut des DIV-Elements (auf Zeile 5) gleich lautet, wie der Text der beim Objektbefehl write (auf Zeile 21) mitgegeben wird!

Sollte ein Konfigurationsfehler mit dem Chart auftreten (z.B. aufgrund von Programmfehlern in den externen Files), erscheint ein Chartfenster mit einer Fehlermeldung. Sollte der (zweite) SCRIPT-Teil falsch sein, dann erscheint der Inhalt innerhalb des DIV-Elements (aus mir unbekannten Gründen muss ein Inhalt definiert sein und sei es nur ein Buchstabe), welcher in diesem Falle natürlich für die Ausgabe einer Fehlermeldung genutzt werden kann (z.B. die Ausgabe, dass eine falsche Flash-Player Version installiert ist).

Charteinstellungen & Daten

Kommen wir nun zu den Charteinstellungen und Daten. Grundsätzlich sollte man alle Einstellungen strukturiert in ein XML-File einschreiben. Die drei grundlegenden Einstellungen sind hierbei folgende:

1. PIE-Bereich: Dieser gestaltet den Kreis des Diagramms. Dabei können Position und Dimensionen des Kreises selbst festgelegt werden und auch ein 3D-Effekt und/oder ein innerer Radius (für einen Donut-Chart) sind möglich.
2. LABELS-Bereich: Hier können (theoretisch) unbegrenzt Textfelder (samt Position, Größe, etc.) im Chart ausgegeben werden, für den Anfang genügt jedoch sicher der Titel des Charts.
3. DATA-Bereich: Hier werden die Daten übermittelt, mit denen schlussendlich der Chart selbst gezeichnet wird.

Sollten bis jetzt alle Schritte richtig durchgeführt worden sein, so sollte der Chart nun folgendermaßen aussehen:

Kreisdiagramm

Dem Aufmerksamen wird nun auffallen, dass der Chart bereits  (automatisch konfiguriert) Farben, eine Legende und Mausklickevents besitzt, bestimmte Features welche standardmäßig aktiviert sind. Es ist natürlich möglich diese auch zu deaktivieren bzw. zu manipulieren. Bei einer ausführlicheren Settingsdatei könnte der Chart dann so aussehen:

Kreisdiagramm (mit ausführlicherer Settingsdatei)

Fazit: Wer sich einmal mit amCharts auseinander gesetzt hat, kommt so schnell nicht wieder davon los. Dank den vielen (vorprogrammierten) Beispielen auf der Herstellerseite und der relativ guten Dokumentation/Referenz ist man sehr schnell in der Lage, gut designte, interaktive und dynamische Charts zu programmieren. Da Einstellungen eigentlich sehr leicht zu tätigen sind, können sich auch Anfänger ohne Gefahr an diese Chartbibliothek heranwagen und gute Ergebnisse erzielen. Auch dynamisches Erzeugen der Einstellungsdatei funktioniert z.B. mit PHP ohne Probleme (wenn man den XML-Header mitsendet ;)). Ich persönlich kann diese Chartbibliothek nur weiterempfehlen. Weitere Infos gibts hier.