Google Image Charts
Eigentlich sollte es die Image Charts von Google gar nicht mehr geben. Auf dieser Seite https://developers.google.com/chart/image/ kann man lesen:
Warning: This API is deprecated in 2012 and was turned off on March 18, 2019. Please use the actively maintained Google Charts API instead.
Die Technik ist ganz einfach: mit übergibt alle Informationen per URI, also über die aufgerufene Adresse. Etwa so
<img src="https://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=500x200&chl=Hello|World" alt="Hello World Beispiel Chart" width="85%" />
Der Kern ist aber eigentlich nur:
https://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=500x200&chl=Hello|World
Google Image Charts - ein Überblick
Mit Google Image Charts kann man die folgenden Charttypen darstellen:
Allgemeine Charttypen
Das sind typische Charts wie man sie in allen typischen Tabellenkalkulationen und anderen Chartbibliotheken findet.
- Balken- bzw. Säulencharts (bar charts); siehe https://developers.google.com/chart/image/docs/gallery/bar_charts
- Box Charts (Excel führt diesen Typ unter Kurscharts auf); siehe https://developers.google.com/chart/image/docs/gallery/compound_charts#box_charts
- Linien-Charts, siehe https://developers.google.com/chart/image/docs/gallery/line_charts
- Kerzen-Charts (candlestick charts, bei Excel ebenfalls unter Kurscharts aufgeführt); siehe https://developers.google.com/chart/image/docs/gallery/compound_charts#candlestick_charts
- Tortengrafiken (pie charts); siehe https://developers.google.com/chart/image/docs/gallery/pie_charts
- Venn Charts (Mengengrafiken); siehe https://developers.google.com/chart/image/docs/gallery/venn_charts
- Radar Charts (etwa vergleichbar den Netz-Grafiken unter Excel); siehe https://developers.google.com/chart/image/docs/gallery/radar_charts
- Scatter Charts (etwa vergleichbar den Punkt-Grafiken bei Excel, auch Streudiagramme genannt); siehe https://developers.google.com/chart/image/docs/gallery/scatter_charts
- zusammengesetzte Multifomat-Charts (Compound Charts); siehe https://developers.google.com/chart/image/docs/gallery/compound_charts
Besondere Charttypen
- mathematische Formeln; siehe https://developers.google.com/chart/infographics/docs/formulas
- Google-O-Meter Charts; siehe https://developers.google.com/chart/image/docs/gallery/googleometer_chart
- GraphViz Charts; siehe https://developers.google.com/chart/image/docs/gallery/graphviz
- Dynamische Bilder (dynamic icons); siehe https://developers.google.com/chart/image/docs/gallery/dynamic_icons
- Landkarten-Grafiken (map charts); siehe https://developers.google.com/chart/image/docs/gallery/map_charts
- QR-Codes; siehe https://developers.google.com/chart/infographics/docs/qr_codes
Weitere Hilfen
Ein gute Unterstützung findet man auf der Spielwiese. Man kann die Spielweise auch ohne Frame benutzen.
Typische Anwendungsfälle
Balkengrafik
Die folgende Grafik stellt drei Sachverhalte als gestapelte Balken für sechs Zeiträume dar. Die einzelnen Teile der Balekn sind beschriftet, so dass man die Werte auch direkt ablesen kann. Außerdem werden die Einzelwerte auch als Summe angezeigt.
Der Api-Aufruf sieht so aus:
https://chart.googleapis.com/chart?cht=bvs&chs=490x350&chd=t:4,4,4,4,4,3|10,9,10,9,8,6|3,2,4,2,3,5&chco=ff89f9,c633fd,00ff00&chbh=r,.6&chxt=x,y&chtt=Besucher+nach+Monaten|Januar+bis+Juni&chxr=1,0,20,5&chdl=Autos|Busse|Fahrr%C3%A4der&chxl=0:|Jan|Feb|Mar|Apr|Mai|Juni&chg=0,10&chds=0,20&chma=35,30,30,30&chm=N,FF0000,-1,,12|N,000000,0,,12,,c|N,000000,1,,12,,c|N,990099,2,,12,,c
Die einzelnen Parameter sind:
cht=bvs- Charttyp- Anzeigegröße
- Daten
- Farben
- ...
- Achsen
- Titel
- Legende
- Beschriftung der x-Achse
Ausführliche Informationen enthält die Datei google image charts.xlsx.
Anmerkung zur Bildgröße
Die maximale Bildgröße, die Google Image Charts darstellen kann beträgt 300.000 Pixel. Wenn man Parameter angibt, die diese Grenze überschreiten, z.B. chs=675x500, dann bekommt man eine Fehlermeldung:
400. That’s an error.
Your client has issued a malformed or illegal request. <ul> <li>The parameter 'chs=675x500' specifies a chart with 337500 pixels, which exceeds the maximum size of 300000 pixels.</li> </ul> That’s all we know.
Die obige Grafik habe ich hier noch einmal auf chs=675x425 skaliert:
Beide Grafiken wurden aber auf eine Anzeigegröße von 90% der zur Verfügung stehenden Breite skaliert, damit auch auf kleineren Bildschirmen eine adäqute Anzeige erfolgt.
Spielereien mit Google Image Charts
Man findet in der Dokumentation zu den Image Charts auch einige kuriose Beispiele. Ein Quelle dazu sind die von Benutzern eingereichten Charts. So z.B.:
Weitere interessante Beispiele findet man im Zusammenhang mit der Erklärung der Datenbereitsstellung durch Funktionen, z.B. auf der Hilfeseite zu Liniengrafiken. Auch hierzu ein Beispiel: