JavaScript library that presents an interactive timeline with disproportionate axis' values?

Question

I need to implement a timeline view in an iOS application. I'm planning to use a JavaScript component nested in a web view since I figure it would be better than drawing the timeline natively. I found this libraries so far:

http://visjs.org/docs/timeline.html
https://almende.github.io/chap-links-library/timeline.html

They look quite nice and it looks promising that any of them would do most of the required work. But I have one specific requirement that I couldn't find in any timeline library:

The time axis' values should be disproportionate (the time values near the center need to be more spread than the values near the ends of the timeline's current view).

http://oi61.tinypic.com/2hg70ib.jpg
You can see on the image that the years on the axis are far from equally spaced.

Does anyone know any JavaScript library or even better - an iOS native one or has any modification to an existing library that offers this type of functionality?

Answer 1

Using the Timeline of chap-links-library, you could easily override the linear functions Timeline.screenToTime and Timeline.timeToScreen (and possibly Timeline.recalcConversion) with your own non-linear function (like wrapping with x^2 around the center of the window). See the code here: https://github.com/almende/chap-links-library/blob/master/js/src/timeline/timeline.js#L2506-L2542

Note that there is a successor of the chap-links-library: vis.js. In this library, you would have to override the DateUtil.toScreen and DateUtil.toTime functions: https://github.com/almende/vis/blob/master/lib/timeline/DateUtil.js#L275-L324