Infografiken tauchen mittlerweile ständig in journalistischen Texten auf. Mit Programmen wie Silk oder Datawrapper lassen sich bereits simple Charts basteln. Soll es ein wenig mehr sein, bietet sich die Infografik-Bilbiothek amCharts an. amCharts ist kein installierbares Programm oder eine Webanwendung. 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. Doch Vorsicht: amCharts richtet sich eher an Fortgeschrittene. Anfänger werden über einige technische Hürden springen müssen. Dafür beinhaltet amChars eine riesige Sammlung von Grafiken.
Auf der Download-Seite von amCharts stehen drei verschiedene Arten von Infografiken bereit: Charts, Stock Charts und Maps - also Infografiken, Kurs-fokussierte Charts und Karten. Für WordPress-Blogger ist zusätzlich die Installation über ein WordPress-Plugin möglich. Für den nicht-kommerziellen Gebrauch ist das Programm kostenlos - ein kleiner, in die Grafik eingebauter Link reicht dem Anbieter aus. Für Journalisten, die das Programm auf einer kommerziellen Seite nutzen wollen, wird ein einmaliger Beitrag fällig.
Nach einem Download erscheint eine ZIP-Datei auf dem Desktop. Darin enthalten sind mehrere Ordner mit Bildern, Beispielcharts, Mustern und vielem Anderen. Was fehlt, ist die gewohnte EXE-Datei, die aber auch nicht benötigt wird. Die Beispiel-Infografiken im Ordner "Samples" sind das eigentliche Herzstück. Öffnet man eine dieser HTML-Dateien mit einem Browser (Rechtsklick > Öffnen mit > Firefox/Chrome/Safari/Opera), wird eine vorgebaute Infografik im Browser geladen, die sozusagen das Gerüst der noch zu bauenden Chart ist. Als Anschauungsbeispiel habe ich eine der Beispiel-Infografiken bereits mit Zahlen gefüllt: hier die die offiziellen Asylanträge seit 1953.
Um diese vorgebauten Beispiel-Charts zu verändern, wird ein Text-Editor benötigt - ich empfehle NotePad++, mit dem ich sehr gute Erfahrungen gemacht habe. Nach der Installation des Editors können die Beispiel-Charts damit geöffnet werden. Es erscheinen daraufhin viele Zeilen Codes auf dem Bildschirm: auf den ersten Blick abschreckend, auf den zweiten jedoch halb so kompliziert.
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 interessante Part. Dieser sieht bei fast allen Charts gleich aus. Nach dem JavaScript-Befehl "var barChartData" stehen die einzelnen Datensätze. Hier kann beherzt zugreifen und die Dummie-Daten verändert werden. Für das obige Anschauungsbeispiel sehen die einzutragenen Jahreszahlen und Asylanträge so aus:
Je nach Chart unterscheiden sich die einzutragenden Daten. Häufiges Zwischenspeichern und Ausprobieren der Infografiken empfehlen sich, weil schnell ein falsch gesetztes Komma den Code für den Browser unleserlich macht. Bei NotePad++ kann der Code nach dem Speichern direkt über die Schaltfläche "Ausführen" im Browser getestet werden.
Unter den Datensätzen folgen weitere Codezeilen, die nun für jede Chart individuell sind. Wer hier herumspielt, sollte vorher immer abspeichern, um Änderungen rückgängig machen zu können. Denn hier wird in grundlegende Merkmale der Chart eingegriffen. Hintergrundbild, Linienfarbe oder die Skalierung der Achsen müssen hier eingestellt werden. Das ist zugegeben ein wenig friemelig. Aber mit ein wenig Logik und Herumprobieren ist auch das Problem in zehn Minuten beseitigt.
Neben einer Unzahl von Infografiken können - wie eingangs erwähnt - auch Karten gebastelt werden. Der Weg dazu ist der gleiche. Nicht fehlen dürfen natürlich geografische Längen- und Breitenangaben, sollen auf der Karte Punkte oder Bubbles erscheinen. Hier ein Beispiel über die Verteilung der Weltbevölkerung nach Ländern.
Ist die HTML-Datei mit den eigenen Daten gefüttert und fertig, muss sie in dem ursprünglich heruntergeladenen "Sample"-Ordner abspeichern und dann der gesamte (!) Überordner "amChart" auf einen Server geladen werden. Nur so werden auch die CSS- und JavaScript-Dateien mitgeladen, die der Browser braucht, um die Datensätze dazustellen. Für eine WordPress-Seite empfiehlt sich hier das Programm Filezilla, mit dem leicht Daten auf den eigenen Server geschoben werden können.
Journalisten einer größeren Redaktion sollen für das Hosten die IT-Abteilung kontaktieren. Es ist aber auch möglich, den Ordner bei einem externen Cloud-Anbieter wie Drive, OneDrive oder Dropbox zu hosten. Am Ende fehlt nur noch die URL der Infografik. Über einen iFrame-Befehl kann diese dann in die eigene Webseite eingebunden werden.
Wer sich an die fordernde Optik eines HTML-Codes gewöhnt und bereit ist, Daten direkt einzugeben, wird seine Freude mit amCharts haben (hier gibt es noch ein paar Beispiele: 3D-Diagramm, handgemalte Infografik, animierte Karte). Das Programm ist sehr flexibel, ästhetisch ansprechend und gut codiert. Doch angesichts dieser Anfangshürde bleibt amCharts eher etwas für Fortgeschrittene oder wagemutige, frustresistente Anfänger.
Twittern: amCharts - interaktive Infografiken zum selber Basteln
