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 - Google Docs - Anleitung 3 Code generieren
Google Docs
Anleitung 3 Code generieren

Einfügecode aus Google Docs generieren

Kommen wir nun zum abshließenden Teil dieses kleinen Tutorials: es muss ein HTML-Code generiert werden, mit dem die Chart-Grafik in die Webseite eingefügt werden kann.

Dazu klickt man zunächst in die Chartgrafik und dann auf das kleine Dreieck rechts oben. In dem Kontextmenü, dass daraufhin erscheint, klickt man auf Diagramm veröffentlichen.

Bild "Google Docs:veroeffentlichen-01.jpg"

Google Docs bietet zwei unterschiedeliche Möglichkeiten an, eine Chartgrafik zu veröffentlichen:

  • als Bild
  • als interkatives Diagramm

Als Bild

Bei Auswahl dieser Option wird ein relativ kurzer HTML-Code erzeugt, der mit dem img-Tag beginnt.

Bild "Google Docs:veroeffentlichen-02.jpg"

Ein Beispielbild sieht dann so aus:


Man kann dem Code noch die bei einem img-Tag üblichen Zusätze hinzufügen

Wenn man in der Google Tabelle Zahlenwerte oder Angaben zum Aussehen der Grafik verändert, werden diese auch beim Aufruf der Grafik (z.B. auf dieser Website) angepasst und übernommen.

Als interkatives Diagramm

Bei dieser Option ist der Code, der bereitgestellt wird sehr viel umfangreicher. Beim näheren Hinsehen erkennt man, das er sich aus mehreren Einzelbestandteilen zusammensetzt:

  • Aufruf einer Google JavaScript Api Bibliothek
  • Bezug zur Google Docs Tabelle
  • Einzelnen Paramtern, mit denen die Erscheinungsform der Grafik festgelegt wird
Bild "Google Docs:veroeffentlichen-03.jpg"

Die Beispielgrafik sieht dann so aus: