HTML5 Timeline, gantt control

Question

I have a requirement to create a custom HTML5 based control which a cross between a timeline and a gantt chart:

However I cannot get a hold of a 3rd party control already on the market that would cut down some dev time. It needs to have the miniature zoomed out timeline at the top for fast navigation which when scrolled updates the main section.

Is there anything that already exists, be that open source or paid, that can handle this scenario?

Answer 1

Yes, there is. RadiantQ FlexyGantt does exactly what you want. Here is a screenshot:

You can see online demos of our gantt here . When the page loads, select FlexyGantt on the left which is what you need and has a number of "timline" samples.

Ideal for visualizing resource utilization in a timeline, also very interactive and comes with a lot of useful features.

Answer 2

It looks like something I'd start from scratch - but that's just my way, I'm a Sheridan/Infragistics casualty from the early 2000s :-)

You could try to use two gantt controls as they are both just gantts. If there's nothing good for the zoomed out timeline, draw that using canvas, it's just rectangles and a draggable on top.