Diagramme-Goodness von allen Richtungen

Gleich zwei neue Möglichkeiten für die Generierung und Darstellung von Diagrammen sind dieser Tage auf meinem Radar aufgetaucht, die beide höchst interessant klingen!

Zum einen die Google Charts API. Das Prinzip ist sehr einleuchtend: Der diagrammerstellungswillige Webdesigner bastelt sich aus vielen Parametern eine URL zusammen, die beim Google-Server aufschlägt. Dieser bastelt daraus eine PNG-Grafik zusammen und liefert diese aus. Ein einfacher HTTP-Request, ein on-the-fly erstelltes Bild, das man einbinden kann und sich glücklich schätzen. Gleich mal ausprobieren, was? Okay:

Wie geht das im Detail? Einfach so:

http://chart.apis.google.com/chart?chs=450x200&chd=t:22.0,34.5,88.0,98.3&cht=lc&chco=009900&chtt=Beschwerden+über+meine+Frisur&chxt=x,y&chg=20,20

Gut, noch ist das etwas sperrig, wenn man alles per Hand eingeben muss. Aber ich wette, es dauert keine 3 Tage, und irgendein cleverer Programmierer hat einen Builder gemacht, bei dem man sich sein Wunschdiagramm zusammenklicken und mitnehmen kann! Wer natürlich ständig mit dynamischen Daten zu tun hat, kann sich auch tiefer in die API einarbeiten, um sie mit seinem Programmcode in Einklang zu bringen. Eine schöne Sache. Bleibt nur die Frage offen, wie komplex die Daten werden können, denn unbegrenzt lang kann eine URL ja nicht sein, oder?

(via Michael Preidel)

Der zweite neue Weg, um an schöne Diagramme zu kommen, heißt flot und ist ein jQuery-Plugin, dass die Canvas-Technik) verwendet, sie aber für den Web-Entwickler endlich bedienbar macht. Canvas per Hand schreiben ist wirklich kein Spaß. Es mit Unterstützung einer Bibliothek zu tun, ist cool. Ich habe gerade leider keine Zeit, das hier im Blog auszuprobieren. Sehr löblich ist auf jeden Fall, dass daran gedacht wurde, dass der Internet Explorer eigentlich gar keine Canvas kann. Macht nichts, denn Google hat dafür ein Script geschrieben, um genau diesen Mangel zu kompensieren. Dieses Script liegt dem flot-Paket bei und kann per Conditional Comment eingebunden werden.

Darüber hinaus besteht natürlich immer noch die prinzipielle Möglichkeit, Diagramme mittels SVG zu realisieren. Immerhin beherrschen bis auf IE6 nun alle relevanten Browser diese feine W3C-Standard-Technik. Aber SVG ist immer noch so ein Thema für sich, das eigentlich (wie etwa alle zwei Jahre) mal einer ausführlichen Status-Quo-Betrachtung unterzogen werden müsste. Jemand Lust, einen Artikel zu schreiben?

10 Kommentare

Stefan

Ein Artikel zum Thema SVG kann ich dir leider nicht liefern. Aber einen ganz netten Praxiseinsatz von SGV Diagramm-Generierung kann man wohl auf der Lastgraph Seite bestaunen. Der Service dieses Angebots ist, ein Last.fm Profil in einen Graphen umzuwandeln. Ein ganz cooles Tool wie ich finde.

Gery

Die kostenpflichtige Alternative ist FusionCharts, kann ich aus eigener Erfahrung empfehlen.

http://www.fusioncharts.com/LiveDemos.asp?gMenuItemId=4

lg>gery

Dominik Lenk

Ist ja alles sehr schön, doch am Ende des Tages hat Google Zugriff zu jede Menge Daten, die es eigentlich nichts angeht. (Besonderes wenn Firmen die API für finanzielle Informationen im Intranet benutzten würden.)
Last uns die Diskussion um Big Brother doch noch einmal aufrollen;-)

Gernot

Das schöne ist ja, dass eine URL praktisch unbegrenzt lang sein kann. Diese iPhone-Applikation für die Wikipedia zum Beispiel kodiert zum Offline-Speichern eine gesamte Wikipediaseite mit Base64 in die URL. Weil man ausser Bookmarks (noch) nix speichern kann auf dem Telefon …

Eric Eggert

Und dann gibt es noch die neuen YUI Charts, die zumindest eine nette Datenübergabe per JS vorsehen. Nachteil: Wer kein JS hat sieht auch die Flash-Grafiken nicht.

Harald

Ich kann mir vorstellen, dass Diagramme wesentlich häufiger in CMS-Backends eingesetzt werden können. Und da macht es doch eher weniger aus, wenn der IE nicht unterstützt wird – bis auf ein paar Content-Eingabe-Basics ;-)

SVG halte ich nach wie vor für das zur Zeit beste Format, um dynamische Daten grafisch umzusetzen. Mit etwas Ãœbung bekommt das jeder hin, der etwas Ahnung von PHP und XML hat. Es gibt für die Vorlagen ja auch noch Inkscape kostenlos im Netz.

Das letzte Mal, wo ich mich intensiver mit SVG beschäftigt habe, ist schon über ein Jahr her. Aber ich bezweifel, dass sich seitdem viel getan hat. Es gab immer noch Druckprobleme, unterschiedliches Verhalte in den Browser und Plugins und diverse fehlende Features.

A. Nonymous

Und warum nimmt man nicht einfach gnuplot?

Leser

Der IE7 unterstützt SVG ebenso wenig wie der IE6. Firefox 2 kennt vielleicht 2/3 der Möglichkeiten, lediglich Opera und Safari arbeiten ernsthaft an Verbesserungen in diesem Bereich. FF3 Beta enttäuscht auch noch ziemlich — wenig Neues (bzw. Altes, SVG 1.0 stammt von 2001!) und es treten komplette Systemabstürze bei der Nutzung von Filtern auf  …

Simon Reinhardt

Es gibt beim Google Chart API wohl Problemchen mit negativen Zahlen, die man durch Tricksen aber umgehen kann, siehe Google Chart API, Google Chart API Revisited und Negative numbers in the Google Chart API.

Zu der Beschränkung von URL-Längen: in der HTTP-Spezifikation gibt es keine. Früher hat diverse Software glaub ich nur mit maximal 256 Zeichen gearbeitet, die Zeiten sind aber schon länger vorbei. Zu den Beschränkungen, auf die man heutzutage in Software trifft, siehe WWW FAQs: What is the maximum length of a URL?.

script3r

Sehr sehr geeky aber verdammt cool  …

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.