Zingchart

Zingchart ist eine Bibliothek mit über Hundert Infografiken, die sich detailliert an die eigenen Wünsche anpassen lassen. Änderungen müssen jedoch in Javascript vorgenommen werden. 

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

Zingchart ist ansprauchsvoll – wie die meisten fortgeschrittenen Infografik-Programme. Da es keinen Editor gibt und Änderungen im Code vorgenommen werden müssen, wird mancher Nutzer abgeschreckt sein. Mir jedoch gefällt der übersichtliche Code und das gute Design. Zingchart bietet zudem eine Fülle ungewöhnlicher Darstellungen.

Seitdem im Weißen Haus Donald Trump residiert, erscheint der deutsche Handelsüberschuss wieder ganz oben im Nachrichtenfeed. Schädlich für die USA und die Eurozone sei er, ein Handelskrieg drohe. Bei der Suche nach dem dieswöchigen Programm, habe ich deswegen nach einem Tool gefahndet, das das Handelsungleichgewicht visualsieren könnte. 

Fakten & Daten

Preis

Sprache
Lernzeit
Arbeitszeit
Ausspielart
Tutorial
Support

|

|
|
|
|
|
|

Basic: kostenlos
Pro: ab 199 US-$
englisch
15 Minuten
1 Stunde
HTML, CSS, Javascript
Guide-Docs
Help & Support


zum Tool

Gefunden habe ich Zingchart – eine Bibliothek von Templates für Infografiken, die auch sogenannte "Chord Charts" anbietet. Das sind kreisrunde Grafiken, die wechselseitige Beziehungen ausdrücken können. Im unten stehenden Beispiel habe ich Deutschland und seine neun wichtigsten Handelspartner genommen und ihre Im- und Exporte (in Mrd. US-Dollar/2015/Weltbank) dargestellt.

Fährst du mit der Maus über Deutschland (rot), siehst du, dass nur ein Balken blau gefärbt ist. Er besagt, dass Deutschland einzig aus den Niederlanden mehr im- als exportiert. Bei allen anderen Ländern ist das Saldo für Deutschland positiv. Zumindest den nackten Zahlen nach ist der Vorwurf bei acht von neun Ländern also gerechtfertigt. 

Viel wichtiger ist aber nun: Wie habe ich das hingekriegt – und wie kannst auch du etwas Ähnliches nachbauen? 

Anschauungsbeispiel

Coding ... oh nein!

Zingchart bietet dir eine Fülle von ganz unterschiedlichen Visualisierungen an. Ein Blick in die Galerie lohnt sich wirklich. Leider arbeitet Zingchart aber ähnlich wie Google Charts, das ich bereits vorgestellt habe. In der kostenlosen Variante stellt dir das Tool keinen Editor zur Verfügung, in dem du deine Daten nur eintragen musst. Nachdem du dich für eine Visualisierungsart entschieden hast, öffnet sich nach einem Klick auf den Button "Edit" vielmehr Codepen. Das ist ein öffentliches, browserbasiertes Codier-Werkzeug, das vor allem von Frontend-Designern genutzt wird. 

Dort finden sich drei Felder: "HTML", "CSS" und "JS". Wichtig für dich ist heute nur das Feld "JS", das für Javascript steht. Da sich der Code für jede Infografik unterscheidet, ist es schwer, dir eine simple Beschreibung der Arbeitsschritte an die Hand zu geben. Deswegen mache ich es exemplarisch für den Fall unserer Chord Charts. 

Dort findest du unter "JS" diverse vertikale Zahlenreihen, zudem jeweils am Ende den Befehl "text": und dann stets einen Begriff in Anführungszeichen. Wie du dir sicher denken kannst, sind eben das die Datenreihen, die du verändern und beschriften musst. Experimentiere ein wenig mit den Zahlen und Namen herum, um herauszufinden, was welche Auswirkungen hat. Die Infografik wird sich bei jeder Änderung im Code updaten. Auch wenn du nicht codieren kannst, ist es recht einfach. 

Cheating the Code

Hast du alle deine Daten und Namen korrekt eingegeben, lass den Codepen-Tab einmal in Ruhe und öffne noch einmal Zingchart und die entsprechende Beispiel-Chart. Bei unserem Handelsbilanz-Beispiel war es diese Seite. Klicke nun auf "Download" und Zingchart wird dir eine HTML-Datei herunterladen. Öffne die Datei einmal mit einem Browser (Rechtsklick → Öffnen mit). Nun wirst du die Chart (mit den alten Dummy-Daten) in deinem Browser sehen.

Tricks für Pros
Die Entwickler haben einen kleinen, aber doch wichtigen Befehl in ihrem Code vergessen. Häufig erscheinen rechts und unter deiner Infografik hässliche Scroll-Balken, wenn du sie via iFrame in deine Webseite einbettest. Um das zu verhindern, füge "overflow: hidden;" in das CSS ein. So wie hier zu sehen.

Um deine neuen Daten einzufügen, musst du also nur in dieser heruntergeladenen Datei den entsprechenden Absatz ändern. Öffne die Datei dazu mit einem Text-Editor. (Ich empfehle dir dafür Notepad++, auf Macs läuft sonst auch TextMate.) Recht weit oben findest du den Begriff "script" eingerahmt in Pfeilen. Lösche alles, was danach kommt bis du zu dem Begriff "/script" gelangst. Die Pfeile um die beiden Begriffe bleiben natürlich bestehen. Nun wechsle zurück in deinen Codepen-Tab und kopiere alles aus dem "JS"-Feld. Füge es an der Stelle ein, wo du gerade alles gelöscht hast. 

Speichere im Text-Editor und rufe die Datei wieder über deinen Browser (Rechtsklick → Öffnen mit) auf. Jetzt sollten die neuen Daten vorhanden sein. Nun musst du die Datei nur noch auf deinen Server laden. Wenn du mit WordPress arbeitest, reicht es, wenn du die Datei ähnlich wie ein Bild hochlädst. Um die Infografik in deine Webseite einzubetten, kannst du dann einen simplen iFrame-Code benutzen. 

Pro

Zingchart ist übersichtlich codiert, sodass auch Amateure mit dem Code zurechtkommen können. Die Entwickler bieten das Tool kostenlos an. Da kann man nicht meckern. Auch das Wasserzeichen ist klein und dezent. Willst du es entfernen kostet das einmalig 200 US-Dollar, eine monatliche Bindung entfällt. Zudem sagt mir das Layout zu. Besser als Google Charts Bonbon-Stil ist es allemal. 

Kontra

Zingcharts größtes Manko ist der fehlende Editor in der kostenlosen Variante. Nicht jeder wird gerne im Quellcode herumfrickeln. Auch für erfahrene Programmierer ist der Weg über Codepen und den nachfolgenden Down- und Upload zeitraubend. Auch wenn einmalig 200 US-Dollar vergleichbar wenig sind – eine stattliche Summe ist es trotzdem, die sich nicht für jeden lohnt. 

Fazit & Alternativen

Mir gefällt Zingchart sehr gut. Wo ich bisher Google Charts eingesetzt habe, wird nun der Newcomer das Feld übernehmen. 

coole Beispiele

Falls du noch nicht überzeugt bist, könnte Statpedia was für dich sein. Ein Tool, das auch Anfänger leicht bedienen können, und das trotzdem großartige Ergebnisse produziert. Mit amCharts haben wir zudem noch eine weitere Infografik-Bibliothek vorgestellt, in der du vielleicht etwas finden könntest. Charted eignet sich hingegen nur, wenn es ganz schnell gehen soll und du nur Linien- oder Balkendiagramme brauchst. Raw widerum ist der Spezialist für ausgefallene Visualisierungen.