How to perform lazy loading in WPF Chart (SfChart)?

3 mins read

This article shows how to perform lazy loading using PanChanged events. Here, the data points are added dynamically in the desired count or format while scrolling to the end of the chart.

To perform lazy loading in WPF Chart , follow these steps:

Step 1: Initialize the SfChart with Primary and Secondary axis.
Step 2: Hook the PanChanged event in SfChart and set the required ZoomFactor on the primary axis.

XAML

<syncfusion:SfChart PanChanged="chart_PanChanged">
<syncfusion:SfChart .PrimaryAxis>
   <syncfusion:NumericalAxis x:name="xAxis" zoomfactor="0.5"/>
</syncfusion:SfChart .PrimaryAxis>

<syncfusion:SfChart .SecondaryAxis>
   <syncfusion:NumericalAxis/>
</syncfusion:SfChart .SecondaryAxis>

.... Add your series here ....
</syncfusion:SfChart>

SfChart chart = new SfChart();
chart.PanChanged += chart_PanChanged;
NumericalAxis xAxis = new NumericalAxis();
xAxis.ZoomFactor = 0.5;
chart.PrimaryAxis = xAxis;
NumericalAxis yAxis = new NumericalAxis();
chart.SecondaryAxis = yAxis;
this.Content = chart;

Step 3 : Initialize the ChartZoomPanBehavior and enable panning by setting EnablePanning to “True”.

XAML

<syncfusion:SfChart.Behaviors>
   <syncfusion:ChartZoomPanBehavior EnablePanning="True"/>
</syncfusion:SfChart.Behaviors>

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
zoomPanBehavior.EnablePanning = true;

chart.Behaviors.Add(zoomPanBehavior);

Step 4 : Implement the chart_PanChanged method to calculate the end range of the chart. As horizontal scrolling or panning reaches the end of the chart, additional data points are added, then adjust the position of the xAxis range using ZoomPosition .


**// startValue = You can set the last value of the data source in viewModel.**
private void chart_PanChanged(object sender, PanChangedEventArgs e)
{       
 var position = xAxis.ZoomPosition - xAxis.ZoomFactor;
         
 if (e.Axis.Equals(xAxis) && position>=0)
 {
     // Update the data based on your requirement. 
     for (int i = 0; i < 4; i++)
     {   
         viewModel.Data.Add(new Model(startValue, new Random().Next(10, 40)));
         startValue++;                 
     }
     xAxis.ZoomPosition = 1;
 }
}

Output:

For better understanding, please refer to the GitHub sample.

Conclusion

I hope you enjoyed learning about how to perform lazy loading in WPF Chart (SfChart).

You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our [support forums] (https://www.syncfusion.com/forums/), Direct-Trac, or feedback portal. We are always happy to assist you!

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac[https://support.syncfusion.com/create], or feedback portal[https://www.syncfusion.com/feedback/wpf?searchtext=chart]. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to perform lazy loading in WPF Chart (SfChart)?

Access denied