In many applications, we need to showcase the data that changes over time. A real-time chart is handy at displaying dynamically changing data. By using charts, we can easily convey information and understand the current trends in the data.
Syncfusion Flutter Charts is a well-crafted charting widget for visualizing data. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios. The Flutter Charts also allows you to display live data that changes in minutes or even seconds.
This blog is a complete guide to updating and visualizing live data in your applications using Syncfusion Flutter Charts for:
Methods
In Flutter Charts, we can use either of the following techniques to update the chart data points live:
- Call the setState() method.
- Use the updateDataSource() method of the ChartSeriesController class.
The setState() method will completely process the chart again. The updateDataSource() method will process only the modified item in the data source, and based on that, the corresponding series will be redrawn.
Thus, if you have a huge amount of chart data, we suggest using the updateDataSource() method instead of calling the setState() method for better performance.
Updating data points
In this section, we will see how to modify, add, and remove data points in the data source of Flutter Charts.
Update the values of data points
To update the value of data points, re-initialize the data source collection and use the setState() method.
In the following example, we have called the setState() method in the onPressed() event of a button.
/// Specifies the list of chart sample data.
List<ChartSampleData> chartData = <ChartSampleData>[
ChartSampleData(x: 1, y: 30),
ChartSampleData(x: 3, y: 13),
ChartSampleData(x: 5, y: 80),
ChartSampleData(x: 7, y: 30),
ChartSampleData(x: 9, y: 72)
];
/// Creates an instance of random to generate the random number.
final Random random = Random();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: NumericAxis(),
primaryYAxis: NumericAxis(),
series: <ColumnSeries<ChartSampleData, num>>[
ColumnSeries<ChartSampleData, num>(
dataSource: chartData,
xValueMapper: (ChartSampleData data, _) => data.x,
yValueMapper: (ChartSampleData data, _) => data.y,
dataLabelSettings: DataLabelSettings(isVisible: true)
),
],
)
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
chartData = <ChartSampleData>[];
chartData = _getChartData();
}),
child: const Icon(Icons.refresh, color: Colors.white),
)
);
}
/// Get the random value.
num _getRandomInt(int min, int max) {
return min + random.nextInt(max - min);
}
/// Method to update the chart data.
List<ChartSampleData> _getChartData() {
chartData.add(ChartSampleData(x: 1, y: _getRandomInt(10, 100)));
chartData.add(ChartSampleData(x: 3, y: _getRandomInt(10, 100)));
chartData.add(ChartSampleData(x: 5, y: _getRandomInt(10, 100)));
chartData.add(ChartSampleData(x: 7, y: _getRandomInt(10, 100)));
chartData.add(ChartSampleData(x: 9, y: _getRandomInt(10, 100)));
return chartData;
}
For more information, refer to the Updating the Existing Flutter Chart Data Point Value project demo.
Add and remove data points
To proceed further, read about how to use the updateDataSource() method to update the data source of the Flutter Charts.
Add data point
Now, follow these steps to add a data point to the existing data source collection and update it live in the Flutter Charts.
Step 1: Add a desired data point into the existing chart data.
List<ChartSampleData> _addDataPoint() {
final int length = chartData.length;
chartData.add(ChartSampleData(x: length, y: _getRandomInt(10, 100)));
return chartData;
}
Step 2: Then, call the updateDataSource() method in the ChartSeriesController class. Assign the newly added index position to addedDataIndexes.
Refer to the following code example.
IconButton(
onPressed: () {
chartData = _addDataPoint();
_chartSeriesController?.updateDataSource(
addedDataIndexes: <int>[chartData.length - 1],
);
},
);
Remove data points
Let’s follow these steps to remove the Flutter Chart data points from the existing collection by calling the updateDataSource() of the ChartSeriesController class.
Step 1: Remove the unwanted data point from the chart’s data source.
/// Remove the data point from the series.
List<ChartSampleData> _removeDataPoint() {
if (chartData.isNotEmpty) {
chartData.removeAt(chartData.length - 1);
}
return chartData;
}
Step 2: Then, call the updateDataSource() method of the ChartSeriesController class by assigning the removed index position to updatedDataIndexes and removedDataIndexes.
Refer to the following code example.
IconButton(
onPressed: () {
if (chartData.length > 1) {
chartData = _removeDataPoint();
_chartSeriesController?.updateDataSource(
updatedDataIndexes: <int>[chartData.length - 1],
removedDataIndexes: <int>[chartData.length - 1],
);
}
},
)
Note: In both the add and remove data points code examples, the chartData is the data point collection set to the data source property of the chart at loading time.
For more information, refer to the Adding/Removing Data Points in the Flutter Charts project demo.
Updating series
Let’s see how to add or remove a series from the series collection of a chart using the setState() method.
Add series
Step 1 : Add the series to the existing series collection of Flutter Chart.
/// Add series into the chart.
void addSeries() {
final List<ChartSampleData> chartData1 = <ChartSampleData>[];
for (int i = 0; i <= 6; i++) {
chartData1.add(ChartSampleData(x: i, y: _getRandomInt(10, 50)));
}
series.add(LineSeries<ChartSampleData, int>(
key: ValueKey<String>('${series.length}'),
dataSource: chartData1,
xValueMapper: (ChartSampleData sales, _) => sales.x as int,
yValueMapper: (ChartSampleData sales, _) => sales.y,
));
}
Step 2: Then, call the addSeries() method using the setState() in the onPressed event of a button to update the chart with the newly added series.
Refer to the following code example.
IconButton(
icon: Icon(Icons.add_circle, size: 50),
onPressed: () {
setState(() {
addSeries();
});
}
)
Remove series
Step 1: Remove the unwanted series from the Flutter Charts series collection.
///Remove the series from chart.
void removeSeries() {
if (series.isNotEmpty) {
series.removeLast();
}
}
Step 2: In the onPressed event of a button, call the removeSeries() method using the setState() method to update the removed series.
IconButton(
icon: Icon(Icons.remove_circle, size: 50),
onPressed: () => setState(() {
removeSeries();
}),
)
Note: In both the add and remove series examples, the series is the collection of series assigned to the series property of the Flutter Charts widget.
For more information, refer to the Add/Remove Series Dynamically in a Flutter Chart project demo.
Updating data on demand
In this section, we are going to see how to lively update the Flutter Charts data automatically at certain intervals and on user interaction.
Updating data at regular intervals
The Syncfusion Flutter Chart widget acts as a real-time chart that can be easily updated at regular intervals. To achieve this, we are going to use the updateDataSource() method of the ChartSeriesController:
Step 1: Perform the required activities such as adding or removing data points in the Chart data source, as explained in the previous section. Then, use the updateDataSource() to update the chart based on the new data point.
/// Continuously updating the data source based on timer.
void _updateDataSource(Timer timer) {
chartData.add(_ChartData(count, _getRandomInt(10, 100)));
if (chartData.length == 20) {
chartData.removeAt(0);
_chartSeriesController?.updateDataSource(
addedDataIndexes: <int>[chartData.length - 1],
removedDataIndexes: <int>[0],
);
} else {
_chartSeriesController?.updateDataSource(
addedDataIndexes: <int>[chartData.length - 1],
);
}
count = count + 1;
}
Step 2: Then, initialize a periodic timer. Call the updateDataSource method in the timer event to update the chart data continuously at a specific time interval.
Refer to the following code example.
Timer? timer;
@override
void initState() {
super.initState();
timer = Timer.periodic(const Duration(milliseconds: 100), _updateDataSource);
}
For more information, refer to the Updating Live Data On-Time in Flutter Line Charts project demo.
On interaction
This section explains how to dynamically update the Flutter Charts live data based on user interaction (dragging and tapping).
On drag
Before proceeding, refer to the On-demand loading in Flutter Cartesian Charts documentation.
Now, let’s see how to update the Flutter chart’s visible data points by dragging in the chart area.
Here, we are going to load data on demand when the visible axis range reaches its end while dragging using the loadMoreIndicatorBuilder property of the Flutter Charts widget:
Step 1: Enable the enablePanning property of the ZoomPanBehavior class to perform dragging in the chart area.
Step 2: Next, create a widget to load more data when the axis visible range reaches the end while dragging.
Step 3: Then, return a circular progress indicator until the updated data gets displayed in the chart.
Refer to the following code example.
/// Returns the load more indicator builder.
Widget getloadMoreIndicatorBuilder(
BuildContext context, ChartSwipeDirection direction) {
if (direction == ChartSwipeDirection.end) {
isNeedToUpdateView = true;
globalKey = GlobalKey<State>();
return StatefulBuilder(
key: globalKey,
builder: (BuildContext context, StateSetter stateSetter) {
Widget widget;
if (isNeedToUpdateView) {
widget = getProgressIndicator();
_updateView();
isDataUpdated = true;
} else {
widget = Container();
}
return widget;
});
} else {
return SizedBox.fromSize(size: Size.zero);
}
}
)
Step 4: As discussed earlier, to update and show the newly added data indexes in the chart, use the updateDataSource() method of the ChartSeriesController class.
/// Update the chart view based on the newly added data points.
Future<void> _updateView() async {
await Future<void>.delayed(const Duration(seconds: 1), () {
isNeedToUpdateView = false;
if (isDataUpdated) {
_updateData();
isDataUpdated = false;
}
if (globalKey.currentState != null) {
(globalKey.currentState as dynamic).setState(() {});
}
});
}
/// Method to add new data points to the chart source.
void _updateData() {
for (int i = 0; i < 4; i++) {
chartData.add(ChartSampleData(
xValue: chartData[chartData.length - 1].xValue + 1,
y: getRandomInt(0, 600)));
}
isLoadMoreView = true;
seriesController?.updateDataSource(addedDataIndexes: getIndexes(4));
}
/// Returns the newly added indexes value.
List<int> getIndexes(int length) {
final List<int> indexes = <int>[];
for (int i = length - 1; i >= 0; i--) {
indexes.add(chartData.length - 1 - i);
}
return indexes;
}
For more information, refer to the Infinite Scrolling in Flutter Charts project demo.
On tap
In this section, I will show you how to draw a chart series at a tapped point from the last data point of the chart series. To achieve this, we are going to use the onChartTouchInteractionUp to get the tapped position on the chart area. To convert a logical pixel value to a chart point value, use the pixelToPoint method of the ChartSeriesController class.
Refer to the following code example.
onChartTouchInteractionUp: (ChartTouchInteractionArgs args) {
final Offset value = Offset(args.position.dx, args.position.dy);
CartesianChartPoint<dynamic> chartpoint;
chartpoint = seriesController!.pixelToPoint(value);
chartData.add(ChartSampleData(x: chartpoint.x, y: chartpoint.y));
setState(() {});
}
For more information, refer to the Adding Point On-Click in the Flutter Cartesian Charts project demo.
Pagination
Also, you can achieve pagination in the Flutter Charts with the onPlotAreaSwipe property. This will help you easily navigate to the desired data in a chart.
For more information, refer to the Pagination in the Flutter Charts demo.
Conclusion
Thanks for reading! In this blog post, we have seen how to update the live data in your real-time application using the Syncfusion Flutter Charts widget. Try out the steps given in this blog post and enjoy hassle-free live updates in your real-time charts.
Browse our documentation to learn more about Syncfusion Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this GitHub repository. Don’t miss our demo app in Google Play, App Store, the web, Windows Store, macOS, and Snapcraft (Linux).
If you aren’t a customer yet, you can try our 30-day free trial to check out our Flutter features.
Finally, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forums, feedback portal, or Direct-Trac support system. We are always happy to assist you!
Top comments (0)