Draw a scalable timeline with scrollbars on an Html5 canvas

Question

I need a time string for my web project. Something like this - I read the code for this time line, but did not understand it, because it is not well documented.

My problem is the math behind all this (not interaction with the canvas).
I have read several articles on the mathematics of scrollbars, but not one of them talks about scaling.
Some articles suggest holding a canvas element with a very large width value - and displaying only Port View .
I do not think this is the right way - I want to draw only the correct viewport.

In my project, I have an array of n points.
Each point contains a time value presented in seconds, but not all points are within the Viewp port.

Given the current zoom level, how do I calculate:

What points do you need to draw and where to draw them? What is the size and position of the thumb? Any articles / tutorials on such a thing?

Answer 1

You might be able to use something like Flot , which handles the placement of points, as well as zooming and panning. Here is an example .

There are many other drawing libraries, here is a good list .

Answer 2

You always have Raphealjs.com, one of the most commonly used libraries for working with SVG, with this you can write your own js to create a timeline.