Welcome.

Timeglider JS is a zooming, panning data-driven timeline widget written in Javascript— great for history projects, project planning, and more.

Case Study: Cancer Research UK

Having just completed ten years of groundbreaking cancer research, the team at Cancer Research UK decided to create a timeline to explore the milestones of their work. Check it out here.

Timelines can be zoomed by dragging the vertical slider at right: up for zooming in (less time shown) and down for zooming out (more time shown). The mousewheel also works as a zoom controller. Any white area on the "stage" of the timeline can be dragged left and right, as can the blue "ruler" which marks out different units of time. Clicking on an event brings up a small modal window with a description and links if any are provided in the data.

This javascript component version has a few goals:

• Functionality on iPads and other touch-enabled devices.
• Easy integration into HTML/JS-based applications and interfaces.
• Complex layout possibilities with customized blocks of HTML for any given event.

A larger demo (more events, wider layout) is here.

In addition to being loaded from a JSON file (or JSON-formatted PHP, etc), Timeglider timelines can load directly from data you provide in an HTML table. See how to load data from an HTML table here.

Please read about our license, as it has changed recently (as of Sept. 1, 2011).

You can help improve the code by jumping in, finding bugs, doing pull requests, and providing general feedback.