Zeitleisten für die eigene Website mit Google Charts
Kommentare

Visuelle Hingucker fangen die Aufmerksamkeit eines Website-Besuchers meist besser ein, als die simple Darstellung in einer Tabelle. Gerade, wenn man viele verschiedene Ereignisse auf seiner Seite wiedergibt, bietet sich die chronologische Darstellung in einer Zeitleiste an, um sie nicht nur übersichtlicher, sondern auch für den Leser interessanter zu gestalten. Ashraff Hathibelagal erklärt, wie man zum Beispiel mithilfe von Google Charts solche Zeitleisten zur eigenen Website hinzufügen kann.

Implementierung einer Zeitleiste mit Google Charts

Für die Implementierung einer Zeitleiste in die eigene Website wird zunächst Google Charts mit dem Google-API-Loader in den Seitenheader geladen und das Visualization-API zusammen mit dem timeline-Paket des APIs abgerufen. Da das Charts-API ein HTML-Element zum Abrufen seiner Charts benötigt, wird ein div-Element hinzugefügt und die Breite und Höhe der Zeitleiste darin definiert.

Die abzubildenden Ereignisse werden als DataTable eingefügt und können dann als Instanz der Timeline-Klasse abgerufen werden. Anschließend kann das Aussehen der Zeitleiste mithilfe eines JSON-Objekts beliebig angepasst werden – zum Beispiel die Hintergrund- und Schriftfarbe sowie die Anordnung der einzelnen Ereignisse in der Zeitleiste.

fertige Zeitleiste mit Google Charts

Screenshot: fertige Zeitleiste mit Google Charts

Zudem können die einzelnen Ereignisse mit interaktiven Elementen versehen werden, die zum Beispiel bei einem Klick-Event zusätzliche Informationen anzeigen. Wie man dafür bei der Implementierung von Zeitleisten mit Google Charts vorgehen sollte, zeigt Ashraff Hathibelagals Tutorial zum Thema. Dort finden sich zudem auch einige Code-Beispiele und Demos; mehr Informationen zur Nutzung von Timelines findet sich in der Google-Charts-Dokumentation.

Aufmacherbild: timeline concept – blank colorful sticky notes along thick white chalk arrow on blackboard with copy space von Shutterstock / Urheberrecht: marekuliasz

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -