AA_diagramm_sxc_1212912.jpg

© sxc.hu

Schnelle Diagramme

Grafiken mit der Google-Chart-API online erstellen

14.10.2009
,
Diagramme machen optisch mehr her als spröde Zahlenkolonnen. In der grafischen Aufbereitung erkennt das Auge zudem spontan Trends und Muster. Die Chart-API des Webgiganten Google erstellt sie mit wenig Aufwand.

Datenbestände wie Serverlast-Logs, Ausschussraten in der Produktion oder Besucherstatistiken einer Webseite sind in Diagrammdarstellung viel leichter zu entziffern als in der Textwüste eine Tabelle. Trends, die Reihenfolge der Ereignisse oder wiederkehrende Muster sind auf den ersten Blick erkennbar. Oft scheitert die Diagrammerzeugung am Aufwand: Die Software, die die Daten liefert, enthält keine Visualisierungsfunktion. Wer Diagramme unter Zeitdruck mit einer Tabellenkalkulation erstellt, scheitert oft an der Funktionsfülle und der wenig intuitiven Bedienung.

In einer solchen Situation hilft die Google-Chart-API [1] aus der Klemme. Der Webservice des Suchmaschinenriesen nimmt Daten und Einstellungen über die Seiten-URL entgegen, welche einem einfachen Schema folgt. Außer dem Browser ist also keine Software nötig. Der Einsatz eines sperrigen Protokolls wie SOAP bleibt dem Anwender ebenso erspart. Dass die URL sämtliche Daten transportiert, schränkt allerdings die Datenmenge ein, die Google Chart verarbeiten kann.

Schnellchart

Um mit Google Chart ein Diagramm zu erstellen, setzt man einfach eine passende URL zusammen, Die Adresse beginnt stets mit http://chart.apis.google.com/chart?, gefolgt vom Diagrammtyp (Tortendiagramm oder Linie), der Größe des Diagramms und den eigentlichen Daten. Am Ende der URL befinden sich Formatierungsangaben, wie Farben, Achsenbeschriftung oder Legende.

Die Parameter teilen Sie dem Google-Dienst über Schlüssel=Wert mit, wobei einige Schlüssel für sämtliche Diagramme gelten, andere wiederum typenspezifisch sind. Die Syntax des Wert-Eintrags ändert sich von Diagramm zu Diagramm.

Die Größe des Diagramms wird in Pixeln gemessen. Sie übergeben die Angaben über den Parameter chs=BxH, wobei B die Breite angibt, H die Höhe. Über den Parameter chs=200x100 wird das Diagramm somit 200 mal 100 Pixel groß. Die Maximalgröße liegt bei Karten bei 440 x 220 Bildpunkten, bei allen anderen Typen gibt es eine maximale Beschränkung von 1000 Pixeln in der Höhe oder Breite sowie ein Limit von maximal 300,000 Quadratpunkten.

Welche Diagrammart die Google-API zeichnen soll, legen Sie über cht=Typ fest. Als Typ nutzen Sie zum Beispiel lc für ein gewöhnliches Liniendiagramm, bvs für ein vertikal ausgerichtetes Balkendiagramm und bhs für ein Diagramm mit liegenden Balken. Ein gültiger Aufruf muss mindestens den Diagrammtyp und Daten enthalten. Den Typ legt der Parameter cht fest. Neben 2D- und 3D-Tortendiagrammen stehen unter anderem Balken-, Linien-, Radar- und Streudiagramme sowie Landkarten und QR-Barcodes, ein weit verbreitetes maschinenlesbare Format, zur Auswahl. Welche Typen Google Chart genau unterstützt, entnehmen Sie der Dokumentation auf der Projektseite [3]. Abbildung 1 und 2 zeigen einige Beispiele für Diagrammtypen, die Google Chart beherrscht.

Ein einfaches Tortendiagramm zeigt Abbildung 3, die passende URL findet sich in Listing 1. Zur besseren Lesbarkeit haben wir die Listings in diesem Artikel auf mehere Zeilen verteilt, im Browser müssen Sie sie ohne Leerzeichen und ohne Umbrüche eingeben.

Tortendiagramm

http://chart.apis.google.com/chart?
chs=500x200&
cht=p3&
chd=t:33,22.23,11.27,9.94,9.1,14.46&
chl=Deutschland|…|Dänemark|Restliche+Länder&
chtt=Marktanteile+im Europäischen+Schiffbau

Der Webdienst liefert es als PNG-Grafik, die sich auch leicht in eigene Webseiten einbinden lässt. Der Webserver muss dabei nicht einmal das Bitmap des Diagramms ausliefern, der Google-Dienst erzeugt es auf Wunsch bei jedem Seitenaufruf on Demand neu. Um das Diagramm in eine Webseite einzubetten, benutzen Sie einfach den img-Tag und stellen den Quelltag src auf die URL des Google-Diagramms. Für eine Beschreibung bietet sich das alt-Attribut an.

Datensätze

Die eigentlichen Daten transportiert der Parameter chd in der Form chd=Kodierung:Daten. Im einfachsten Fall überträgt die Text-Kodierung die Werte im Klartext als kommagetrennte Liste (chd=t:33,22.23,11.27,9.94,9.1,14.46). Leider lässt sich dieses Verfahren nicht immer benutzen, da es auf Werte zwischen Null und 100 beschränkt ist. Außerdem sprengt die URL schnell die maximale Länge von etwa 1000 Zeichen, die Browser, Proxies oder Firewalls und die Google-API verarbeiten können. Voraussetzung für umfangreichere Diagramme ist daher eine platzsparende Codierung der Daten.

Für die stärkste Komprimierung sorgt die Kodierung vom Typ s. Hier transportiert ein einzelner Buchstabe Werte zwischen Null und 61. A-Z stehen für 0 bis 25, a-z für 26 bis 52, 0-9 für 53 bis 61. Prozentwerte zwischen Null und Hundert oder noch größere Wertebereiche sind also entsprechend zu skalieren. Dafür ergibt der lediglich sechs Zeichenlange Datenstring chd=s:hWLKJO das gleiche Diagramm wie in Abbildung 1.

LinuxCommunity kaufen

Einzelne Ausgabe
 

Related content

Kommentare

Infos zur Publikation

Open Source Spezial erscheint zwei bis vier mal jährlich und kostet 7,90 EUR pro Ausgabe. Weitere Informationen zu Open Source Spezial finden Sie im Shop der Linux New Media AG.

Tipp der Woche

Schnell Multi-Boot-Medien mit MultiCD erstellen
Schnell Multi-Boot-Medien mit MultiCD erstellen
Tim Schürmann, 24.06.2014 12:40, 0 Kommentare

Wer mehrere nützliche Live-Systeme auf eine DVD brennen möchte, kommt mit den Startmedienerstellern der Distributionen nicht besonders weit: Diese ...

Aktuelle Fragen

Server antwortet mit falschem Namen
oin notna, 21.07.2014 19:13, 1 Antworten
Hallo liebe Community, Ich habe mit Apache einen Server aufgesetzt. Soweit, so gut. Im Heimnet...
o2 surfstick software für ubuntu?
daniel soltek, 15.07.2014 18:27, 1 Antworten
hallo zusammen, habe mir einen o2 surfstick huawei bestellt und gerade festgestellt, das der nic...
Öhm - wozu Benutzername, wenn man dann hier mit Klarnamen angezeigt wird?
Thomas Kallay, 03.07.2014 20:30, 1 Antworten
Hallo Team von Linux-Community, kleine Zwischenfrage: warum muß man beim Registrieren einen Us...
openSUSE 13.1 - Login-Problem wg. Fehler im Intel-Grafiktreiber?
Thomas Kallay, 03.07.2014 20:26, 8 Antworten
Hallo Linux-Community, habe hier ein sogenanntes Hybrid-Notebook laufen, mit einer Intel-HD460...
Fernwartung für Linux?
Alfred Böllmann, 20.06.2014 15:30, 7 Antworten
Hi liebe Linux-Freunde, bin beim klassischen Probleme googeln auf www.expertiger.de gestoßen, ei...