Timeline Documentation

This page serves as an entry point to the documentation of the Simile Widgets Timeline component. To reference the previous documentation hosted at MIT please refer to html or wiki. We'll try to move all existing (as of September 2nd, 2007) over by September 5th and we'll update that wiki to point here.

Timeline allows web site creators to embed interactive timelines into their sites. It requires only that visitors have Javascript enabled. It's often referred to as "Google Maps" for time.

Call for Help

We need your help to make this documentation better. If you have information or examples, please contribute.

This wiki still references images and examples from the MIT site. Almost all the content was migrated from that site. Overtime those artifacts will be migrated here as well.

Examples

• Timeline examples
• In the Wild Examples of Timeline in use around the world.

How-Tos

Getting Started

• The Basics, briefly how timelines work
• Timeline releases and access options
• How events are shown on a Timeline
• Getting started, a step by step tutorial
• Understanding Initialization - walk through of Timeline initialization and defaults
• Event Attributes and Data Formats -- Describes event attributes and how to load event sources using XML, JSON or SPARQL
• Common problems and solutions

Controlling Timeline Appearance and Behavior

• Creating Hotzones -- A Hotzone is a section of the Timeline with a different resolution, usually higher resolution. Depending on your project, an alternative is to enable mouse-wheel zooming.
• How to create and change the Themes
• Custom Event Click Handler - Using your own handler instead of showing a bubble
• Custom Detail display - Customizing the popup bubble
• Add a day label - Adding a day label with your month when your interval unit are days
• Mouse-wheel Scrolling and Zooming - Use the mouse-wheel to zoom your Timeline--an alternative to Hotzones
• Vertical Scrollbar - Adding a vertical scrollbar
• Custom Date Ranges - How to create additional date/time range units
• Moving the Timeline via Javascript
• http://www.linuxjournal.com/article/9301 -- good info on changing themes AND some good info on loading data

Timeline Client UI Ideas

The Timeline library is called by client software on your html page. Your client software can add additional User Interface (UI) features.

• Highlighting and Filtering Controls
• Multiple filter boxes
• Highlighting Weekends

Loading data

• Data stored in the Timeline file vs an external data file
• Loading external data file without a web server
• Load Events Dynamically
• use js Date() with JSON
• EditGrid - Convert an EditGrid spreadsheet to Timeline XML format
• Gnome Planner - Convert plans from the Gnome project management tool "Planner" to Timeline XML format
• Sharepoint Lists - Convert SharePoint List into Timeline XML format
• http://apassant.net/home/2006/07/rss2timeline/ - Display RSS feeds
• http://www.semanticweb.gr/SWEvents/timeline_ics.php?icsurl=http://www.semanticweb.gr/SWEvents/SWEvents.ics - Display an iCal (.ics) URL
• http://code.google.com/apis/gdata/cal_simile_sample.html Google Calendar - Display Google Calendar using JSON feed source
• http://code.google.com/p/timemap/ - Load JSON or KML onto both a google map and a timeline simultaneously

Timeline generators as a service

• http://www.mytimelines.net/ - Displays Atom, RDF and RSS feeds
• http://www.mytimelines.net/create-an-icalendar-timeline/ - Displays iCalendar files
• http://timeline.to/ - Universal Timeline Aggregator - Displays Atom and RSS feeds

Sites and Software incorporating Timelines

• TimeMap - Integrates Timeline with Google Maps
• http://mqlx.com/~david/parallax/ - search engine for freebase.org
• http://semantic-mediawiki.org/wiki/Help:Timeline_format - Semantic MediaWiki
• http://jrochelle.googlepages.com/97g-timeline-about.html Google Spreadsheet - has a timeline gadget based on Timeline
• http://www.zotero.org/documentation/timelines - Zotero Firefox extension embeds Timeline

Language or Framework Support

• http://code.google.com/p/gwtsimiletimeline/ - GWT API library to support SIMILE Timeline within the GWT framework.
• http://code.google.com/p/similetimelinerailshelper/ - Rails helper
• http://project.dahukanna.net/tiddlywiki/timeline/sampletimeline220b5.html - TiddlyWiki Integration
• http://www.zkoss.org/smalltalks/timeline1/timeline1.dsp - integrated into ZK OOS
• http://bakery.cakephp.org/articles/view/timeline-helper - integration with the CakePHP framework
• Wordpress plugin by freshlabs
• Drupal module

API

• Timelines
• Bands
• Ether
• Ether Painters
• Decorators
• Event Sources
• Event Painters
• Layouts
• Themes
• Labellers

Guidelines

• How to update the Timeline software
• Accessibility Guidelines
• Usability Guidelines

Similar Tools

• The Historical Event Markup and Linking Project http://www.heml.org generates SVG timelines, maps and animated maps from documents conforming to its XML markup language for historical events. The markup language, defined in XML Schemas http://heml.mta.ca/Schemas/2003-09-17/heml.xsd, associates events with persons, locations, and keywords, employs multiple calendrical schemes and is multilingual. There is a Heml xhtml language available, too. The project's past five years of development are recorded in its SVN server http://heml.mta.ca/viewsvn/?do=browse&project=heml_svn&path=/. RDF/Heml ideas were presented at the WWW2006 conference http://www2006.org/programme/files/xhtml/p199/pp199-robertson-xhtml.html.

• LongView, a project of the The Long Now Foundation, is a server side python script for generating HTML timelines from simple datafiles of comma separated values. It requires Python version 2.3. For generating its graphical elements, LongView also depends on the python GD module, which itself depends on Thomas Boutell's GD library (linked to from the python GD module home page). Biotechnology Milestones 08000BC - 02022 is an example of LongView in use. Detailed instructions for installation and use are to be found at http://www.longnow.org/about/LongViewReadMe.php.

• WikiTimeLine a WikiMedia extension. See an example WikiTimeScale.org

If you have questions, please use the mailing list. Comments posted here are NOT read