Gantt Control with Step Line Chart

[Lívio Tonini Gouveia e Silva]

Hello,

Is it possible to have a gantt control and a step line chart combined ? Something like the image I'm attaching, that has the gantt and a red stepline graph.

Thank you!

Attachment: Example_Image1_1e1082b7.zip

[Sridevi Sivakumar]

Hi Lívio Tonini Gouveia e Silva,

Greetings from Syncfusion.

Query : Is it possible to have a gantt control and a step line chart combined
We have analysed your requirement and we have achieved it by sample level by adding the chart control with a step line on the Gantt control as per the below code snippet  

  

         

                               ItemsSource="{Binding TaskCollection}" 

                               VisualStyle="Metro"> 

... 

         

         

             

             

             

     

     

Screenshot: 

 

Please have a sample from the below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt_GettingStarted455597846

Let us know if you need any further assistance.

Regards,
Sridevi S. 

 

[Lívio Tonini Gouveia e Silva]

Thank you for the reply.

The sample is useful, but how do I "synchronize" the charts?

I need the stepline chart date axis to be "synchronized" with the GanttControl date axis. Also, there is the problem of scrolling, the gantt control I'm using is represented in weeks, similar to the one in the sample, but I need to scroll the gantt to see all the points and this scroll also needs to be "synchronized".

Another problem I see is that resing the screen, the gantt chart does not change its zoom factor, but the stepline chart does, to keep all the data in the screen.

Is there a way to sync both graphs and display the data in the correct date for both graphs even while horizontally scrolling?

Thank you!

[Sridevi Sivakumar]

Hi Lívio Tonini Gouveia e Silva,

Query : How do I "synchronize" the charts
We can synchronize charts by setting the Ganttchart StartTime and EndTime property date equal to the  step line chart data as per below code snippet 

 

[Gantt]: 

        <sync:GanttControl x:Name="Gantt"   

                           Loaded="Gantt_Loaded" UseAutoUpdateHierarchy="False" 

                           VisualStyle="Metro" StartTime="2010, 6, 2" EndTime="2010, 7, 24" 

                           ItemsSource="{Binding TaskCollection}" 

                           ResourceCollection="{Binding ResourceCollection}"> 

[Stepline itemsource]: 

        public ViewModel() 

        { 

            _resourceCollection = this.GetResources(); 

            _taskCollection = this.GetData(); 

            this.Intensity = new ObservableCollection<Intensity>(); 

            DateTime yr = new DateTime(2010, 6, 2); 

            Intensity.Add(new Intensity() { Year = new DateTime(2010, 6, 2), Data = 508 }); 

.... 

            Intensity.Add(new Intensity() { Year = new DateTime(2010, 7, 24), Data = 450 }); 

      } 

Query: I need to scroll the gantt to see all the points and this scroll 
We have achieved it by adding the StepLine chart inside the scrollview, If you scroll the scrollviewer, now gantt chart and stepline chart will be scroll.

[Xaml]: 

    <Grid> 

        <sync:GanttControl x:Name="Gantt"   

  .... 

        </sync:GanttControl> 

  

        <ScrollViewer x:Name="CustomPanelScrollViewer"  HorizontalAlignment="Right" VerticalScrollBarVisibility="Hidden" 

                   Background="Transparent"   HorizontalScrollBarVisibility="Hidden" IsHitTestVisible="False"> 

                <sync:SfChart x:Name="SteplineChart" > 

                <sync:StepLineSeries XBindingPath="Year"  YBindingPath="Data" ItemsSource="{Binding Intensity}" /> 

                </sync:SfChart> 

        </ScrollViewer> 

    </Grid> 

Query:The gantt chart does not change its zoom factor, but the stepline chart does, to keep all the data in the screen.
We have checked your requirement and set the gantt width and height to the stepline chart. Now stepline chart also behave like a gantt control

[C#]: 

private void Gantt_Loaded(object sender, RoutedEventArgs e) 

        { 

... 

             this.SteplineChart.Width = this.ganttSchedule.Width; 

            this.SteplineChart.Height = this.Gantt.RenderSize.Height; 

    ... 

    } 

Please have a sample from below link 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt_GettingStarted1148722568

Let us know if you need any further assistance.

Regards,
Sridevi S. 

[Lívio Tonini Gouveia e Silva]

Thank you, that really helped!

Best regards,

Livio Silva

[Sridevi Sivakumar]

Hi Lívio Tonini Gouveia e Silva,

We are glad to hear that the solution we provided was helpful to you. Please let us know if you would require any further assistance. 

Regards,
Sridevi S.   

 

[Vladimir Topázio Barbosa]

Hello,

I also need to do this same case but in ASP.NET MVC. 

How would I do?

Thank you!

[Gopinath Munusamy]

Hi Vladimir,

We don’t have this step line chart support in Ej2 Gantt.

Regards,

Gopinath M

[Vladimir Topázio Barbosa]

Thank you very much for the return.

I build the Step Line Chart superimposed on the gantt chart, as shown in the image I'm attaching with its referent code. But I can't "synchronize" the graphics. I need the stepline chart date axis to be "synchronized" with the GanttControl date axis.

Using ASP. NET MVC, how do I synchronize the axes and link the scrrolls as was done in the solution presented here in wpf?

Attachment: Files_a01a92da.rar

[Monisha Sivanthilingam]

Hi Vladimir,

We can use the scroll requestType in the actionComplete event to get the scrollLeft and then set it to the step line chart. This way, you can synchronize the Gantt Chart and Step Line chart.

Index.ts

 

actionComplete: function(args: any) {

  if(args.requestType == "scroll" && args.action == "HorizontalScroll") {

     console.log(args);

  }

}

 

Sample: https://stackblitz.com/edit/wknw8b?file=index.ts

Regards,

Monisha.