Wer eine dynamische Zeitleiste mit zeitabhängigen Informationen in seine eigene Webseite einbauen möchte muss sich ab sofort nicht mehr seinen eigenen Kopf zermartern um eine anständige Lösung zu erhalten. Denn eine sehr schöne dynamische Zeitleiste, von SMILE entwickelt, kann auf die eigene Webseite mittels einer einfachen JavaScript API eingebaut werden.

Eine Zeitleiste besteht dabei aus einer oder zwei “Banden” (bands) die mit der Maus per drag und drop bewegt werden können. Dabei kann bestimmt werden ob die zwei Banden synchron zueinander laufen. Dabei ist die obere detailliertere Bande ein Ausschnitt der unteren Bande. Auf der Timeline Webseite wird dies unter “The Basics” noch einmal mit Beispiel schön verdeutlicht.

Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information.

Das Statement “it is like Google Maps for time-based information” stimmt nebem dem Scroll Verhalten auch noch im Bezug auf das Erhalten der Daten. Die Zeitleiste kann allein Clientseitig laufen, indem die Daten schon beim laden der Zeitleiste mitgeliefert werden, oder sie können, wie eben auch bei Google Maps dynamisch nachgeladen werden. Dabei können die Daten zum einen durch ein XML File (z.b. hier das Datenfile für das im Screenshot gezeigt Beispiel) geliefert werden oder zum anderen mit einer JSON Unterstützung (Beispiel hier). Beide Möglichkeiten greifen auf einen Ajax Request zurück.

Schöne Beispiele für Zeitleisten werden auch gleich mitgeliefert. Z.b.:

• Die Entstehung des Christentums (Zeiteinheit: Jahrhunderte | Datenquelle: Wikipedia)
• Das Leben des Claude Monet (Zeiteinheit: Jahre | Datenquelle: Wikipedia)
  
• Die Ermordung von John F. Kennedy (Zeiteinheit: Minuten | Datenquelle: fortunecity.com)

Weitere Beispiele können hier gefunden werden.

Wie schon erwähnt kann eine solche Zeitleiste sehr einfach in die eigene Seite eingebunden werden. Ähnlich wie bei Google Maps reicht schon weniger JavaScript Code um die Zeitleiste anzuzeigen, wie auch die Einführung “How to Create Timelines” zeigt. Für eine weitere Einführung sowie der API Beschreibung sei auf die Dokumentation von SMILE Timeline verwiesen.

Die ersten Schritte, wie in “How to Create Timelines” beschrieben, habe ich eben selbst getestet und habe auch ohne weitere Probleme oder darüber nachdenken zu müssen ein Ergebnis in Form einer Zeitleiste gesehen. Dieses Beispiel funktionierte bei mir im IE sowie im FF. Jedenfalls werde ich dieses Widget noch weiterer ausprobieren denn der erste Eindruck ist sehr vielversprechend. Wenn etwas brauchbares dabei herauskommt werde ich hier davon berichten.