How to synchronize on-demand loading in Flutter 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.
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.
Conclusion
I hope you enjoyed learning about how to synchronize on-demand loading in Flutter Cartesian Chart (SfCartesianChart).
You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart 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, Direct-Trac, or feedback portal. We are always happy to assist you!
