danielgwood / jquery-timeline Goto Github PK

A timeline display widget based on HTML5 Canvas and jQuery.

JavaScript 100.00%

jquery-timeline's Introduction

This jQuery plugin uses the Canvas drawing API introduced in HTML5 to render timeline widgets. The idea is to take some dull input data, such as a table of dates, and transform this into a rich, interactive element with minimal effort.

Features include:
 * Supports periods as well as events
 * Scale to years, decades, centuries, milliennia
 * Scroll by keyboard, mouse regions, custom events
 * Support for custom event handlers
 * Customisable appearance and style
For an exhaustive list, check the wiki.

jquery-timeline's People

Contributors

Stargazers

Watchers

Forkers

siberianbear chris1201

jquery-timeline's Issues

Setting to restrict viewer to date range

Further to issue #4, should also add a setting to restrict scrolling to within a certain date range, so that implementors wishing to create a timeline for the period 1900 - 2000 for example, can prevent viewers scrolling to 1630.

More flexible data sources

Currently the only supported data source is HTML table elements on the current page, obeying a fairly strict format.

Change this to be the default behaviour, whilst allowing a jQuery extend property to define your own data source loader via a function or two.

Implement some of these as test-cases and demos, including one which operates from some sort of XML feed.

Finish the event and period onClick handlers

Currently clicking on an event just causes a javascript alert.

This needs to be an extensible function that provides all of the known data for the event, so that implementors can do something more interesting with the handler (maybe navigate to a page, change something on the current page outside the timeline widget, etc).

Add test-case/demo for this also.

Finish the full demo "History of Invention"

See index.html in root. Needs events prior to 100 AD and post 1800 to be added to give a more full test case.

Fully implement temporalAlign

temporalAlign setting is supposed to define the starting point of the timeline when it is first rendered. Options should include:

Beginning: Start at the first (chronological) event, or the start of the period scrolling has been restricted to, whichever is earliest.
Middle: Start in the middle of the period defined by restricted scrolling, or the first and last chronological events.
Most-populous: Start in the period of the timeline with the most events (Could be defined as the average timestamp).
End: Start at the last (chronological) event, or the end of the period scrolling has been restricted to, whichever is latest.

Support events with durations

Currently there is only support for events (something that happens at datetime X), and periods (a section of time between datetime Y and datetime Z).

There is also a third type that needs to be supported - an event which starts at datetime A, and ends later at datetime B. This needs to be displayed in the main timeline rather than on the period bar.

Example use cases:

Events with no certain date, but which are considered to have happened between X and Y.

Allow events & periods before 100 AD / CE

Due to restrictions with the current date parser, dates before 100 AD are currently impossible to render.

Need to work out how to render events and periods before 100 AD, and before 0 AD (preferably with no restriction on how far back you can go..)

Rescaling / zooming should focus on the mid-point

When zooming in/out (rescaling), the new level of zoom should be focused around the mid-point of the previous render.

So, if you are in decade-level zoom, with 1805 in the centre, and zoom out, 1805 should remain in the centre, rather than the current behaviour (the start of the previous render). This would make it much less disorientating.

Print stylesheets

Suitable print stylesheets for the default demos need to be developed and tested.

Scroll/zoom to date function

It should be possible to call showDate() on a timeline, which would scroll to the date provided (assuming it is permitted within the options the implementor has defined. Add a zoom level property, which if different to the current zoom level, adjusts this also.

Scrolling to years before 0 AD/BCE causes a minus symbol to display

Years less than 0 are displayed as negative.

Remove the - symbol, and add a display toggle for BCE / CE (allow customisation of this to support BC/AD)

Test events & periods in the future

Some of the more novelty uses of the timeline may include future dates, perhaps even far future dates. Test with dates:

A hundred years into the future
A thousand years into the future
A hundred thousand years into the future

And so on. Add a demo/test-case for this.

Prevent scrolling to future years by default

Scrolling past the current year should be prevented by default (add a setting to permit this if the user chooses)

Mobile devices implementations

Find a way to support mobile devices, from phone size up to tablet size, with appropriate fallbacks to mobile css.

Probably means keyboard shortcuts are out of the question, a smaller screen area to work with, some devices may be more suited to vertical display than horizontal.. etc.

Implement theming

Options/settings for reskinning the timeline's appearance - colours, text styles, perhaps sizes/widths of lines.

Create a few basic themes to demonstrate how this works, and provide test cases.

Refactor entities to objects

Create objects for events, periods etc, and refactor accordingly.

This should result in some speed increases, and will make code a little more readable and hopefully more robust.

Selective event-loading via AJAX

Further to issue #14, add a demo and support for loading events by AJAX, according to the current display of the timeline.

So, whilst the current demos all load every single event and period at once, and simply don't render those that are outside the current view, this demo should only load those it currently needs - think Google Maps tile loader (intelligently loading some events that are not yet needed but likely to be, since they are just outside of the current render)

Should mean larger datasets can be supported without slowing down renders.

"Zoom level" mini-widget

Add an optional mini-widget to the render which displays the current zoom level, making it more obvious the viewer can zoom out.

Allow zoom in further

It should be possible to zoom in further.

The current maximum shows individual years on the date line - 1734, 1735 etc, and has 12 interval lines per section (months). This needs to be extended to support "Month" zoom: Shows 1734 January, February, March, April... on the date line (will need to be internationalised at some point), and has days per month as intervals.

This will likely require significant refactoring, since the current system is designed for an equal number of interval lines per section, such as 12 on year zoom, and multiples of 10 thereafter. Will also need to account for leap years, and consider what to do with regards to calendar systems - Gregorian vs. Julian. The current implementation is designed around Gregorian. A possible interim solution might be to restrict lower zoom levels to dates within the modern era, since more-precise dates before then tend to be limited anyway, in which case a sensible cut-off point would need to be chosen.

Fix event distribution problem

Events are currently being distributed incorrectly - some overlap horizontally, and the use of space could be more efficient.

See the main "History of Invention" demo for an example, ~1030 AD, or screenshot at: http://img201.imageshack.us/img201/728/screenshot20110207at141.png