Google stellt inzwischen zahlreiche Dienste zu Verfügung, die auf Webseiten verwendet werden können. Zu diesen Diensten zählen auch die „Google Chart Tools“. Mit Hilfe der Google Chart Tools lassen sich auf recht einfache Art und Weise Diagramme erzeugen, die in die eigene Webseite eingebunden werden können.
Am einfachsten zu nutzen sind die „Image Charts“ aus der Google Chart-Toolbox. Leider ist diese Variante schon jetzt als veraltet gekennzeichnet, kann aber noch bis April 2015 eingesetzt werden.
In einem späteren Beitrag werde ich den Nachfolger vorstellen, der als Basis Javascript und die HTML5/SVG-Technologie nutzt.
Doch zunächst ein kleines Beispiel für ein Tortendiagramm in „Hallo Welt“-Manier, erzeugt mit den Google Image Charts :
Die Verwendung in einem WordPress-Beitrag ist denkbar einfach. Hier der dazugehörige HTML-Code:
<img src="https://chart.googleapis.com/chart?cht=p3 &chd=t:60,40&chs=350x150 &chl=Hallo|Welt &chtt=Beispiel Hallo Welt &chts=FF0000,14,l" alt="Hallo Welt Torte" />
Für die Erzeugung des Tortendiagrammbildes wird die Chart-API von Google genutzt und mittels eines GET-Requests die Parameter für das Diagramm übergeben. Der Parameter „cht“ bestimmt die Art des zu erzeugenden Diagramms. Der Wert „p3“ steht für ein Tortendiagramm. Die Daten für die Diagrammabschnitte werden mit „chd=t:60,40“ übermittelt. Das erste „Tortenstückchen“ hat damit 60% Anteil, das zweite nimmt den Rest von 40% ein. Die Bezeichnungen für die „Tortenstücke“ werden über den Parameter „chl“ übergeben. „Hallo“ bezeichnet den ersten Anteil, also die 60% und „Welt“ den zweiten Anteil, die 40%. Die Größe des Diagrammbildes wird mit dem Parameter „chs“ festgelegt: 250 Pixel breit und 100 Pixel hoch. Mit „chtt“ gibt man den Titel des Charts an. Der Parameter „chts“ gibt die Farbe (F), die Zeichenhöhe (14) und die Ausrichtung („l“ steht für linksbündig) des Charttitels an.
Mit Hilfe des angehängten Validate-Parameters (&chof=validate) können Sie Ihre Google-Image-Chart-URL überprüfen.
Also z.B. erhalten Sie mit dem folgenden Aufruf
<a href="https://chart.googleapis.com/chart?cht=p3 &chd=t:60,40&chs=350x150 &chl=Hallo|Welt &chtt=Beispiel Hallo Welt &chts=FF0000,14,l &cghof=validate" target="_blank"> Korrekter Aufruf </a>
die Ausgabe:
Hallo Welt Torte korrekter Aufruf
Google Chart API: Überprüfung einer URL ohne Fehler
Bei folgenden fehlerhaften Aufruf
<a href="https://chart.googleapis.com/chart?cht=x3 &chd=t:60,40&chs=350x150 &chl=Hallo|Welt &chtt=Beispiel Hallo Welt &chts=FF0000,14,l &cghof=validate" target="_blank" > Fehlerhafter Aufruf </a>
aber
Hallo Welt Torte fehlerhafter Aufruf
Google Chart API: Überprüfung einer URL mit Fehler
Eine Übersicht über die möglichen Parameter finden sie in der
Liste der Google-Chart-Parameter.
[of_autor]
