Ein relativ einfacher Weg, Diagramme für Webseiten zu erzeugen, ist Googles Charts API. Dieser Dienst wird durch eine URL mit Parametern aufgerufen und liefert das generierte Diagramm direkt als PNG-Grafik zurück. Flash oder Javascript sind nicht erforderlich, die Datenübergabe erfolgt allein mit Hilfe der URL-Parameter.
Obige Grafik wird beispielsweise über die URL http://chart.apis.google.com/chart?cht=p3&chd=t:40,20,40&chs=450×200&chl=Magazin|Dr.|Web&chco=427BB5 generiert.
Die Google Chart API bietet eine breite Palette an Diagramm-Typen. Neben den üblichen Torten- und Balken- und Linien-Diagrammen können auch Mengendiagramme, Punktewolken, Netzdiagramme, Weltkarten und QR Codes erzeugt werden.
Die Anpassungsmöglichkeiten umfassen Farben, Beschriftungen und teilweise auch komplexere Stilelemente. Hier ein Beispiel aus der Google-Dokumentation, das ein Liniendiagramm erweitert um diverse Marker zeigt:
Die Datenübergabe per URL-Parameter ermöglicht zwar einen sehr schnellen Start, kann aber bei detailreicheren Diagrammen auch recht komplex werden. Das sieht man bereits an der URL für obiges Liniendiagramm: http://chart.apis.google.com/chart?cht=lc&chd=s:2gounjqLaCf&chco=008000&chls=2.0,4.0,1.0&chs=450×200&chxt=x&chxl=0:||c|d|a|o|s|v|V|x||& amp;chm=a,990066,0,3.0,9.0|c,FF0000,0,1.0,20.0|d,80C65A,0,2.0,20.0|o,FF9900,0,4.0,12.0| s,3399CC,0,5.0,11.0|v,BBCCED,0,6.0,1.0|V,3399CC,0,7.0,1.0|x,FFCC33,0,8.0,20.0|h,000000,0,0.30,0.5& chma=0,0,30,0 [Vorsicht, URL manuell umgebrochen]
Darin liegt auch die Begrenzung der Diagramme. Kein Diagramm kann mehr Daten enthalten, als sich in einer URL kodieren lassen. Die maximale URL-Länge hängt wiederum vom Browser des Benutzers und von der Server-Software ab. Als kleinster gemeinsamer Nenner kann hier (mal wieder) der Internet Explorer mit ca. 2000 Zeichen angenommen werden (siehe auch What is the maximum length of a URL?).
In der zugehörigen Google Group findet sich ein Wegweiser zu diversen Bibliotheken und Dokumenten, die den Umgang mit Google Chart API erleichtern sollen. Für deutschsprachige Nutzer bietet sich auch der Google Chart API Generator an, mithilfe dessen man die verschiedenen Diagrammtypen relativ einfach durchtesten kann.
Die API ist kostenlos. Google bittet aber darum, sich zu melden, falls man mehr als 250’000 Aufrufe pro Tag erwartet.
Eines sollte man sich beim Einsatz bewusst sein: Da die Diagramme auf Googles Servern generiert werden, bekommt Google natürlich auch alle Daten. Laut eigener Aussage werden übermittelte Daten höchstens zwei Wochen und nur für “interne Test- und Debugging-Zwecke” gespeichert. Außerdem können bei öffentlich zugänglichen Webseiten natürlich auch Crawler die Bild-URLs auslesen, über die die Daten übermittelt werden.
Siehe auch: Weitere Möglichkeiten zur Diagramm-Generierung bietet der Dr. Web-Artikel Scripts für Online Diagramme von Sven Lennartz.
Ich benutze seit ein paar Wochen die google-chart-api und bin begeistert: Klasse Sache! Am Anfang muss man schon ein bisschen “rumfricklen” aber wenn man sich da durchgekämpft hat erhält man wirklich schöne Charts.
Dass die Daten zu google übermittelt sehe ich nicht als Problem: Bei einer Intranetlösung würde ich das viellecht nciht machen aber ansonsten sind die fertigen Charts ja sowieso im Netz…
Dass die Diagrammdaten ersichtlich sind hat übrigens auch Vorteile:
- Das Diagramm lässt sich leicht auf Korrektheit überprüfen
- Es wäre gar möglich, dass Screenreader die Diagramme irgendwann vorlesen können
- Selbst wenn Google den Dienst einstellt, lassen sich die Diagramme rekonstruieren wenn man nur noch die HTML-Datei vorliegen hat.
Cooler wäre aber, wenn Browser direkt Diagramme rendern könnten, am besten auf Basis von (versteckten) Tabellen.
Ich persönlich habe mir die API auch angesehen und finde, dass es deutlich simplere Lösungen gibt die mit CSV oder XML arbeiten. Die Möglichkeit diese Charts dann so zu programmieren das Mitarbeiter ohne Kenntnisse mit der API diese ändern können, ist für mich ein wichtiger Aspekt wenn man solche Inhalte im Netz veröffentlicht.
Ich find ja immer noch Open Flash Chart am besten.
http://teethgrinder.co.uk/open-flash-chart-2/
LGPL, einfache Handhabung, tolle Charts!
@Wolfgang: Das gibts schon: http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/
Zwei Probleme:
1. ich sende potentiell sensible Daten an einen Fremdanbieter
2. es läuft als Service nur online
Leider somit völlig uninteressant für mich. Schick sind die Ergebnisse natürlich…
Schick siehts aus, aber ich finde auch das es gerade in Punkto Benutzerfreundlichkeit deutlich bessere Varianten gibt.
[...] 1.) 30 Google Tipps von Bild 2.) Open Source Alternative zu Analytics 3.) SEO Grundlagen Cheat Sheet 4.) Suchmaschinen jagen böse Links 5.) Signaturvermietung in Foren 6.) WordPress SEO Plugins 7.) Rettet den SEO Kommentarspam 8.) SEOmoz – SEO Wissen für 1 Dollar 9.) SEO, Ausschreibungen und die Un-kultur 10.) Google Chart API Vorstellung [...]
Ich nutze auch noch Open Flash Chart. Danke für die Info!
Ich verwende diese Diagramme bereits seit einigen Monaten und muss sagen das sie unglaublich einfach und ausdrucksstark sind. Die Möglichkeiten sind (fast) unendlich.
Dies ist eins der Dienste die ich besonders lobenswert von Google finde. Leider vergessen ihn viele viel zu schnell.
Open Flash Chart rules!
Danke für die vielen nützlichen Infos!
Da ich diese Diagramme auch verwenden,ist es mir egal ob die Daten zu Google übermittelt werden
Danke-schön fuer die Infos.