How can I graph a live function using Syncfusion Flutter Widgets?

Issue

I want to graph live data sent from an Arduino UNO using a HC-05 Bluetooth Module. But before that, I’m using random numbers just to see how the graph goes.

Every 300 points plotted in the graph, I want that the leftmost number in the x-axis, (which is 0) advances to a next number. But it is always 0 and the functions just keeps graphing and the result is a something that I don’t want.

What I want

What I get

This is the Dart code that I have written up until the moment.

Solution

You are only adding the data to chart at the end and due to which the data are getting added continuously and the x-axis range is not changed dynamically. So, for your case you can check the chart data length on every update to exceed 300 data points and once the length crosses that length threshold (300), you can remove the data at the start one by one on each update. We have also attached live data sample link along with code snippet below in which we have performed the same live update behavior. Please check with code snippet of that sample to achieve this case.

SB sample link: https://flutter.syncfusion.com/#/cartesian-charts/real-time-charts/live-updates/real-time-line-chart

Code snippet link: https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/real_time_charts/live_update/real_time_line_chart.dart

Answered By - srk_sync