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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".