We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to synchronize on-demand loading in the cartesian charts (SfCartesianChart)?


In this article we explain how to synchronize on-demand loading in the Flutter chart widget.

SfCartesianChart widget has support to lazily load and display the chart. You can be able to load a certain amount of data initially to the chart and then can load more data lazily. For more information refer to this help document.

For lazily load do the step explain in the following KB for chart same for both.

https://www.syncfusion.com/kb/12535

The following steps explains for synchronizing on-demand loading feature in the multiple cartesian charts.

Step 1: Initialized two global keys for first chart and second chart respectively wrapped inside statefull widget classes, then initialize two global variables for zoom factor and zoom position with default values. Based on these zoom position and factor only the charts will get synchronize.

final chart1Key = GlobalKey<_InfiniteScrolling1State>();
final chart2Key = GlobalKey<_InfiniteScrolling2State>();
 
double zoomP = 0;
double zoomF = 1;

 

Step 2: Then assign the global keys to the respective charts.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                InfiniteScrolling1(
                  // Set the global key for the first chart
                  key: chart1Key,
                ),
                InfiniteScrolling2(
                  // Set the global key for the second chart
                  key: chart2Key,
                ),
              ],
            ),
          )),
    );
  }
}

 

Step 3: In the buildLoadMoreIndicatorView method call the _updateView in which we have fetched the data for respective chart.

// In first chart
class _InfiniteScrolling1State extends State {
  _InfiniteScrolling1State();
  Widget buildLoadMoreIndicatorView (
    BuildContext context, ChartSwipeDirection direction) {
    if (direction == ChartSwipeDirection.end) {
      if (isNeedToUpdateView) {
        // When updating the view of teh first chart call the corresponding updateView method of second chart for
        // synchronization to take place when load more is performed.
        chart2Key.currentState?._updateView();
        chart2Key.currentState?.isDataUpdated = true;
    }
    });
 }
 
// In second chart
class _InfiniteScrolling2State extends State {
  _InfiniteScrolling2State();
  Widget buildLoadMoreIndicatorView (
    BuildContext context, ChartSwipeDirection direction) {
    if (direction == ChartSwipeDirection.end) {
     if (isNeedToUpdateView) {
       // When updating the view of the seconf chart call the corresponding updateView method of first chart for
       // synchronization to take place when load more is performed.
       chart1Key.currentState?._updateView();
       chart1Key.currentState?.isDataUpdated = true;
       }
    });
  }

 

Step 4: Then in the onZooming callback call the setState of another widget using their respective key. It will refresh another chart widget whenever you load the data.

onZooming: (ZoomPanArgs args) {
  if (args.axis!.name == 'XAxis') {
    zoomP = args.currentZoomPosition;
    zoomF = args.currentZoomFactor;
    // Refreshed the first chart using its key.
    chart1Key.currentState!.setState(() { });
  }
}
 
onZooming: (ZoomPanArgs args) {
  if (args.axis!.name == 'XAxis') {
    zoomP = args.currentZoomPosition;
    zoomF = args.currentZoomFactor;
    // Refreshed the second chart using its key.
    chart2Key.currentState!.setState(() { });
   }
}

 

Thus, the synchronized on-demand loading is achieved by dynamically adding the data while dragging the chart towards the end and synchronize the chart.

 

Synchronized on-demand loading using SfCartesianChart

 

View the sample in GitHub

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile