Home / Online-Artikel / Open-Source-Spezial / 2009 / 02 / Schnelle Diagramme

Newsletter abonnieren

Lies uns auf...

Folge LinuxCommunity auf Twitter

Top-Beiträge

Eingedost
(161 Punkte bei 4 Stimmen)
Aufteiler
(161 Punkte bei 4 Stimmen)

Heftarchiv

LinuxUser Heftarchiv

EasyLinux Heftarchiv

Ubuntu User Heftarchiv

Ubuntu User Heftarchiv

Partner-Links:

Das B2B Portal www.Linx.de informiert über Produkte und Dienstleistungen.

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.

Tip a friend    Druckansicht Bookmark and Share
Kommentare

3247 Hits
Wertung: 193 Punkte (14 Stimmen)

Schlecht Gut

Infos zur Publikation

Infos zur Publikation

title_2010_01

Aktuelle Ausgabe kaufen:

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

Bilder vergleichen mit diffimg
Bilder vergleichen mit diffimg
Tim Schürmann, 01.04.2014 12:40, 1 Kommentare

Das kleine Werkzeug diffimg kann zwei (scheinbar) identische Bilder miteinander vergleichen und die Unterschiede optisch hervorheben. Damit lassen sich nicht nur Rätsel a la „Orignial und Fäls...

Aktuelle Fragen

programm suche
Hans-Joachim Köpke, 13.04.2014 10:43, 8 Antworten
suche noch programme die zu windows gibt, die auch unter linux laufen bzw sich ähneln sozusagen a...
Funknetz (Web-Stick)
Hans-Joachim Köpke, 04.04.2014 07:31, 2 Antworten
Bei Windows7 brauche ich den Stick nur ins USB-Fach schieben dann erkennt Windows7 Automatisch, a...
Ubuntu 13.10 überschreibt immer Windows 8 Bootmanager
Thomas Weiss, 15.03.2014 19:20, 8 Antworten
Hallo Leute, ich hoffe das ich richtig bin. Ich habe einen Dell Insipron 660 Ich möchte gerne Ub...
USB-PTP-Class Kamera wird nicht erkannt (Windows-only)
Wimpy *, 14.03.2014 13:04, 15 Antworten
ich habe meiner Frau eine Digitalkamera, AGFA Optima 103, gekauft und wir sind sehr zufrieden dam...
Treiber
Michael Kristahn, 12.03.2014 08:28, 5 Antworten
Habe mir ein Scanner gebraucht gekauft von Canon CanoScan LiDE 70 kein Treiber wie bekomme ich de...