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.

Ähnliche Artikel

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

Ubuntu 14.10 und VirtualBox
Ubuntu 14.10 und VirtualBox
Tim Schürmann, 08.11.2014 18:45, 0 Kommentare

Wer Ubuntu 14.10 in einer virtuellen Maschine unter VirtualBox startet, der landet unter Umständen in einem Fenster mit Grafikmüll. Zu einem korrekt ...

Aktuelle Fragen

PCLinuxOS Version 2014.08 "FullMonty" Umstellung auf deutsch
Karl-Heinz Welz, 19.12.2014 09:55, 3 Antworten
Hallo, liebe Community, ich bin 63 Jahre alt und möchte jetzt nach Jahrzehnten Windows zu Linux...
ICEauthority
Thomas Mann, 17.12.2014 14:49, 2 Antworten
Fehlermeldung beim Start von Linux Mint: Could not update ICEauthority file / home/user/.ICEauth...
Linux einrichten
Sigrid Bölke, 10.12.2014 10:46, 5 Antworten
Hallo, liebe Community, bin hier ganz neu,also entschuldigt,wenn ich hier falsch bin. Mein Prob...
Externe USB-Festplatte mit Ext4 formatiert, USB-Stick wird nicht mehr eingebunden
Wimpy *, 02.12.2014 16:31, 0 Antworten
Hallo, ich habe die externe USB-FP, die nur für Daten-Backup benutzt wird, mit dem YaST-Partition...
Steuern mit Linux
Siegfried Markner, 01.12.2014 11:56, 2 Antworten
Welches Linux eignet sich am besten für Steuerungen.