29
07

barcode

Google Chart API

Man kann über Google so viel schwarz­ma­len wie man möchte, aber die immer neuen APIs sind immer wie­der ein­fach bes­ser als die Kon­kur­renz. Die nun offene Chart API ist da keine Aus­name. Es ist die eier­le­gende Woll­milch­sau gewor­den. Einst exklu­si­ves inter­nes Tool für Google, steht es nun jedem Anwen­der offen, sofern man sich mit 50.000 Abfra­gen pro Tag begnügt.

Für diese Seite sind die Pie-Charts am inter­es­san­tes­ten. Nach kur­zem Lesen der Instruk­tio­nen, bekomme ich aus den alten Daten die­ses Ein­trags, sowas her­aus:

Diagramm Klassenverteilung auf Level 70

Hierzu ein win­zi­ges kur­zes Tuto­rial, das kurz die API erklä­ren soll. Da diese Art von Dia­gram­men die sicher­lich ein­fachs­ten der API sind, bie­tet sich mein Bei­spiel auch bes­tens an. Im Gegen­satz zu ande­ren Google APIs braucht man hier kei­nen API Key, son­dern arbei­tet ein­zig und allein mit URLs. Jede URL baut sich aus meh­re­ren Para­men­tern auf. Fan­gen wir mal ein­fach an mit einem ein­fa­che­rem Dia­gramm:

Muster Diagramm 1

Die URL für die­ses Dia­gramm besteht aus 4 Para­me­tern, die durch ein Ampersand-Symbol ver­bun­den, in der URL an das API über­ge­ben wer­den. Die Para­me­ter hier­für lau­ten:

1. cht=p3
2. chs=468x242
3. chd=s:1cs
4. chl=Label-1|Label-2|Label-3

Zeile 1 defi­niert die Art des Dia­gramms. Zeile 2 beschreibt die Größe, alle Dia­gramme wer­den als nor­ma­les Bild aus­ge­ge­ben. Zeile 3 beschreibt die eigent­li­chen Werte und Zeile 4 schließ­lich die Beschrif­tung die­ser Werte. Die URL umschreibt also: “Zeichne ein Dia­gramm der Art 3D Pie-Chart, in den Maßen 468 Pixel breit und 242 Pixel hoch. Gebe dem Dia­gramm 3 Werte - 53, 28, 19 - und beschrifte diese Werte mit Label-1, Label-2 und Label-3.” Soweit so ein­fach.

Etwas abs­trak­ter wird es bei der eigent­li­chen Beschrei­bung der Werte. Google bie­tet hier drei Metho­den, alle umschrei­ben eine andere Art der Kodie­rung. Mein ein­fa­ches Bei­spiel funk­tio­niert mit dem was Google als Sim­ple Enco­ding beti­telt und was der String chs= in der URL ein­lei­tet. Hier die Regeln zum Sim­ple Enco­ding:

  • Upper case A = 0, B = 1 and so on to Z = 25.
  • Lower case a = 26, b= 27 and so on to z = 51.
  • Zero (0) = 52 and so on to 9 = 61.
  • Spe­cify a mis­sing value with an unders­core (_).
  • If you have more than one set of data, sepa­rate each set with a comma (,).

Meine 3 Werte (53, 28, 19) wer­den in die­ser Kodie­rung also als “1cs” beschrie­ben.

Wer die­sen Schritt ein­mal durch­schaut hat, der hat das Schlimmste hin­ter sich. Viel mehr gibt es eigent­lich nicht zu schrei­ben. Diese API ist äußerst ein­fach für diese sim­plen Dia­gramme. Kom­ple­xer wird es erst bei ande­ren Diagramm-Arten.

Neben dem drei­di­men­sio­na­len Pie-Chart, gibt es natür­lich auch die klas­si­sche zwei­di­men­sio­nale Vari­ante:

Muster Diagramm 2

Man darf das Ganze auch ein­fär­ben. Ent­we­der mit einem Farb­wert, wel­cher dann abge­stuft wird:

Muster Diagramm 3

Oder auch mit je einem sepa­ra­ten Farb­wert für die ein­zel­nen Abschnitte:

Muster Diagramm 4

Kann nur jedem emp­feh­len sich die API mal näher anzu­schauen. Glaube da wird man hier bei mir in Zukunft mehr von sehen. Dau­men hoch für Google’s Chart API. Klei­nes aber fei­nes Detail am Rande: Läd man eine die­ser URLs für sich sepa­rat, dann ist das Favicon im Brow­ser auch wirk­lich eine ver­klei­nerte Ansicht des jewei­li­gen Dia­gramms.

Google Chart API

Ich benutze für meine Arbeit immer wie­der gerne, wenn es denn geht, eine kos­ten­lose API exter­ner Anbie­ter. Ich bin stän­dig auf der Suche nach neuen, inno­va­ti­ven und natür­lich kos­ten­lo­sen APIs und nach­dem ich erst kürz­lich auf dem Go…

Kommentar schreiben
safari bug

Vorschau:

HTML ist in Kommentaren zugelassen. Erlaubt sind die HTML-Tags:
<a href>, <i>, <p>, <strong>, <em>, <ul>, <ol>, <li>, <blockquote>.
Alle themenfremden oder persönlichkeistverletzenden Beiträge werden gelöscht, also immer schön sachlich argumentieren.

schrieb: