how to use a stream in realtime chart?

[Zhu]

Hi,

I was trying to make a realtime chart following your example of real_time_line_chart, but instead of using timer to update data source, I want to use a stream.

I'd add a listener to the stream in initState(), which will receive new data in the stream, how should I  update data source (calling _updateDataSource) without using setState? (which works but would bring flashing to chart page)

[Lokesh Palani]

Hi Zhu,

You can update the stream data to chart using updateDataSource method in ChartSeriesController without calling the setState. We have KB for updating the dynamic data point to chart using updateDataSource method and shared that KB link below for your reference. Please modify the sample codes based on your requirement. 

KB,

https://support.syncfusion.com/kb/article/10783/how-to-create-flutter-real-time-charts-using-the-cartesian-charts-widget-sfcartesianchart

If you require additional information, kindly provide us with further details regarding your requirements, including a sample or code snippet, so that we may better assist you.

Regards,

Lokesh.

[Zhu]

Hi, Lokesh,

In initState, I set a StreamSubscription which listen to a stream to get realtime data, like this:

_streamSubscription = stream.listen((event) async {

...

realtimeData=...

setState(() {

_updateDataSource(realtimeData);

});

}

I have to call _updateDataSource(realtimeData) in setState, or it would not work, but in this way, it would flash.

Any ideas?

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

You can achieve your requirement by using the ChartSeriesController callback to update the real-time data points and avoiding the use of the
updateDataSource method inside setState. We have prepared a sample with timer, you can update the stream data instead of timer in sample. We have attached a sample of how to create a real-time chart using the chartSeriesController.updateDataSource method. You can modify this sample based on your use case.

If you still face any issues, please modify, and revert the attached sample. Based on that we will provide suggestions to proceed further on this.

Regards,

Lokesh.

Attachment: chart_182434_b0b3c9b.zip

[Zhu]

Hi, Lokesh,

Sounds great!

Though, in the attached sample, looks like it's still using _updateDataSource, instead of using chartSeriesController.updateDataSource method directly?

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

We have previously used the private method _updateDataSource to update the dynamic data points by using the chartSeriesController.updateDataSource method. Now, we have simplified the sample and attached it below. You can modify this sample based on your use case.

Regards,

Lokesh.

Attachment: chart_182434_7909ab07.zip

[Zhu]

Hi, Lokesh,

I tried the sample way, though, not in constructor, but in initState, since I need to use some variables and a function in class.

It don't work, as I said in the begining of this thread.

Don't you have a realtime sample that use a real sensor(which provide real realtime data)?

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

Currently, we do not have a real-time sample using a sensor to provide real-time data. We request that you share with us a simple example using a real-time sensor that is stored in a ListView. This will help us in creating a sample that configures the chart based on your requirement.

Regards,

Lokesh.

[Zhu]

Hi, Lokesh,

I'd like to do that, but SyncFusion have to provide a way to display realtime data in chart without using setState.

I tried to call _updateDataSource in StreamBuilder, it works, but I can't see any data displayed..

Regards,

Zhu

[Zhu]

Hi, Lokesh,

Please see below 2 pictures:

This is when calling _updateDataSource in setStae, good display but have flashing.

This is when calling _updateDataSource directly, no flashing, but weird display.

I have no idea what's going on, please help.

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

We have checked your requirement and suspect that you are not using the seriescontroller.updateDataSource method. As a result, the data is not being updated. To update the data, you can call the updateDataSource method and pass the updated data point indexes. We have provided a link to the SB related to real-time data. Please inform us if you require further assistance.

SB Link,

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

Note:

We request that you share clear details about the issue and in what scenario the issue was replicating. Please share the exact details as this will help us assist you in a better way.

Regards,

Lokesh.

[Zhu]

Hi, Lokesh,

I'd opeded another thread for the setState issue, let's continue there.

Here's the link: https://www.syncfusion.com/forums/182613/realtime-chart-dont-work-without-using-setstate?reply=SFqYUC

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

We have provided a solution for that query and attached the link below.

Link - https://www.syncfusion.com/forums/182613/realtime-chart-dont-work-without-using-setstate?reply=SFqVLZ

Best regards,

Lokesh.