Synchronizing two gantt charts

Gantt
#1

Hi,

I am looking to have two Gantt Charts, one below the other with different data. However, I would like their timescales to be synchronized. What can be the best way to achieve this?

#2

Hello,
it depends on how do you work with a timescales in your charts, it’s hard to tell without details.
If you specify date range explicitly with ability to select displayed range - you can simply apply it to both calendars.
If the scale range should be calculated automatically based on a tasks range, you can adjust it via public API -
each time before one of gantt is redrawn, you check the date range of both (by selecting the time range of tasks loaded in each gantt), and set the combined date range to to gantt.config.start_date/end_date for all calendars.

docs.dhtmlx.com/gantt/api__gantt … onfig.html
docs.dhtmlx.com/gantt/api__gantt … event.html
docs.dhtmlx.com/gantt/api__gantt … dates.html

#3

Hi,

Thank you for your reply. The top scale has to be generated automatically based on the tasks range.

Here is an example: http://imgur.com/ImzmMjF

If a task on the top gantt is selected, it will send a request and populate the costs for that task in the gantt below. The scales of both the charts should be synchronized irrespective of the size of the tasks in any of the charts. I was also thinking of synchronizing the scrolling.

I was thinking of using OnBeforeGanttRender on the second chart and get the values of the top chart before rendering. Is this the right approach?

#4

Yes, using onBeforeGanttRender seems to be a good approach, at least I would start from it,
the displayed scale range can be also retrieved using gantt.getState docs.dhtmlx.com/gantt/api__gantt_getstate.html

Also, the scrolling does not provide any public events, but you can listen to onscroll event of the related DOM elements. Try attaching event listener to gantt.$task

#5

Hi Aliaksandr,

A combination of your solutions worked perfectly for my needs. Thank you for your help.

#6

Hi,

I’ve tried using the scroll event but sometimes the dates are not aligned in both gantt. After checking on the api, they have gantt.getScrollState() which returns the exact x position of the gantt. You can check this snippet: https://snippet.dhtmlx.com/e2sct82p