Welcome to the chronoline.js demo page. chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more. Below are 3 examples with events from the 2012 MLB Regular Season.
Monthly Timeline
This day-by-day timeline shows off a few features. The events are automatically stacked compactly when they overlap, whether over a single point or a range. Notice how the month labels stick to the edges when you scroll forward and past the first day of the month.
Quarterly Timeline
Timelines can appear on different scales simply by plugging in one of a few existing defaults or by providing custom functions for it. Additionally, there are different options for how you want (or don't want) to highlight today on the timeline. If qtip is used, events also have tooltips.
This timeline also has dragging enabled, so click, hold, and drag to try that out.
Yearly Timeline
Even at a very large scope, chronoline.js still functions. Events are stacked differently because there isn't enough space to place them adjacently anymore.
You can zoom in and out on the timeline. And if you didn't notice, the left and right arrows support both single clicks for discrete jumps and click-and-hold to scroll continuously.
Support
I mostly don't know what versions of various components are required. So far, I have used:
- raphael.js: 2.1.0
- jQuery: 1.7.2
- qTip2: 2.0.1
Browser support is:
- Internet Explorer 8+
- Firefox 12+
- Chrome 18+