Diagramme machen naturgemäß optisch mehr her als spröde Zahlenkolonnen. In der grafischen Aufbereitung erkennt das Auge außerdem leicht Muster und Tendenzen. Das Chart-API des Webgiganten Google visualisiert Daten mit wenig Aufwand.

Serverlast-Logs, Ausschussraten in der Produktion oder Besucherstatistiken einer Webseite sind als Diagramm viel leichter lesbar als in Tabellenform. Oft scheitert das Erzeugen eines Diagramms aber am Aufwand. Hier hilft Googles Chart-API [1] aus der Klemme. Der Webdienst des Suchmaschinenriesen nimmt Daten und Einstellungen über die Aufruf-URL entgegen und liefert eine PNG-Grafik zurück. 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. Der Aufruf

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%C3%A4nemark|Restliche+Länder&chtt=Marktanteile+im Europäischen+Schiffbau

erzeugt das Diagramm aus Abbildung 1. Als PNG lässt es sich leicht in eigene Webseiten einbinden. Der Webserver muss dabei nicht einmal das Bitmap mit dem Diagramm ausliefern, der Google-Dienst generiert es auf Wunsch bei jedem Seitenaufruf on Demand. Der Webdesigner gibt dafür lediglich eine Adresse mit den kodierten Daten als Bild-URL an.

Abbildung 1: Googles Chart-Webdienst eignet sich besonders für Diagramme im Internet. Wer sie aktualisieren möchte, braucht nur die in die aufrufende URL eingebetteten Daten anzupassen.

Angefragt

Anfragen an das Chart-API beginnen mit der URL »http://chart.apis.google.com/chart«. Nach einem Fragezeichen folgen, durch »&« voneinander getrennt, die Parameter in der Form »Schlüsselwort=Wert«. Sie enthalten Informationen über den Diagrammtyp, die eigentlichen Daten sowie Größe, Beschriftung und Farben des Diagramms. Ein gültiger Aufruf muss mindestens den Typ und die zu visualisierenden 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 weitverbreitetes maschinenlesbares Format, zur Auswahl. Die Abbildungen 2 und 3 zeigen Beispiele für Google-Chart-Diagramme.

Abbildung 2: Balken- und Liniendiagramme mit wenigen Datensätzen gelingen mit Google Chart schneller als mit einer Tabellenkalkulation.

Abbildung 3: Außer Balken- und Liniendarstellung kennt Google Chart auch einige exotischere, aber dennoch nützliche Diagrammtypen.

Datensätze

Die eigentlichen Daten transportiert der Parameter »chd« in der Form »chd =Kodierung:Daten«. Im einfachsten Fall überträgt die Textkodierung »t« die Werte im Klartext als kommaseparierte Liste (»chd=t:33,22.23,11.27,9.94,9.1,14.46«). Leider lässt sich dieses Verfahren nicht immer nutzen, da es auf Werte zwischen 0 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 das Google-API verarbeiten können. Voraussetzung für umfangreichere Charts ist daher eine Kodierung der Daten.

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

Sprunghaft

Für Liniendiagramme ist die Kodierung eines Wertes mit einem einzigen Buchstaben jedoch schlecht geeignet: Bei lediglich 62 zur Verfügung stehenden Werten kommt es leicht zu unerwünschten Sprüngen im Graphenverlauf. Deshalb bietet das Google-Chart-API eine Kodierung, die 4096 Werte über Zeichenpaare aus Buchstaben, Ziffern sowie dem Bindestrich und dem Punkt darstellt. Für die Werte 0 bis 63 stehen »AA« bis »A.«, für 64 bis 127 »BA« bis »B.«, »-.« und »..« ergeben 4094 und 4095. Um die zwei Nachkommastellen in den Marktanteilen aus Abbildung 1 darzustellen, ist es am einfachsten, die Daten mit 100 zu multiplizieren. Nach der Kodierung ergibt sich der Datenstring »chd=e:ohzkivRnPiOOWm« mit 13 Zeichen.

Die Daten per Hand zu kodieren ist umständlich. Aber es ist auch nicht nötig: Das übernimmt ein Javascript-Skript von knapp 15 Zeilen Länge [2], das direkt im Browser laufen kann. Auf dessen Basis lassen sich schnell HTML-Formulare für Google-Chart-Anfragen schreiben. [3] listet zudem Bibliotheken für Java, PHP, Python, Perl und weitere Sprachen auf, die Daten konvertieren oder gleich die ganze URL erzeugen.

Balken- oder Liniendiagramme visualisieren mehrere Datensätze gleichzeitig. Unabhängig von der Konvertierung trennt diese ein Pipe-Symbol im Datenstring. Soll ein Wert in einem Datensatz leer bleiben, steht an seiner Stelle ein Unterstrich. Der Parameter »chs« (Chart Size) gibt die Breite und Höhe des Diagramms an. Breite und Höhe dürfen nicht über 1000 Pixel liegen, ihr Produkt darf außerdem 300000 nicht überschreiten.

Kartographie

Neben den üblichen Torten- und Balkendiagrammen bietet das Google-Chart-API eine Kartendarstellung, die auf Wunsch einzelne Länder einfärbt. Aus einer Weltkarte wählt der Anwender dabei verschiedene Regionen wie Europa, Afrika oder den mittleren Osten aus. Der Aufruf

http://chart.apis.google.com/chart?cht=t&chs=440x220&chtm=europe&chld=DEFRGB&chd=s:Ah9&chco=e0e0e0,FAFAD2,7FFF00

liefert eine Europakarte, die Deutschland, Frankreich und England farblich hervorhebt. »chtml=europe« wählt Europa, die zu färbenden Länder erscheinen als Länderkürzel [4] im »chld«-Parameter. Entsprechend der Reihenfolge dort weist der »chd«-Parameter ihnen einen numerischen Wert zu. Seine Größe bildet Google Chart mit den in »chco« definierten Farben ab. Die erste Komponente bestimmt die Farbe der nicht zum Einfärben ausgewählten Länder. Die zweite und dritte definieren einen Farbverlauf, den Google Chart nutzt, um die Werte darzustellen. Damit eignet sich Google Chart besonders für thematische Karten, die Daten wie Bevölkerungsdichte oder mittleres Einkommen farblich wiedergeben.

Maschinenlesbar

Vereinfachen es Diagramme dem menschlichen Auge, Zahlenwerten zu erfassen, so sind QR-Barcodes dafür gedacht, das maschinelle Einlesen von Daten zu erleichtern. Die Pixelgrafiken transportieren bis zu 4000 Buchstaben. Sie sind dazu geeignet, um Bauteile oder Schriftstücke über einen Aufkleber oder Ausdruck mit einer computerlesbaren Seriennummer oder einer Kurzbeschreibung zu versehen (Abbildung 4). Bereits ein Fotohandy mit entsprechender Software kann diese entziffern. In Japan kommen QR-Barcodes in Zeitschriften und auf Plakaten bereits häufig zum Einsatz.

Abbildung 4: Barcodes, die Google Chart neben Diagrammen erzeugt, kodieren auf geringem Raum bis zu 4000 Zeichen maschinenlesbar.

Der Aufruf »http://chart.apis.google.com/chart?cht=qr&chl=Hallo+Linux+Magazin&choe=UTF-8&chs=150×150« erzeugt den Barcode aus Abbildung 4. Der Parameter »choe« wählt UTF-8 als Zeichenkodierung, »chs« legt die Größe des Barcode fest. Den eigentlichen Text “Hallo Linux Magazin” enthält der Parameter »chl«. Sonder- und Leerzeichen sowie in URLs reservierte Zeichen wie »?« und »&« sind dabei wie in URLs üblich mit Prozentzeichen und nachfolgendem Hexadezimalwert des Zeichencode zu verschlüsseln (RFC 3986 [5], Tabelle 1). Bei Leerzeichen funktioniert neben der Prozent-Verschlüsselung »%20« auch das Pluszeichen.

Schriftstücke

Erst Überschrift, Legende und Achsenbeschriftung machen ein Diagramm verständlich. Im Google-Chart-API sorgt der Parameter »chl« für die erläuternden Texte. Wie bei den Barcodes muss der Anwender die Textbausteine in URL-konformer Umschrift übergeben. Dabei lassen sich auch nicht auf der Tatstatur verfügbare griechische Buchstaben übertragen, wie sie für die Achsenbeschriftung mathematischer Funktionen erforderlich sind. Eine übersichtliche Unicode-Zeichentabelle bietet [6].

Funktionen zur URL-Kodierung gibt es in PHP, Perl, Python, Java und vielen anderen Programmiersprachen. Der Java-Ausdruck »java.net.URLEncoder.encode(Character.toString((char) 951), “UTF-8”)« liefert beispielsweise für das Unicode-Zeichen 951 den String »%CE%B7«, der in Beschriftungen als η auftaucht. Bei einigen exotischen Zeichen muss Google aber passen.

Die Achsenbeschriftung ist bei Google Chart auch noch aus einem anderen Grund wichtig: Die zu visualisierenden Zahlenwerte dürfen nicht negativ sein. Bei geeigneter Skalierung der Daten und entsprechender Achsenbeschriftung stellt dies aber letztlich keine Einschränkung dar. Die Datenbasis der Kosinuskurve aus Abbildung 5 ist um +1 verschoben und anschließend mit 30 multipliziert. Damit liegen die Werte im Bereich von 0 bis 60 und lassen sich in der Kodierung mit einem Buchstaben transportieren.

Die Parameter »&chxt=y&chxl=0:|-1|0|1« sorgen für eine Beschriftung der y-Achse mit den Werten -1, 0 und 1. »&chg=0,50,0,0« erzeugt bei 50 Prozent, also in der Mitte des Diagramms, eine Linie, die den Nullpunkt kennzeichnet. Mit diesem Workaround zeichnet Google Chart auch mathematische Graphen.

Abbildung 5: Die Achsenbeschriftung und eine zusätzliche Linie am Nullpunkt kaschieren die Einschränkung, dass Google Chart lediglich positive Zahlenwerte verarbeitet.

Einfach, aber nützlich

Einfache Diagramme, deren Datenmenge die unkodierte Übertragung in der URL gestattet, erzeugt Google Chart oft schneller als eine Tabellenkalkulation. Gerade für in Webseiten eingebettete Diagramme lohnt es sich aber auch, ein Skript zur Datenkodierung zu schreiben. Die Skript-Laufzeitumgebung, ein Editor und selbst eine langsame Internetverbindung reichen dann, um die Graphen zu aktualisieren. Charts lassen sich alternativ auch online erzeugen [3].

Allerdings handelt es sich bei Google Chart um einen kommerziellen Dienst, den laut Usage Policy [7] zwar jedermann unbegrenzt nutzen darf, aber die langfristige Verfügbarkeit ist naturgemäß nicht garantiert. Auch behält sich Google das Recht vor, jede von der Firma selbst als missbräuchlich eingestufte Nutzung zu unterbinden. Problematisch ist im Falle sensibler Daten außerdem, dass sie ungeschützt durch das Internet fließen. Eine alternative Umsetzung des Google-API, die innerhalb der Firmenfirewall auf einem eigenen Server läuft, bietet die LGPL-lizenzierte Software Eastwood von David Gilbert [8]. (pkr)