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.
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: 04/24/12 nightly
Browser support is:
- Internet Explorer 8+ (except the tooltips)
- Firefox 12+
- Chrome 18+
Credits
- Built by and for Zanbato. Ping us if you're interested in working with us!
- Developed by Kevin Leung
- Designed by Deny Khoung
- Additional help from Dan Settel and Brandon Kwock