Gantt Control with Step Line Chart

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

9 Replies 1 reply marked as answer

SS Sridevi Sivakumar Syncfusion Team May 24, 2021 02:10 PM UTC

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.
 
 



LT Lívio Tonini Gouveia e Silva May 26, 2021 10:15 AM UTC

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!


SS Sridevi Sivakumar Syncfusion Team May 27, 2021 01:01 PM UTC

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.
 


Marked as answer

LT Lívio Tonini Gouveia e Silva May 31, 2021 09:29 AM UTC

Thank you, that really helped!

Best regards,

Livio Silva


SS Sridevi Sivakumar Syncfusion Team June 1, 2021 05:44 AM UTC

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.   
 



VT Vladimir Topázio Barbosa October 31, 2022 11:12 AM UTC

Hello,


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

How would I do?


Thank you!



GM Gopinath Munusamy Syncfusion Team November 3, 2022 12:50 PM UTC

Hi Vladimir,


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


Regards,

Gopinath M



VT Vladimir Topázio Barbosa November 3, 2022 04:42 PM UTC

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


MS Monisha Sivanthilingam Syncfusion Team December 14, 2022 06:32 AM UTC

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.


Loader.
Up arrow icon