The Bakery Everything CakePHP

Background

We often need to display time based data, but just listing a table of dates and times doesn't give the user any real understanding of duration or the relationship between points in time. Using the Timeline widget you can get an immediate feeling for a series of events and how they relate.

What it does

Timeline helper gives you a way to present time based data in an easy to use and fully interactive way using only javascript and a single ajax call per dataset.

Example timelines

http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/examples/index.html

Basic concepts

A timeline contains one or more bands, which can be panned infinitely by dragging with the mouse pointer. A band can be configured to synchronize with another band such that panning one band also scrolls the other.

A timeline is implemented as a div element that contains inner div elements as its bands. The band divs are cropped and positioned relative to the timeline div.

A band div itself contains several inner elements that implements various parts of the band. For example, the two timelines above show labels for days, weeks, months, and years. The bands also have different background colors, and the weekly band of the second timeline has weekend markings. All of these visual elements are "painted" by adding HTML elements to the band divs at the appropriate positions.

As a band is panned, its div is shifted horizontally or vertically, carrying all of its visual elements along. When either end of the band div approaches the visible (non-cropped) area, the band div is re-centered, its coordinate origin is changed, and then its various visual elements are re-"painted" relative to the new coordinate origin. All of this "paging" is done as seamlessly as possible so that the user experiences smooth, infinite panning.

More documentation for Timeline widget

http://code.google.com/p/simile-widgets/wiki/Timeline

To do

The vendor supports themes for defining how the timeline is displayed and partially how it functions, but the api for doing this is far from optimal and is quite tricky to wrap in php. We would really like to support themes in the future, if anyone wants to help let us know!