Google Chart API – Diagramme ganz leicht
04.11.2008 von André Bräkling
Gerade eben bin ich bei Pierre auf die Google Chart API aufmerksam geworden. Dabei handelt es sich um eine Schnittstelle, die es ermöglicht Diagramme verschiedenster Art in die eigene Webseite einzubinden. Besonders Webmaster, die keine zusätzlichen Bibliotheken wie JpGraph oder Open Flash Chart verwenden können (z.B. wenn man ein gehostetes Blog betreibt), haben so die Möglichkeit Diagramme darzustellen, ohne diese ständig in einem externen Programm gestalten zu müssen.
Die Verwendung der Google Chart API ist denkbar einfach – man muss lediglich einen Image-Tag in die Seite einbauen, der auf die Chart API verweist und zusätzliche Parameter übergibt, die genau definieren, welche Daten auf welche Weise in welcher Form dargestellt werden sollen. Zur Verfügung stehen Torten-, Linien- und Balkendiagramme, Scatter Plots, Odometer, eine Welt- bzw. Kontinent-Karte, QR Codes und noch mehr. Wer da keine geeignete Möglichkeit findet, seine Daten angemessen aufzubereiten, der muss sich schon etwas wirklich extravagantes wünschen. Doch jetzt wollen wir mal sehen, wie die Sache im Detail funktioniert… zumindest an einigen kleinen Beispielen. Eine ausführliche Dokumentation findet sich auf der Webseite zur API.
Wie bereits erwähnt benötigen wir lediglich einen Image-Tag. Dieser sollte in der Grundstruktur ungefährt so aussehen:
<img src="http://chart.apis.google.com/chart? Parameter1=Wert &Parameter2=Wert &Parameter3=Wert &..." alt="Mein Diagramm" />
Die einzelnen Parameter sind natürlich das Entscheidende, wobei sie mit einem & voneinander getrennt werden. Als Pflichtangabe dienen drei Parameter:
- Typ des Diagramms: cht=Typkürzel – also z.B. cht=lc für einen Linechart (Liniendiagramm) [Alle Typen]
- Daten: Ohne Daten ist der Graph natürlich wertlos. Hier gibt es verschiedene Darstellungsmöglichkeiten, der Parameter lautet “chd=”. Soll unser Liniendiagramm zwei Graphen enthalten, könnte es so aussehen: chd=t:10.0,11.6,8.0|28.0,39.0,26.0 – die Pipe | trennt dabei zwei Datensätze. [Details]
- Größe des Diagramms in Pixeln: chs=BreitexHöhe – also z.B. chs=300×200 für 300 Pixel breit und 200 Pixel hoch.
Nehmen wir einfach mal die oben genannten Beispielwerte und konstruieren ein Diagramm:
<img src="http://chart.apis.google.com/chart? cht=lc &chd=t:10.0,11.6,8.0|28.0,39.0,26.0 &chs=300x200" alt="Beispiel 1" />
So sieht das Ergebnis aus:
Schöner wäre es natürlich, wenn man beide Graphen auch unterscheiden könnte. Also verwenden wir den optionalen Parameter “chco”, um Farben zu definieren. Dazu geben wir die hexadezimalen Farbcodes an und trennen diese durch ein Komma:
&chco=FF0000,0000FF
Nun ist es übersichtlicher:
Jetzt ist es an der Zeit das ganze zu beschriften. Der Parameter “chtt” definiert den Titel und “chdl” die Legende zu unserem statistischen Meisterwerk. Wichtig: Hier muss auf eine URL-geeignete Codierung geachtet werden, Leerzeichen werden z.B. durch ein + ersetzt. Per “chxt” können wir außerdem angeben, welche Achsen beschriftet werden sollen. In unserem Fall genügt die Angabe von x und y. Über t (top) und r (right) können auch zusätzliche Achsen eingeblendet werden.
chs=300x200 &... &chtt=Erste+Statistik &chdl=Linie+1|Linie+2 &chxt=x,y
Schauen wir nach:
Irgendwie ist das Liniendiagramm doch nicht so toll. Ändern wir den cht-Parameter mal auf bvs für ein vertikales Balkendiagramm:
Natürlich kann man nicht jeden Graphtype einfach so einsetzen – teilweise unterscheiden sich die optionalen Parameter ein wenig, wodurch ein paar so nicht gewollte Effekte auftreten können. Das Prinzip bleibt aber grundsätzlich gleich. Auf der Webseite zur API ist alles ausführlich beschrieben.
Rein demonstrativ möchte ich aber noch zwei ganz besondere Grafiken zeigen, die die API ebenfalls ermöglicht. Zunächst zeige ich auf einer Europakarte das Ursprungsland dieses Blogs:
Auch hier ist die Sache eigentlich ganz einfach:
<img src="http://chart.apis.google.com/chart? cht=t &chs=440x220 &chco=ffffff,ff0000,ff0000 &chld=DE &chd=s:0 &chtm=europe &chf=bg,s,EAF7FE" style="border:none;" />
Abschließend gibt es noch einen QR Code:
<img src="http://chart.apis.google.com/chart? chs=150x150 &cht=qr &chl=http://www.braekling.de &choe=UTF-8" style="border:none;" />
Viel Spaß beim Experimentieren!
Weitere Artikel zum Thema:
Dir hat dieser Beitrag gefallen?