Google Charts

Google Charts sind Code-Scripte, die dir der böse Internet-Leviathan kostenlos zur Verfügung stellt, um die verschiedensten Infografiken zu visualisieren. 

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

Google Charts sind am Anfang etwas kompliziert - der Javascript-Code ist nicht jedermanns Sache. Dafür verlangt Google kein Geld und bietet die Grafiken ohne Branding an. Eigentlich ein ziemlich guter Deal.

"Hey, du kannst doch so Infografiken machen, oder?", sagte letzte Woche mein CvD zu mir. Ja, sagte ich, grundsätzlich schon. Was solls den sein? Und damit hatte ich den Salat. Denn bei Infografiken gibt es zwar einige Tools, aber wirklich überzeugt hatte mich bisher keins.  Nicht ohne Grund haben wir sie auf diesem Blog ein wenig vernachlässig. Virtual Reality und Scrollytellings sind schlicht cooler. Infografiken sind soooo old school, langweilig, easy. Das Problem: So easy sind sie dann doch nicht, wenn sie kein Geld kosten und kein Branding haben sollen. 

Fakten & Daten

Preis
Sprache
Lernzeit
Arbeitszeit
Ausspielart
Tutorial
Support

|
|
|
|
|
|
|

kostenlos
englisch
1 Stunde
45 Minuten
Code
Youtube
FAQ


zum Tool

Auf meiner Suche nach dem perfekten Tool bin ich dann zwar nicht fündig geworden. Mit Google Charts habe ich dann aber doch ein Programm gefunden, das zwar etwas komplizierter ist, aber dafür nichts kostet, völlig individualisierbar ist und kein Logo eines Herstellers beinhaltet. Google Charts bietet eine ganze Reihe unterschiedlichster Visualisierungen und wird derzeit auch weiterentwickelt. 

Das Programm von Google nutzt JavaScript und ein wenig HTML. Für alle, die bei Codes reflexartig vom Bildschirm zurückzucken, wird es dieses Mal also schwer. Solltest du hingegen zwar nicht programmieren können, aber ein wenig Lust, Logik und Lernbereitschaft mitbringen, wirst du das Tool meistern. 

 

Anschauungsbeispiel

How to Code I

Google Charts bietet dir eine große Auswahl an unterschiedlichen Infografiken an. Vom simplen Pie Chart über Compo-Charts hin zu Baumkarten (Was das ist? Das!). Wenn du deine Daten zur Hand hast, musst du dir also als erstes ausdenken, wie du diese visualisieren willst. Hast du dich entschieden, suche dir aus der Google-Galerie das richtige Tool heraus.  In der linken Spalte gibt es eine Liste mit allen möglichen Formen. Theoretisch ist es möglich, diese sogar zu kombinieren – doch dafür solltest du ein wenig JavaScript können. 

Hast du dich dich entschieden, klicke auf "Code it yourself on JSFiddle". JSFiddle ist ein freies Tool, das Programmierer benutzen, um gleich im Browser webfähige Codes auszuprobieren. Es teilt sich in vier Bildschirmbereiche für drei Programmiersprachen ein. Links oben steht HTML, links unten JavaScript, rechts unten wird dir bei einem Klick auf den "Run"-Button das Ergebnis deiner Codes ausgespruckt. Das Feld oben rechts ist für CSS. Das kannst du heute ignorieren. 

Google kopiert dir dankenswerterweise alle Code bereits in die richtigen Felder. Klickst du nun auf Run, sollte dir der Editor unten rechts die Dummy-Infografken anzeigen. Schaue dir im unteren linken Feld (JavaScript) den Code an. Meist setzen sich die Google Charts Code aus folgenden vier Bereichen zusammen: 1. Laden der JavaScript-Bibliothek (google.charts.load). 2. Die Funktion, die die Daten berechnet (function drawChart & var data). 3. Befehle, die das Design der Infografik veränder (var options). 4. Und dem Befehl, wo die Infografik erscheinen soll (var chart). 

How to Code II

Du wirst erkennen, dass die Zahlen, die in deiner Info-Chart benutzt werden, im Abschnitt 2 eingetragen sind. Hier kannst du nun deine Daten eintragen. Beachte aber die Syntax von JavaScript. Alle Datenreihen stehen in eckigen Klammern und sind durch Kommas abgetrennt. Hinter jeder eckigen Klammer steht ebenfalls ein Komma - außer bei der letzten!

JavaScript ist für Anfänger eine ziemlich beschissene Sprache, weil der kleinste Fehler (zum Beispiel ein fehlendes Komma) dazu führt, dass nichts mehr funktioniert. Gehe also Schritt für Schritt vor und klicke immer wieder auf "Run", um zu schauen, ob dein Code noch funktioniert. Ansonsten: Strg + Z! Ich habe dir in der Bildergalerie ein paar kommentierte Screenshots für das obige Pie Chart hochgeladen. Daran kannst du dich orientieren. 

Wenn dir danach ist, kannst du nun auch an den Optionen im Abschnitt 3 herumspielen. Aber sei gewarnt: Das ist kompliziert. Checke immer die Zwischenschritte über "Run"! Viel wichtiger ist Abschnitt 4. JavaScript ist wie eine im Ozean treibende Braunalge. Es braucht einen Felsen, an den es sich krallen und in den es Wurzeln schlagen kann. In unserem Fall heißt die Wurzel HTML (das war die linke, obige Box bei JSFiddle). Wo immer der Code dieser Box erscheint, werden die Befehle aus deiner Java-Scriptbox ausgeführt. Ohne HTML wird selbst bei perfektem JavaScript nichts passieren. Gar nichts. 

How to Embed I

Wenn du alle Daten eingetragen und den JavaScript-Code nicht geschrottest hast – Glückwunsch! –, musst du den Code nun noch in deine Webseite einfügen.

Tricks für Pros
Wenn du zwei Charts in verschiedenen Formen auf einer Seite laden willst, kannst du den JavaScript-Code beider Infografiken nicht einfach hinter einander einfügen. Lösche den Bereich 1 der Zweiten und füge im Bereich 1 der Ersten bei dem Befehl google.charts.load das Wort hinzu, das bei der zweiten hinter "packages" stand. Beachte die Syntax von " ' " und " , "!

Die Entwickler von Google schreiben, der JavaScript-Code müsse in den "Head" der Webseite eingefügt werden, was so etwas wie die Metabeschreibung einer Webseite für Browser ist. Das ist in normalen Content Managment Systemen gar nicht so leicht, aber – glücklicherweise – unnötig. Falls du in WordPress schreibst, wechsele in die "Text"-Ansicht. Bei anderen CMS musst du vielleicht HTML-Boxen einfügen. Kopiere dann einfach den Code aus dem obigen, linken Feld (HTML) an die Stelle wo deine Infografik später erscheinen soll. Das kann am Anfang oder auch am Ende eines Artikels sein. Kein Problem.

Dann scrolle an das Ende deines Artikels und füge den JavaScript-Code aus der unteren, linken Box ein. Damit der Browser diese Schriftzeichen später nicht als Text anzeigt, sondern als JavaScript ausließt, musst du den Script-Befehl setzen (s. Bildergalerie). Dann bist du fertig. 

Pro

Auch wenn wir das bisher nicht thematisiert haben: Google Charts punktet durch komplette Individualisierung. Unter dem Befehl "var option" kannst du alle möglichen Anpassunge machen. Auf der Google-Charts-Seite der Entwickler findest du viele (aber nicht alle) Befehle, die möglich sind. Ebenfalls toll ist, dass Google Charts kostenlos und ohne Branding kommt. Auch das Layout ist – typisch Google – minimalistisch im Material-Design

Kontra

Wenn du bis hierher gekommen bist, wird es dir schon aufgefallen sein: Du musst ein wenig codieren. und JavaScript ist nicht die einfachste Sprache. Apropo JavaScript; es gibt Nutzer, die diese Sprache komplett in ihren Browsern deaktiviert haben, um sich vor Viren zu schützen. Diese User sehen dann  nur eine weiße Fläche statt deiner Grafik. Ebenfalls nicht so toll: Zwei Infografiken auf einer Seite sind nicht ganz so leicht zu kombinieren (s. Pro-Tipps). 

Fazit & Alternativen

Google Charts ist ein Tool für Fortgeschrittene. Wenn du Lust auf Coding hast, ist es ziemlich gut. Wenn nicht, solltest du besser zu Datawrapper greifen, welches aber nicht mehr kostenlos ist. 

coole Beispiele

Eeine Möglichkeit für interaktive Infografiken ist Silk, bei dem jedoch Brandings erscheinen. Für simple Grafiken kommst sonst noch Charted in Frage und eine große Sammlung diverser Infografiken bietet amCharts