Diagramme für die eigene Webseite
Statistik Grafik mit Google Chart
Neulich beim Treffen der Apache Wicket Usergroup in Stockholm wurde kurz über Google Chart gesprochen. Heute hatte ich zum ersten Mal die Gelegenheit das ganze für einen anderen Blog auszuprobieren. Google Chart ist eine API mit der sich auf einfache Weise verschiedene Diagramme, Statistiken oder Tabellen erzeugen lassen. Alles was ihr tun müßt ist chart.apis.google.com mit den richtigen Parametern aufrufen und Google liefert Euch ein tolles Diagramm zurück. Das ganze könnt ihr direkt als <img> Tag im Quellcode einbauen oder als IFrame. Allerdings gibt es wohl eine Limitierung bezüglich der täglichen Aufrufe. Ich weiss leider nichts genaues, aber jedes Diagramm kann wohl nur 50.000 mal am Tag abgerufen werden oder so. Naja damit komme ich mit meinem Blog locker hin.
In meinem Blogeintrag habe ich auf diese Art und Weise ein einfaches Balkendiagramm nachgebaut, das ich am Freitag in einer Stockholmer Tageszeitung gefunden habe. Eine genaue Beschreibung folgt weiter unten. Schauen wir uns zunächst ein paar Diagramme an, die mit Google Chart erzeugt werden können.
Liniendiagramm
Das Liniendiagramm rendert einfach eine Linie in ein Koordinatensystem. Das ganze sieht dann so aus wie der tägliche Verlauf an der Börse. Nehmen wir an, ihr wollt den DAX für einen bestimmten Tag in Eurer Webseite anzeigen. Das geht einfach in dem folgendes Bild in den Quelltext eingebaut wird:
Der interessante Teil zum Erzeugen des Liniendiagramms sind die Parameter im Query String - also alles was hinter dem "?" steht.
cht=lc&chs=200x125&chd=s:AQEHJ
Da ich davon ausgehe, dass ein wenig Wissen über HTTP GET und Query String Parameter vorhanden ist, spare ich mir weitere Ausführungen darüber. Folgende 3 Parameter erzeugen das Liniendiagramm:
cht - das ist der Typ des Diagramms. "lc" bedeutet Liniendiagramm. Wenn ihr die gleichen Daten als Balkendiagramm darstellen wollt, nehmt einfach "bvs" als Parameter und folgende URL:
chs - das ist die Größe des Diagramms in Pixel. Es existiert leider eine Maximalgröße. Mein Balkendiagramm durfte beispielsweise nicht höher als 600 Pixel sein, so dass ich die Höhe der Balken schmaler machen mußte um alle Elemente darzustellen.
chd - das sind die Werte die ihr darstellen wollt. Es gibt zwei gebräuchliche Arten um die Daten zu übergeben, als "Text Encoding" oder "Simple Encoding". Im Beispiel wurde "Simple Encoding" verwendet. Bei "Simple Encoding" werden die Zahlen als Buchstaben übergeben wobei A=0, B=1, Z=25, a=26, z=51, 0=52, 9=61 usw. ist. Eine komplette Übersicht gibt es hier. Das im Beispiel verwendete "s:AQEHJ" kann man in "Text Encoding" so ausdrücken: "t:0|16|4|7|9".
Diese drei Parameter sind das Minimum was benötigt wird um ein Liniendiagramm darzustellen. Darüber hinaus existieren unzählige optionale Parameter mit den sich beispielsweise Farbe der Linie, Beschriftung der Achsen etc. anpassen lassen.
Tortendiagramm
Wer mehr auf Tortendiagramme steht ist bei Google Chart bestens aufgehoben. Wie bereits angesprochen kann man Tortendiagramme mit dem "cht" Parameter in der API einstellen. Es gibt zwei Arten von Tortendiagrammen bei Google Chart, ein dreidimensionales (cht=p3) und ein zweidimensionales (cht=p). Hier wieder ein kleines Beispiel:
Ein neuer Parameter "chtt" wird verwendet um dem Tortendiagramm einen Titel zu geben. Alle anderen Parameter sollten bereits bekannt sein. Wenn die einzelnen Tortenstücke beschriftet werden sollen, muss der "chl" Parameter verwendet werden, beispielsweise so chl=januar|februar|märz|april|mai|juni|juli|august|september|
oktober|november|dezember. Mit dem Pipe Zeichen werden die einzelnen Einträge getrennt. Das ganze sieht dann so aus:
Wenn ihr die URL nehmt und sie statt als img-Tag im Quellcode direkt im Browser aufruft, werdet ihr feststellen, dass das ä Zeichen im Monat März nur als Fragezeichen dargestellt wird. Das liegt daran, dass Google Chart die Sonderzeichen in einem speziellen Format benötigt. Alle Special Characters müssen im UTF-8 Format übergeben werden. Das Problem besteht nur wenn ihr statt <img> die URL direkt aufruft oder das Bild über einen <iframe> einbindet. Für die deutschen und schwedischen Sonderzeichen braucht es diese Ersetzungen:
Ö - %C3%96
ö - %C3%B6
Ü - %C3%9C
ü - %C3%BC
Ä - %C3%84
ä - %C3%A4
ß - %C3%9F
å - %C3%A5
Å - %C3%85
Alle restlichen Sonderzeichen findet ihr in dieser Tabelle in der Spalte UTF-8. Der März muss also so übergeben werden "m%C3%A4rz".
Falls ihr ein wenig mit den Farben spielen wollt, schaut Euch den "chco" Parameter an. Dieser Parameter erwartet eine kommaseparierte Liste wo HTML Farbcodes um die einzelnen Teile des Tortendiagramms einzufärben.
Balkendiagramm
Abschließend noch etwas zum Balkendiagramm, das ich in meinem schwedischen Blogeintrag verwendet habe. Die URL mit der ich die API zur Darstellung des Balkendiagramm aufrufe sieht so aus:
Die einzelnen Parameter haben folgende Bedeutung:
cht=bhg - Typ des Diagramms (Balkendiagramm)
chs=600x500 - Höhe und Breite des Diagramms
chbh=10 - Höhe des Balken in Pixel
chds=0,600 - Skalierung der x-Achse, wobei 0 der Start- und 600 der Endwert sind. Diese Angabe ist notwendig damit die Balken die korrekte Länge haben. Fehlt der Parameter werden 0 und 100 als Standardwerte verwendet.
chd=t:597,508, ... - die verschiedenen Werte im Format "Text Encoding"
chxt=x,y - gibt an welche Achsen beschriftet werden sollen
chtt=Titel - die Überschrift des Diagramms
chxl=1:|Botkyrka|Sundbyberg|0:|0|25 - dieser Parameter beschriftet die Achsen. 1: bedeutet die y-Achse, gefolgt von einer Liste von schwedischen Gemeinden die mit Pipe Zeichen | getrennt sind. Nach der letzten Gemeinde verwende ich 0: um mit der Beschriftung der x-Achse weiterzumachen. Wenn eine Achse mit Zahlen beschriftet wird, müssen die Abstände zwischen den Werten gleich groß gewählt werden da sonst die Länge der Balken nicht mehr stimmt.
Das wahre Potential von Google Chart wird deutlich, wenn man bedenkt dass sich alle Parameter dynamisch zur Laufzeit generieren lassen. Wenn ihr zum Beispiel grafisch darstellen wollt, wie viele Besucher zu welcher Stunde auf Eure Webseite zugreifen und die Daten in einem Logfile vorliegen, ist folgender Ansatz mit PHP denkbar:
1) lest das Logfile ein
2) teilt die Daten nach Stunden ein
3) baut ein PHP Skript das eine Grafik von Google Chart einbaut
4) übergebt die Parameter auf Basis der in 2) berechneten Werte
Mit Google Chart eröffnen sich für den Webmaster völlig neue Möglichkeiten um Daten dynamisch in Form von Diagrammen darzustellen. Ich werde Google Chart definitiv im Adminbereich zukünftiger Websites einbauen.
In meinem Blogeintrag habe ich auf diese Art und Weise ein einfaches Balkendiagramm nachgebaut, das ich am Freitag in einer Stockholmer Tageszeitung gefunden habe. Eine genaue Beschreibung folgt weiter unten. Schauen wir uns zunächst ein paar Diagramme an, die mit Google Chart erzeugt werden können.
Liniendiagramm
Das Liniendiagramm rendert einfach eine Linie in ein Koordinatensystem. Das ganze sieht dann so aus wie der tägliche Verlauf an der Börse. Nehmen wir an, ihr wollt den DAX für einen bestimmten Tag in Eurer Webseite anzeigen. Das geht einfach in dem folgendes Bild in den Quelltext eingebaut wird:
Der interessante Teil zum Erzeugen des Liniendiagramms sind die Parameter im Query String - also alles was hinter dem "?" steht.
cht=lc&chs=200x125&chd=s:AQEHJ
Da ich davon ausgehe, dass ein wenig Wissen über HTTP GET und Query String Parameter vorhanden ist, spare ich mir weitere Ausführungen darüber. Folgende 3 Parameter erzeugen das Liniendiagramm:
cht - das ist der Typ des Diagramms. "lc" bedeutet Liniendiagramm. Wenn ihr die gleichen Daten als Balkendiagramm darstellen wollt, nehmt einfach "bvs" als Parameter und folgende URL:
chs - das ist die Größe des Diagramms in Pixel. Es existiert leider eine Maximalgröße. Mein Balkendiagramm durfte beispielsweise nicht höher als 600 Pixel sein, so dass ich die Höhe der Balken schmaler machen mußte um alle Elemente darzustellen.
chd - das sind die Werte die ihr darstellen wollt. Es gibt zwei gebräuchliche Arten um die Daten zu übergeben, als "Text Encoding" oder "Simple Encoding". Im Beispiel wurde "Simple Encoding" verwendet. Bei "Simple Encoding" werden die Zahlen als Buchstaben übergeben wobei A=0, B=1, Z=25, a=26, z=51, 0=52, 9=61 usw. ist. Eine komplette Übersicht gibt es hier. Das im Beispiel verwendete "s:AQEHJ" kann man in "Text Encoding" so ausdrücken: "t:0|16|4|7|9".
Diese drei Parameter sind das Minimum was benötigt wird um ein Liniendiagramm darzustellen. Darüber hinaus existieren unzählige optionale Parameter mit den sich beispielsweise Farbe der Linie, Beschriftung der Achsen etc. anpassen lassen.
Tortendiagramm
Wer mehr auf Tortendiagramme steht ist bei Google Chart bestens aufgehoben. Wie bereits angesprochen kann man Tortendiagramme mit dem "cht" Parameter in der API einstellen. Es gibt zwei Arten von Tortendiagrammen bei Google Chart, ein dreidimensionales (cht=p3) und ein zweidimensionales (cht=p). Hier wieder ein kleines Beispiel:
Ein neuer Parameter "chtt" wird verwendet um dem Tortendiagramm einen Titel zu geben. Alle anderen Parameter sollten bereits bekannt sein. Wenn die einzelnen Tortenstücke beschriftet werden sollen, muss der "chl" Parameter verwendet werden, beispielsweise so chl=januar|februar|märz|april|mai|juni|juli|august|september|
oktober|november|dezember. Mit dem Pipe Zeichen werden die einzelnen Einträge getrennt. Das ganze sieht dann so aus:
Wenn ihr die URL nehmt und sie statt als img-Tag im Quellcode direkt im Browser aufruft, werdet ihr feststellen, dass das ä Zeichen im Monat März nur als Fragezeichen dargestellt wird. Das liegt daran, dass Google Chart die Sonderzeichen in einem speziellen Format benötigt. Alle Special Characters müssen im UTF-8 Format übergeben werden. Das Problem besteht nur wenn ihr statt <img> die URL direkt aufruft oder das Bild über einen <iframe> einbindet. Für die deutschen und schwedischen Sonderzeichen braucht es diese Ersetzungen:
Ö - %C3%96
ö - %C3%B6
Ü - %C3%9C
ü - %C3%BC
Ä - %C3%84
ä - %C3%A4
ß - %C3%9F
å - %C3%A5
Å - %C3%85
Alle restlichen Sonderzeichen findet ihr in dieser Tabelle in der Spalte UTF-8. Der März muss also so übergeben werden "m%C3%A4rz".
Falls ihr ein wenig mit den Farben spielen wollt, schaut Euch den "chco" Parameter an. Dieser Parameter erwartet eine kommaseparierte Liste wo HTML Farbcodes um die einzelnen Teile des Tortendiagramms einzufärben.
Balkendiagramm
Abschließend noch etwas zum Balkendiagramm, das ich in meinem schwedischen Blogeintrag verwendet habe. Die URL mit der ich die API zur Darstellung des Balkendiagramm aufrufe sieht so aus:
Die einzelnen Parameter haben folgende Bedeutung:
cht=bhg - Typ des Diagramms (Balkendiagramm)
chs=600x500 - Höhe und Breite des Diagramms
chbh=10 - Höhe des Balken in Pixel
chds=0,600 - Skalierung der x-Achse, wobei 0 der Start- und 600 der Endwert sind. Diese Angabe ist notwendig damit die Balken die korrekte Länge haben. Fehlt der Parameter werden 0 und 100 als Standardwerte verwendet.
chd=t:597,508, ... - die verschiedenen Werte im Format "Text Encoding"
chxt=x,y - gibt an welche Achsen beschriftet werden sollen
chtt=Titel - die Überschrift des Diagramms
chxl=1:|Botkyrka|Sundbyberg|0:|0|25 - dieser Parameter beschriftet die Achsen. 1: bedeutet die y-Achse, gefolgt von einer Liste von schwedischen Gemeinden die mit Pipe Zeichen | getrennt sind. Nach der letzten Gemeinde verwende ich 0: um mit der Beschriftung der x-Achse weiterzumachen. Wenn eine Achse mit Zahlen beschriftet wird, müssen die Abstände zwischen den Werten gleich groß gewählt werden da sonst die Länge der Balken nicht mehr stimmt.
Das wahre Potential von Google Chart wird deutlich, wenn man bedenkt dass sich alle Parameter dynamisch zur Laufzeit generieren lassen. Wenn ihr zum Beispiel grafisch darstellen wollt, wie viele Besucher zu welcher Stunde auf Eure Webseite zugreifen und die Daten in einem Logfile vorliegen, ist folgender Ansatz mit PHP denkbar:
1) lest das Logfile ein
2) teilt die Daten nach Stunden ein
3) baut ein PHP Skript das eine Grafik von Google Chart einbaut
4) übergebt die Parameter auf Basis der in 2) berechneten Werte
Mit Google Chart eröffnen sich für den Webmaster völlig neue Möglichkeiten um Daten dynamisch in Form von Diagrammen darzustellen. Ich werde Google Chart definitiv im Adminbereich zukünftiger Websites einbauen.
