Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31

Warning: htmlspecialchars() [function.htmlspecialchars]: charset `CHARSET' not supported, assuming utf-8 in /users/bpgs/www/bbclone/lib/io.php on line 31
Möglichkeiten der Datenvisualisierung - Image Charts - Erste Schritte
Image Charts
Erste Schritte

Erste Schritte mit Image Charts

Wie bereits beschrieben, sind für die Anwendung von Google Image Charts keinerlei JavaScript- oder andere Spezialkenntnisse erforderlich. Der Code zum Einfügen eines Image Chart Objektes (Beispiel von der Startseite: Inhaltsseite "" in der Kategorie "" nicht vorhanden) sieht so aus:

<img alt="Beispiel" src="http://chart.apis.google.com/chart?cht=p3&chs=200x100&chd=t:90,80,150&chdl=Auto|Bus|Bahn" />

In einem Image-Tag wird als Quelle nicht der Verweis zu einer Grafikdatei angegeben, sondern der Link zur Google Chart Api, gefolgt von diversen Parametern. Dabei ist der erste Teil, also:

http://chart.apis.google.com/chart?

immer gleich. Ich werde daher in den Beispielen auf diesen Seiten immer nur den Parameterteil darstellen, da dieser ohnehin oft sehr lang ist.

Grundparamter

Bei einem Aufruf der Chart-Api können eine Vielzahl von Paramtern übergeben werden, es gibt allerdings eine Minimalstruktur. Sie sieht so aus:

  • cht= gibt den Charttyp an, im obigen Beispiel steht p3 für eine dreidimensionale Tortengrafik
  • chs= gibt die Abmessungen der Grafik an, im Beispiel oben steht 200x100 für eine Breite von 200 Pixeln und eine Höhe von 100 Pixeln.
  • chd= gibt die zu visualisierenden Daten an, in dem Beispiel oben sind das t:90,80,150. Die einzelnen Angaben werden durch ein Komma voneinander getrennt. D.h. Kommawerte müssen in der Punktschreibweise angegeben werden
  • chdl= steht für Datenbezeichner, also die Texte zu den Werten, oben angegeben mit Auto|Bus|Bahn. Die einzelnen Angaben werden durch einen senkrechten Strich getrennt.