201221Aug

Chronoline.js: Horizontale Zeitleiste für Ereignisse

Um interaktive Zeitleisten auf einer Website einzubinden, eignen sich bestehende Lösungen wie das jQuery-Skript Timeline oder der Timeglider. Wer es etwas kompakter mag, dem könnte Chronoline.js zusagen: Das Skript erzeugt aus bestehenden Daten eine horizontale Zeitleiste, die nach links und rechts bewegt werden kann.

Chronoline.js

Die einzelnen Events werden dabei als Balken dargestellt, die über einen jeweiligen Tooltip anzeigen, worum es sich bei dem Ereignis handelt. Mehrere, sich überlappende Ereignisse werden vertikal gestapelt. Die Zeitleiste lässt sich über Schaltflächen am Rand oder wahlweise auch per Mausbewegung verschieben. Das Skript verwendet neben jQuery noch die Bibliotheken Raphaël und qTip2.