Updating Live Data in Flutter Charts – A Complete Guide

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:

• Updating data points.
• Updating series.
• Updating data on demand.

Methods

In Flutter Charts, we can use either of the following techniques to update the chart data points live:

1. Call the setState() method.
2. 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!

Related blogs

• 11 Tips to Improve Your Flutter Development Productivity in Android Studio
• 7 Best Flutter Charts for Visualizing Income and Expenditure
• Spice Up Your Flutter App with Interactive Features in Syncfusion Charts
• What’s New in 2021 Volume 2: Flutter Charts