{"id":1069,"date":"2008-10-16T18:38:40","date_gmt":"2008-10-16T16:38:40","guid":{"rendered":"http:\/\/olbertz.de\/blog\/?p=1069"},"modified":"2008-10-17T07:27:32","modified_gmt":"2008-10-17T05:27:32","slug":"erste-schritte-mit-der-google-chart-api","status":"publish","type":"post","link":"https:\/\/olbertz.de\/blog\/2008\/10\/16\/erste-schritte-mit-der-google-chart-api\/","title":{"rendered":"Erste Schritte mit der Google Chart API"},"content":{"rendered":"

In den letzten paar Tagen habe ich mich für Ormigo<\/a> ein wenig mit der Google Chart API<\/a> auseinander gesetzt und wollte mal den einen, oder anderen Kniff aufzeigen, den ich so nicht in der Dokumentation gefunden hatte.<\/p>\n

Mein erster Versuch sah so aus:
\n
\n
\ncht=lc&
\nchs=650x100&
\nchco=4d89f9&
\nchd=t:29,19,120,113,3,22,1,1,87,6,2,48,78,12,100,100,80,150,29,30,45,100,100,100,128,200
\n<\/code>
\nAm Ende der Grafik sieht man, dass das einfach nur ein glatter Strich ist, die Werte aber mit …100, 128, 200<\/em> aufhören.<\/p>\n

Zuerst dachte ich, dass die Anzahl der Werte evtl. überschritten wurde, oder die URL zu lang war. Des Rätsels Lösung war dann aber viel einfacher: man sollte immer eine Skala angeben und somit Google den kleinsten und den größten Wert mitgeben, damit die Grafik richtig dargestellt werden kann:
\n
\n
\ncht=lc&
\nchs=650x100&
\nchco=4d89f9&
\nchd=t:29,19,120,113,3,22,1,1,87,6,2,48,78,12,100,100,80,150,29,30,45,100,100,100,128,200&
\nchds=0,200<\/strong>
\n<\/code><\/p>\n

Als nächstes wollte ich ganz gerne einen Bereich markieren, um dem Betrachter anzuzeigen, ob die Werte unter- oder oberhalb eines bestimmten Bereiches liegen. Auch hierfür bietet die Chart API etwas an. Dummerweise muss man die Werte auf einen Bereich zwischen 0.0 und 1.0 skalieren. Das funktionierte ebenfalls ganz gut in meiner Testumgebung, bis ich es dann auf unserer Staging-Plattform ausprobiert hatte und es da dann plötzlich nicht mehr funktionierte: der Bereich wurde einfach nicht angezeigt.<\/p>\n

Hier lag das Problem an der Anzahl der Nachkommastellen! Unglaublich, aber wahr. Jetzt runde ich sie auf 3 Nachkommastellen und alles ist gut. Zusätzlich gebe ich an, dass die Y-Achse angezeigt werden soll:
\n
\n
\ncht=lc&
\nchs=650x100&
\nchco=4d89f9&
\nchd=t:29,19,120,113,3,22,1,1,87,6,2,48,78,12,100,100,80,150,29,30,45,100,100,100,128,200&
\nchds=0,200&
\nchm=r,aaaaaa,0,0.3,0.7<\/strong>&
\nchxt=y<\/strong>
\n<\/code><\/p>\n

Hier taucht dann gleich das nächste „Problem“ auf, da die Werte auf der Y-Achse nun wiederum gar nichts mit den Werten im Chart zu tun haben. Für mein Beispiel reichte die Angabe des Minimal- und Maximalwertes, was man relativ einfach angeben kann. Man muss nur genau mit den Pipe-Symbolen bei der Angabe der Werte aufpassen, sonst wird wieder nichts angezeigt:
\n
\n
\ncht=lc&
\nchs=650x100&
\nchco=4d89f9&
\nchd=t:29,19,120,113,3,22,1,1,87,6,2,48,78,12,100,100,80,150,29,30,45,100,100,100,128,200&
\nchds=0,200&
\nchm=r,dddddd,0,0.3,0.7&
\nchxt=y&
\nchxl=0:|0|200<\/strong>
\n<\/code><\/p>\n

Zum Schluß noch eine Überschrift und den Bereich unter dem Graphen ausfüllen:
\n
\n
\ncht=lc&
\nchs=650x150<\/strong>&
\nchco=4d89f9&
\nchd=t:29,19,120,113,3,22,1,1,87,6,2,48,78,12,100,100,80,150,29,30,45,100,100,100,128,200&
\nchds=0,200&
\nchm=r,dddddd,0,0.3,0.7|B,76A4FB,0,0,0<\/strong>&
\nchxt=y&
\nchxl=0:|0|200&
\nchtt=Google+Chart+API<\/strong>
\n<\/code><\/p>\n

Durch die Vielzahl der Parameter muss man auch aufpassen, ob man einen bereits verwendet hat und eine neue Einstellung vielleicht deshalb nicht greift, weil er von einem späteren Überschrieben wird. So ist es mir mit dem Parameter chm<\/em> passiert, welcher sowohl für das Füllen der Fläche unter dem Graphen wie auch dem Einfärben für Bereiche zuständig ist. Die Google Chart API unterstützt nicht die mehrfache Verwendung des selben Parameternamens (ich bin mir auch unsicher, ob das W3C konform ist, grundsätzlich kann eine Webapplikation aber mit so etwas umgehen).<\/p>\n

Insgesamt aber schon einmal eine sehr schöne Möglichkeit, Zusammenhänge in relativ kurzer Zeit visuell umzusetzen. Was ich aber nicht geschafft habe: die gleichen Daten mit einem Bar-Chart umzusetzen. Die Breite eines Balkens ist immer gleich groß und somit „sprengt“ es den von mir gesetzten Rahmen:
\n
\n
\ncht=bvs<\/strong>&
\nchs=650x100<\/strong>&
\nchco=4d89f9&
\nchd=t:29,19,120,113,3,22,1,1,87,6,2,48,78,12,100,100,80,150,29,30,45,100,100,100,128,200&
\nchds=0,200&
\nchm=r,dddddd,0,0.3,0.7&
\nchxt=y&
\nchxl=0:|0|200&
\nchtt=Google+Chart+API
\n<\/code><\/p>\n

Nachtrag:<\/strong> Mit Hilfe aus den Kommentaren: mit dem Parameter chbh<\/em> kann man auch die Breite der Balken angeben:
\n
\n
\ncht=bvs&
\nchs=650x150&
\nchco=4d89f9&
\nchd=t:29,19,120,113,3,22,1,1,87,6,2,48,78,12,100,100,80,150,29,30,45,100,100,100,128,200&
\nchds=0,200&
\nchm=r,dddddd,0,0.3,0.7&
\nchxt=y&
\nchxl=0:|0|200&
\nchtt=Google+Chart+API&
\nchbh=20<\/strong>
\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

In den letzten paar Tagen habe ich mich für Ormigo ein wenig mit der Google Chart API auseinander gesetzt und wollte mal den einen, oder anderen Kniff aufzeigen, den ich so nicht in der Dokumentation gefunden hatte. Mein erster Versuch … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1069","post","type-post","status-publish","format-standard","hentry","category-augenblicke"],"_links":{"self":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/1069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/comments?post=1069"}],"version-history":[{"count":0,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/1069\/revisions"}],"wp:attachment":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/media?parent=1069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/categories?post=1069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/tags?post=1069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}