Ajaxschmiede.de

Jeder Webmaster musste bestimmt schon einmal Daten in Form eines Diagramms für eine Web-Applikation visualisieren. Dafür konnte in der Vergangenheit zum Beispiel die PHP-Klasse PHPLOT genutzt werden. Noch einfacher geht es jetzt mit der Google Chart API, einer einfachen Schnittstelle, die anhand einer URL dynamisch ein Diagramm erstellt. Man definiert im HTML-Code für das Diagramm ein Bild und gibt als Quelle die URL mit den gewünschten Parametern zur Google Chart API an. Google liefert das fertige Diagramm. Einfach genial!

Die URL im HTML <img> Tag sieht wie folgt aus:

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

Diese Parameter können verwendet werden:

• cht der Diagrammtyp (chart type), z.B. p3 für ein 3-dimensionales Kuchendiagramm
• chd die Diagrammdaten (chart data)
• chs die Diagrammgröße (chart size) in Pixel, z.B. 250×125
• chl die Diagrammbeschriftung (chart labels), deren Werte mit | abgetrennt werden, z.B. A|B|C
• chco die Farben der einzelnen Diagrammelemente (chart colors)

Die Diagrammdaten können in drei verschiedenen Formaten kodiert angegeben werden:

Simple encoding

chd=s:<chart data>

Die Daten werden mittels Groß- und Kleinbuchstaben sowie Ziffern angegeben. Der Unterstrich deklariert einen fehlenden Wert. Mehrere Datenmengen werden über das Komma abgetrennt.

Text encoding

chd=t:<chart data>

Die Daten bestehen aus Fließkommewerten (float) von 0.0 bis 100.0 . Einen fehlenden Wert kann über -1 deklariert werden. Mit dem Pipe-Zeichen | werden einzelne Datenmengen getrennt.

Extended encoding

chd=e:<chart data>

Diese Daten bestehen jeweils aus einem Paar der Zeichen A bis Z, a bis z, 0 bis 9, Bindestrich und Punkt angegeben. Die Datenmengen werden hier wieder über das Komma getrennt.

Es stehen einige verschiedene Diagramm-Typen wie Linien-, Balken-, Kuchen-, Venn- und Punktdiagramm zur Auswahl.

Hier ein paar Beispiele:

Kuchendiagramm

http://chart.apis.google.com/chart?cht=p3&chd=s:hmz&chs=250x125&chl=Teil1|Teil2|Teil3&chco=ff0000</code></pre>

Venn-Diagramm

http://chart.apis.google.com/chart?cht=v&chs=200x125&chd=t:100,80,60,30,30,30,10&chco=00ff00,0000ff,ff0000</code></pre>

Punktdiagramm

http://chart.apis.google.com/chart?cht=s&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=200x125</code></pre>

Für das Ajax-Framework jQuery gibt es ein Zeichnen-Plugin, mit dem sich ebenfalls Diagramme erstellen lassen. Darauf werden wir noch in einem separaten Blog-Post eingehen.