How to create Flutter real-time charts using the cartesian charts widget SfCartesianChart ?
In this article, we explained how to create the real-time charts using the SfCartesianChart widget.
The Flutter real-time charts are the streaming charts that update automatically for every specified amount of time. You can achieve this using the public method called updateDataSource. To know more on updateDataSource, find the user guide.
Follow these steps to render the real-time chart using the SfCartesianChart widget.
Step 1: Declare the timer, count, and chartData variable to refer the dataSource, and also _chartSeriesController of type CharSeriesController to access the public method called updateDataSource method.
// Data source which binds to the series List<_ChartData> chartData = <_ChartData>[]; Timer? timer; // Redraw the series with updating or creating new points by using this controller. ChartSeriesController? _chartSeriesController; // Count of type integer which binds as x value for the series int count = 19;
Step 2: Declare and initialize the chartData with the required data source.
//Initialize the data source List<_ChartData> chartData = <_ChartData>[ _ChartData(0, 42), _ChartData(1, 47), _ChartData(2, 33), _ChartData(3, 49), _ChartData(4, 54), _ChartData(5, 41), _ChartData(6, 58), _ChartData(7, 51), _ChartData(8, 98), _ChartData(9, 41), _ChartData(10, 53), _ChartData(11, 72), _ChartData(12, 86), _ChartData(13, 52), _ChartData(14, 94), _ChartData(15, 92), _ChartData(16, 86), _ChartData(17, 72), _ChartData(18, 94), ];
Step 3: In the widget build method, initialize the timer with the required interval of time and also the method to be executed continuously in the given interval of time.
Widget build(BuildContext context) {
// Here the _updateDataSource method is called for every second.
timer = Timer.periodic(const Duration(milliseconds: 1000), _updateDataSource);
}
Step 4: Define the _updateDataSource method, which updates and removes the data. You can achieve this using the ChartSeriesController class's public method updateDataSource.
Void _updateDataSource(Timer timer) {
chartData.add(_ChartData(count, 10 + random.nextInt(100 - 10)));
if (chartData.length == 20) {
// Removes the last index data of data source.
chartData.removeAt(0);
// Here calling updateDataSource method with addedDataIndexes to add data in last index and removedDataIndexes to remove data from the last.
_chartSeriesController?.updateDataSource(addedDataIndexes: <int>[chartData.length – 1],
removedDataIndexes: <int>[0]);
}
count = count + 1;
}
Step 5: Finally, initialize the SfCartesianChart widget with required series and in the onRendererCreated event assign the controller argument to the globally declared _chartSeriesController.
SfCartesianChart(
series: <LineSeries<_ChartData, int>>[
LineSeries<_ChartData, int>(
onRendererCreated: (ChartSeriesController controller) {
// Assigning the controller to the _chartSeriesController.
chartSeriesController = controller;
}
// Binding the chartData to the dataSource of the line series.
dataSource: chartData,
xValueMapper: (_ChartData sales, _) => sales.country,
yValueMapper: (_ChartData sales, _) => sales.sales,
)
],
),
Step 6: At last, cancel the timer in the dispose method.
@override
void dispose() {
super.dispose();
// Cancelling the timer.
timer?.cancel();
}
Thus, the real-time chart sample achieved using the updateDataSource public method.
Screenshot
I hope you enjoyed learning about how to create Flutter real-time charts using the cartesian charts widget SfCartesianChart.
You can refer to our Flutter Charts page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Charts demo 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!
