amChart

amChart ist eine Datenvisualisierungs-Bibliothek mit der du interaktive Infografiken bauen kannst. Von verstaubten Börsenkurs-Diagrammen bis zu verspielt-designten Bierkonsum-Grafiken ist alles möglich.

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

amChart ist ein anspruchsvolles Programm. Daten werden direkt in den HTML-Code geschrieben – das macht es für Anfänger unübersichtlich und kompliziert. Für Fortgeschrittene ist es jedoch eine Schatzkiste von gut programmierten und reaktiven Charts.

Diese Woche legen wir die Messlatte ein wenig höher und beschäftigen uns mit einem anspruchsvollen Programm, das dir dafür interaktive Grafiken verspricht, die sich wirklich sehen lassen können.

Fakten & Daten

Preis

Sprache
Lernzeit
Arbeitszeit
Ausspielart
Support

|

|
|
|
|
|

nicht-kommerziell: kostenlos
kommerziell: ab 140 US-$
englisch
1-2 Stunden
1 Stunde
HTML-Datei (zum selber hosten)
Homepage


zum Tool

amChart heißt das Programm – oder besser die Bibliothek von bereits vorgebauten Charts. Denn um ein installierbares Programm handelt es sich eigentlich nicht. Vielmehr kann man sich auf der Webseite des Anbieters eine Unmenge an HTML-Dummies herunterladen. Diese können dann mit einem Editor geöffnet und nach eigenen Wünschen umgestaltet werden. Da es sich um eine riesige Sammlung handelt, sind die Möglichenkeiten schier unbegrenzt, was man mit amCharts alles visualisieren kann.

Bei unserem dieswöchigen Beispiel handelt es sich um die offiziellen Asylanträge seit 1953 – veröffentlicht vom Bundesamt für Migration und Flüchtlinge.

Anschauungsbeispiel

Der Editor

amChart besteht aus drei verschiedenen Sammelungen: Charts, Stock Charts und Maps – also Infografiken, Kurs-fokussierte Charts und Karten. Alle können hier heruntergeladen werden oder als Plugin für WordPress installiert werden. Hast du das gemacht, erscheint eine ZIP-Datei auf deinem Desktop. Darin enthalten sind mehrere Ordner mit Bildern, Beispielcharts, Mustern und vielem Anderen. Was fehlt, ist die gewohnte EXE-Datei. Doch die brauchst du auch nicht. Die Beispiel-Infografiken im Ordner "Samples" sind das eigentliche Herzstück.

Öffne eine der HTML-Datei mit einem Browser (Rechtsklick > Öffnen mit > Firefox/Chrome/Safari). Dann wird dir eine vorgebaute Infografik im Browser geladen, die sozusagen das Gerüst deiner noch zu bauenden Chart ist. Um diese zu verändern, brauchst du einen Editor – ich empfehle dir NotePad++, mit dem ich sehr gute Erfahrungen gemacht habe. Hast du den Editor installiert, öffne eine der Beispiel-Charts damit. Nun erscheinen viele Zeilen Codes auf deinem Bildschirm.

Willkommen in der Welt der Codes

Das ist abschreckend – aber halb so kompliziert wie es im ersten Moment erscheint. Der Code ist stets sehr sauber aufgeschrieben und übersichtlich strukturiert. Nach dem ersten Abschnitt, in dem Meta-Informationen und Verlinkungen mit Style-Sheet und JavaScript geschrieben sind, kommt der für dich interessante Part. Dieser sieht bei fast allen Charts gleich aus. Nach dem JavaScript-Befehl "var barChartData" stehen die einzelnen Datensätze. Hier kannst du beherzt zugreifen und die Dummie-Daten verändern. 

Je nach Chart unterscheiden sich die einzutragenden Daten. Häufiges Zwischenspeichern und Ausprobieren der Infografiken empfehlen sich, weil schnell mal ein falsch gesetzes Komma den Code für den Browser unleserlich macht. Bei NotePad++ kannst du den Code nach dem Speichern direkt über die Schaltfläche "Ausführen" im Browser anschauen.

Unter den Datensätzen folgen weitere Codezeilen, die nun für jede Chart individuell sind. Wenn du daran herumspielst, solltest du immer vorher abspeichern, um deine Änderungen rückgäng machen zu können. Denn hier greifst du in grundlegende Merkmale der Chart ein. So ist die Beispiel-Grafik oben ein Abkömmling des "Samples" "lineStepNoRisers", das jedoch keinen roten, senkrechten Strich und ein anderes Hintergrundbild vorsieht. Auch die Skalierung der Achsen musst du hier vornehmen. Das ist zugegeben ein wenig friemelig. Aber mit ein wenig Logik und Herumprobieren ist auch das Problem in zehn Minuten beseitigt.

Hosten & Kosten

Ist deine HTML-Datei fertig, musst du die Datei in dem ursprünglich heruntergeladenen "Sample"-Ordner abspeichern und dann den gesamten (!) Überordner "amChart" auf deinen Serer laden. Nur so lädst du auch die CSS- und JavaScript-Dateien mit, die der Browser braucht, um deine Datensätze dazustellen. Wenn du mit WordPress bloggst, empfiehlt sich hier Filezilla. Es ist aber auch möglich den Ordner in eine Cloud (Drive, OneDrive, Dropbox, ...) zu laden und dann den Ordner freizugeben.

(Anmerkung 05.11.2015: David Hilzendegen hat uns dabei auf ein Problem aufmerksam gemacht – und gleich auch die Lösung präsentiert. Damit die Datei später korrekt geladen wird, muss die Verlinkung im HTML-Sheet – wie unten beschrieben – angepasst werden.)

Tricks für Pros
Bei unseren Fingerübungen ist uns aufgefallen, dass amChart zuweilen nicht funktioniert, wenn zu viele Datensätze eingelesen werden und die Skalierung der Achse nicht angepasst wurde. Erscheint bei dir also ein weißer Bildschirm anstatt der Chart, ist vielleicht nur die Achse nicht ordentlich eingestellt. Deine Daten können dabei absolut in Ordnung sein. Bis man das aber herausfindet, vergeht schon mal eine Weile.

Egal wie du dies löst: Am Ende muss deine HTML-Chart-Datei im Netz frei zugänglich sein. Dann kannst du sie über einen iframe-Code in deine Webseite einbetten. Den Code für unsere Beispielchart habe ich dir in die Bildergalerie geschrieben. So kannst du ein wenig spicken.

amChart ist kostenlos – zumindest wenn du es nicht kommerziell einsetzt und einen kleinen, unscheinbaren Link auf das Programm in der Infografik setzt. Das ist wirklich großartig und großzügig – wird jedoch für manche Journalisten nicht genug sein. Je nach Gebrauch kostet amChart in der Pro-Variante einmalig ab 140 US-$ aufwärts. Hier dann aber auch ohne Firmen-Branding.

Dass wir bisher noch kein Wort über amChart Maps verloren haben, hat seinen Grund. Das werden wir in zwei Wochen vorstellen. Wenn dir also das Programm bisher gefallen hat, schau mal wieder vorbei – zumal amChart Maps über einen simpleren Editor genutzt werden kann.

Pro

Hat man sich erst einmal an das Code-Schreiben gewöhnt, geht das Einlesen der Datensätze schnell von der Hand. Auch wenn andere Programme Excel-Tabellen auslesen können und versprechen Zeit zu sparen, zeigt die Erfahrung doch anderes. So groß ist amCharts Minuspunkt also nicht. Hinzu kommt, dass das Programm sauber geschrieben wurde und übersichtlich strukturiert ist. Auch das Endergebnis hat uns überzeugt. Wer ein wenig Liebe in seine Charts steckt, kann hier Interessantes zu Schönem machen.

Kontra

Nun, amChart ist etwas für Fortgeschrittene. Wem es vor Code-Zeilen graust, wird hier nicht weit kommen. Im Vergleich zu anderen Datenvisualiserungsprogrammen ist amChart also mega kompliziert und unhandlich. Auch, dass die HTML-Dateien am Ende selbst gehostet werden müssen, dürfte manchem weniger Technikbegeistertem aufstoßen. Ebenfalls ein Minuspunkt ist die Zuhilfenahme von JavaScript, das bekanntlich ein Einfallstor für Viren und Betrüger ist und deswegen von manchen Usern geblockt wird.

Bleiwüsten abonnieren:

Fazit & Alternativen

Wir lieben es. Zuerst waren wir ein wenig erschrocken über die schöde, schnodderige Art, wie man von uns erwartete in das HTML-Sheet zu schreiben. Doch nach ein bisschen Gebastel waren wir überzeugt: amChart ist toll!

coole Beispiele

Alternativen zu amChart gibt es sicher viele. Daten-Visualisierungsprogramme, das wir bisher schon vorgestellt haben, sind Datawrapper und Silk. Beide sind leichter zu bedienen. Beide sind solide Programme. Beide bieten nicht annähernd was amCharts kann.