Grafikdarstellung im Web

Diagramme ohne Grafikprogramm mit Google Charts API

Sie liefern Zahlen, die Google Charts API malt die Diagramme dazu. Wir verraten, welche Charts es gibt und wie Sie diese schon mit einem einfachen <img>-Tag erzeugen.

image.jpg

© Internet Magazin

Der Spruch vom Bild, das mehr als tausend Worte sagt, ist nur deshalb eine Binsenweisheit geworden, weil er stimmt. Wer mag sich schon freiwillig in endlose Zahlenkolonnen einlesen, wenn ein Schaubild viel schneller zeigt, wie der Hase läuft?So ähnlich müssen auch die Gedankengänge bei Google gewesen sein, als man die Charts API entwickelte. Wie im Google- Kosmos üblich ist auch diese Anwendung gratis. Außerdem lässt sie sich sehr leicht bedienen. Im einfachsten Fall reicht es, ein <img>-Tag in die eigene Website einzufügen.Dabei wird die im src-Attribut übergebene URL so gestaltet, dass Google Charts API weiß, wie das Diagramm zu zeichnen ist. Wer die URL dynamisch generiert, beispielsweise mithilfe von PHP und einer My-SQL-Datenbank, der kann auf diese Weise Charts erzeugen, die sich aufgrund von Benutzereingaben automatisch ändern - ganz ohne Grafikprogramm und Bild-Upload. Zu Beginn ein einfaches Beispiel.

Hallo, Tortendiagramm

Öffnen Sie Ihren Text-Editor und legen Sie die Grundstruktur einer HTML-Seite an, bestehend aus Doctype sowie , und . Dann fügen Sie im body folgenden Code hinzu, den wir in Anlehnung an ein Beispiel auf der Charts-API-Website entwickelt haben:

<img src="http://chart.apis.google.
com/chart?cht=p3&chd=t:60,40&chs=250x
100&chl=Hallo|Welt">

Speichern Sie die Datei ab und laden Sie sie in den Browser. Zeigt dieser das Tortendiagramm aus dem Bild unten, haben Sie alles richtig gemacht.

image.jpg

© Internet Magazin

Aus einem schlichten <img>- Tag wird mithilfe von Google Charts API ein solches, automatisch generiertes Tortendiagramm.

Nehmen wir Zeichenkette für src einmal auseinander. Links vom ? finden Sie die Adresse, unter der die Charts API erreichbar ist. Dieser Teil bleibt immer unverändert. Danach finden Sie die Parameter cht, chd, chs und chl. Diesen ist gemein, dass jeweils ein =-Zeichen dahintersteht, gefolgt vom Wert für den jeweiligen Parameter.Mehrere aufeinander folgende Parameter werden durch ein &-Zeichen von einander abgetrennt. Eine Besonderheit weist der Wert für den Parameter chl auf. Die Worte "Hallo" und "Welt" sind durch eine Pipe ("|") voneinander getrennt. Dieses Symbol tippen Sie auf der Tastatur, indem Sie + <<> drücken.

Pflicht-Parameter

Wer sich das Beispiel genauer ansieht, der kann die eine oder andere Bedeutung der in die URL codierten Parameter bereits erraten. Der Parameter cht legt den Diagrammtyp fest, in unserem Fall ein dreidimensionales Tortendiagramm. Eine vollständige Liste aller Diagramme finden Sie unter bit.ly/auTgDA .Der Parameter chd gibt die Größen der einzelnen Tortenstücke in Prozent kommasepariert vor. Mittels chs legen Sie die Kantenlänge der fertigen Grafik fest (250 Pixel breit, 100 Pixel hoch). chl gibt die Beschriftung der Tortenstücke vor. cht, chs und chd sind Pflichtprogramm beim Erzeugen eines Charts, alle anderen Parameter optional.Um dem Beispiel weitere Tortenstücke hinzuzufügen, würden Sie wie folgt vorgehen: Als Erstes verkleinern Sie die Werte ("60" bzw. "40") für die beiden vorhandenen Stücke, sodass Raum für ein weiteres Stück entsteht. Dann fügen Sie dem Parameter chd einen dritten Wert hinzu. Außerdem sollten Sie die Beschriftung chl um einen dritten Wert ergänzen.Grundsätzlich haben Sie damit schon das gesamte Prinzip der Charts API kennengelernt. In der Praxis ist aber oft etwas Experimentierfreude gefragt, bis ein Chart genauso aussieht, wie man ihn sich wünscht. Deswegen stellen wir Ihnen nachfolgend einige der wichtigsten Diagramm-Varianten mit ihren Funktionen vor.

Liniendiagramm

Hier wollen wir uns an einem etwas komplizierteren Beispiel versuchen. Ein Vermögensberater bietet seinen Kunden drei unterschiedliche Anlagestrategien an. Auf seiner Website möchte er mit Charts API die Wertentwicklung der drei Strategien visualisieren. Daraus ergeben sich die folgenden Anforderungen:

  1. Es sind drei verschiedene Linien in dasselbe Diagramm zu zeichnen.
  2. Es soll eine Legende geben, die die verschiedenen Linien erklärt.
  3. Die X-Achse wird mit den Monaten von Januar bis Dezember beschriftet.
  4. Die Y-Achse wird von 0 bis 20 (Prozent) in Zweierschritten beschriftet. Wir unterstellen etwas vereinfachend, dass es keine negative Wertentwicklung gibt.
  5. Die Lesbarkeit wird durch Gitterlinien optimiert.
  6. Der Chart erhält eine Überschrift. Tatsächlich sind zur Zielerreichung nicht mehr als 14 Zeilen Code notwendig:

<img src="http://chart.apis.google.
com/chart
?cht=lc&amp;chd=t:1,1,2,3,4,5,6,18,8,9,10,8,
12|1,1,2,3,4,5,4,3,2,1,2,3,4|1,1,3,4,
6,12,11,9,8.5,1,2,3,4&amp;chds=0,20&amp;chxr=0,0,12,1|1,0,20,2&amp;chxt=x,y&amp;chxl=0:|+|Jan|Feb|Maer|Apr|Mai|
Jun|Jul|Aug|Sep|Okt|Nov|Dez&amp;chg=8.333333,25&amp;chtt=Performance+
Beispieldepots&amp;chdl=Sicherheit|
Konservativ|Chance&amp;chdlp=b&amp;chco=0000FF,
FF9900,E63436&amp;chs=480x360
">

Die erste Zeile enthält den Aufruf der Charts API. In Zeile 2 wird der Diagrammtyp ausgewählt, wobei der Wert lc für Line Chart steht (Liniendiagramm). In Zeile 3 folgen die Werte für die drei Linien, die per Pipe voneinander abgegrenzt werden.

Beschriften und Skalieren

Der Parameter chds lässt Charts API die minimalen und maximalen Werte der Kurven wissen. Er ist wichtig, damit das Diagramm korrekt skaliert wird. Die eigentliche Skalierung besorgt aber erst chxr. Wie Sie an der Pipe erkennen, enthält auch dieser Parameter zwei Gruppen von Werten. Beide sind nach dem Schema

<Achsen-Index>,<Start-Wert>,<End-Wert>,<Schrittweite>

aufgebaut. Der Achsen-Index der X-Achse ist Null, der der Y-Achse 1. Beide Achsen beginnen bei 0, wobei die X-Achse bis 12 reicht und in Einerschritten (für die Monate) zu beschriften ist. Die Y-Achse reicht bis 26. Dass die beschrifteten Achsen überhaupt erscheinen, das stellt chxt in Zeile 6 sicher.

image.jpg

© Internet Magazin

Fertig: Das Liniendiagramm unseres virtuellen Vermögensberaters reizt viele Möglichkeiten der Charts API aus.

Ohne weitere Angaben beschriftet Charts API die Achsen einfach mit den entsprechenden Zahlenwerten. Auf der Y-Achse sollen aber die Namen der Monate stehen. Deswegen überschreiben wir die automatische Beschriftung mithilfe von chxl mit unserer eigenen Beschriftung. Unmittelbar nach dem Gleichzeichen finden Sie wieder den Achsen-Index der zu beschriftenden Achse. Durch das Plus-Zeichen sorgen wir dafür, dass der Wert Null auf der X-Achse nicht beschriftet wird.Mittels chg definieren wir den Abstand der Gitterlinien im Hintergrund, zuerst entlang der X- und dann entlang der Y-Achse. Den Wert von 8.333 erhalten Sie, wenn Sie 100 (entspricht der gesamten Achse) durch 12 (die Zahl der Monate) teilen. So landet jeder senkrechte Strich automatisch beim zugehörigen Monat. Die waagerechten Linien haben wir willkürlich im Abstand von je einem Viertel (25) der Achse platziert.Mit den Parametern chtt und chdl erzeugen wir die Chart-Überschrift und die Legende. Durch chdlp landet Letztere unter dem Diagramm (b steht hier für bottom). Zum Schluss geben wir den Linien noch etwas Farbe, indem wir chco die gewünschten Farben in hexadezimaler Form übergeben. Außerdem teilen wir Charts API wiederum per chs die Größe mit, in der wir die Grafik wünschen.

Besondere Charts

Unter den zahlreichen Chart- Formen gibt es einige, die besonders herausstechen. Allen voran ist hier der Map Chart zu nennen. Hier können Sie beliebigen Ländern oder Regionen statische Werte zuordnen. Chart API erstellt dann eine bis zu 600 x 600 Pixel große Landkarte, in der die Gebiete farbig hervorgehoben und die Werte eingezeichnet sind.Interessant ist auch die Möglichkeit, Diagramme mit Icons zu dekorieren. Die Charts- API-Dokumentation enthält unter bit.ly/a9gmSD einen ausführlichen Abschnitt, in dem Google erläutert, wie Sie frei definierbare, grafische Symbole in Ihren Diagrammen platzieren können.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…