Synchronize timelines of two Gantt Chart

[RAKOTONINDRINA MAMY]

Hello,

I have two Gantt Charts :

I want the timelines of the two charts always stay the same : if I zoomOut, zoomIn or zoomToFit the first chart, the zoom level and the timeline change. Then it also automatically updates the zoom level and the timeline of the second chart.

Any idea to achive this behavior?

Thanks in advance.

Mamy

[Gopinath Muniraj]

Hi Mamy, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We achieved this requirement through a workaround solution. We can maintain the zooming actions of the second Gantt based on actions performing in the first Gantt using the toolbarClick event. Please find the code snippet below, 

[app.component.html] 

<ejs-gantt id="ganttDefault" height="330px" 

            (toolbarClick)="toolbarClick($event)"> 

</ejs-gantt> 

 

[app.component.ts] 

//.. 

toolbarClick(args: any) { 

    let gantt2 = (document.getElementById("gantt") as any).ej2_instances[0]; 

    if (args.item.text == "Zoom in") { 

      gantt2.zoomIn(); 

    } else if (args.item.text == "Zoom out") { 

      gantt2.zoomOut(); 

    } else if (args.item.text == "Zoom to fit") { 

      gantt2.fitToProject(); 

    } 

} 

//.. 

 

We have prepared a sample for your reference. In this given sample, we can perform the zoom actions for the first gantt, with the toolbar items. Based the actions performed, same action will be performed for the second Gantt. Please get the sample from the below link. 

Sample: https://stackblitz.com/edit/gantts-zoom-actions?file=app.component.ts 

Please let us know if you require any further assistance on this. 

Thanks, 

Gopinath M 

[RAKOTONINDRINA MAMY]

Hello,

Thank you it works.

I have another requirement. How to implement the same behavior for scrolling. If we scroll the first chart, then the second chart is automatically scrolled. The goal is to always have the same visible timeline for both charts.

Thanks,

Mamy

[Gopinath Muniraj]

Hi Mamy, 

Yes. We achieved this requirement using a workaround solution. We can set the scroll top and scroll left value of the second Gantt based on the scroll value of the First Gantt using setScrollTop and setScrollLeft method in the actionComplete event. Please find the below code snippet, 

[app.component.html] 

<ejs-gantt id="ganttDefault" height="330px"  

        (actionComplete)="actionComplete($event)">  

</ejs-gantt> 

 

[app.component.ts] 

//.. 

actionComplete(args: any) { 

    let gantt2 = (document.getElementById("gantt") as any).ej2_instances[0]; 

    if (args.action == "VerticalScroll") { 

      gantt2.setScrollTop(args.scrollTop); 

    } 

    if (args.action == "HorizontalScroll") { 

      gantt2.ganttChartModule.scrollObject.setScrollLeft(args.scrollLeft); 

   } 

} 

//.. 

 

We have prepared a sample for your reference. Please get the sample from below link. 

Sample: https://stackblitz.com/edit/gantts-scroll?file=app.component.ts 

Please let us know if you need any further assistance on this. 

Thanks, 

Gopinath M 

[RAKOTONINDRINA MAMY]

Hello,

The scrolling works fine, thanks.

I have an issue with the command ZooToFit. Both charts have different width (different number of tasks). When I execute the command ZoomToFit, the code "gantt2.fitToProject()" is applyed to the second chart as you suggested. The problem is that the different dates of the first timeline are not vertically aligne to the second one anymore.

Is it possible to copy the timeline configuration of the wider chart and affect it to the second one after a ZoomToFit command?

Thank you.

Mamy

[Gopinath Muniraj]

Hi Mamy, 

We have analyzed your query. 

We would like to inform that, the behavior of the method fitToProject is to show all project task in available chart width 

Based on your query, we are applying fit to project method to the second Gantt, when the fitToProject method is called in the first Gantt. If the dataSource and the project start date and the end date or same for the two gantts, the timeline will be same whenever the zoom actions are applied.  

But now, you are using the different data, fitToProject method call of the second gantt will set all the tasks in the available chart width. So, the timeline configuration may be differed for two Gantts. This the default behavior of fitToProject method. 

Please let us know if you need any further details on this. 

Thanks, 

Gopinath M