Realtime chart don't work without using setState?

[Zhu]

Hi,

I was trying to display a realtime chart from the data of a stream, In my code there's a function listening to the stream and call  _updateDataSource when new data come.

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

[Zhu]

By the way, I used ChartSeriesController class's public method updateDataSource in my  _updateDataSource.

[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 used to try StreamBuilder, but can't call setState in it, so I canceled it and still using the old way, that is:

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);

});

}

Chart data is defined in the state class:

List chartData=[];

_updateDataSource is like this:

{

convert received realtimeData to chart data... //let's call it cd.

chartData.add(cd);

if (chartData.length == 20) {

chartData.removeAt(0);

chartSeriesController.updateDataSource(

addedDataIndexes: [chartData.length - 1],

removedDataIndexes: [0],

);

} else {

chartSeriesController.updateDataSource(

addedDataIndexes: [chartData.length - 1],

);

}

In this way, it have good display but with flashing, if comment the setState line, it would not flash but have weird display.

Regards,

Zhu

[Zhu]

Hi, Lokesh,

I realized there's something wrong in my code, so I changed it to this:

if (chartData.length == 20) {

chartData.removeAt(0);

chartData.add(context.read());

chartSeriesController.updateDataSource(

addedDataIndexes: [chartData.length - 1],

removedDataIndexes: [0],

);

} else {

chartData.add(context.read());

chartSeriesController.updateDataSource(

addedDataIndexes: [chartData.length - 1],

);

}

After this change, I test it again:

Now, in about 20 seconds ( the stream would yield once a second), it have weird display, then it would become good display with no flashing.

So, seems it keep waitting until have enough data to show a full display.

Regards,

Zhu

[Zhu]

Hi, Lokesh,

In users' perspective, display with full data is not needed, and the long waitting time and weird display are not acceptable. 

I have no idea on how  to fix this, please help.

Regards,

Zhu

[Zhu]

Hi, Lokesh,

I realized that it's a must to pre-load some data into chartData, as the realtime example do, but in real world, you can't make up the data to pre-load, so I think this mechanism is not correct and should be fixed.

I tried to pre-load some zero data, like 20 items of zero values, but it don't look good:

So, I think it's an internal issue of SfCartesianChart and hope it can be fixed.

Looking forward to your reply.

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

We cannot predict the data before preloading it into the chart. However, we can dynamically update the data points after the chart has been rendered using the updateDataSource method.

As per the screenshot, in y axis datapoints you have given zero value. So, only the segments were rendered on axis range. The datapoints was rendered based on the segment only. It was not an issue. We have provided the simple sample using stream for your requirement.

Regards,

Lokesh.

Attachment: chart_182613_f01fa5dd.zip

[Zhu]

Hi, Lokesh,

I checked the example provided, can't see any data displayed, seems something is wrong.

About the stream in the example, it filled 55 data items once, which I think is rare, at least my problem can't be solved in this way.

In my case, the stream yield one data per second, I hope it being displayed right away, with no preload need and no delay, how to do that?

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

Sorry for the inconvenience. Previously, we have attached the wrong sample. Now, we have attached the correct sample. You can modify the sample as per your requirement. Please let us know if you need any further details.

Regards,

Lokesh.

Attachment: chart_182613_(2)_3d8c2c9a.zip

[Zhu]

Hi, Lokesh,

Thanks for the updated example, it works.

In my case, the stream yield only one data per second, I hope it being displayed right away, with no preload need and no delay, how to do that?

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

Currently, we are working on your requirement. We will try to find a feasible workaround and let you know within one business day on June 08, 2023. We appreciate your patience until then.

Regards,

Lokesh.

[Zhu]

Hi, Lokesh,

Great, looking forward to your good news.

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

You can achieve your requirement by storing stream data one by one in the updateDataSource method. By using this updateDataSource method, you can display one data per second. We have provided a sample workaround for your reference, which you can modify according to your use case. Please let us know if you require any further assistance.

Regards,

Lokesh.

Attachment: chart_182613_7c16d238.zip

[Zhu]

Hi, Lokesh,

I tried the provided sample, it need some chages, but do work.

But there're 2 ValueListenableBuilders in my code to make legends able to act as buttons, seems they have conflict with the added streamBuilder, and would bring flash too.

Any idea to solve this?

Attached is an illustration code file，you can test with it.

Regards,

Zhu

Attachment: main_235fa407.zip

[Lokesh Palani]

Hi Zhu,

We have checked your query and the attached code snippet. To avoid the flash, you can set toggleSeriesVisibility to false in the Legend. We kindly request that you provide us with more detailed information regarding your requirement for using the legend toggle and what you want to achieve when toggling the legend. This will enable us to better assist you. Please inform us if you require any further assistance.

Regards,

Lokesh

[Zhu]

Hi, Lokesh,

About  my requirement for using the legend toggle and what  to achieve when toggling the legend, please see this link: https://www.syncfusion.com/forums/180145/idea-of-using-legends-as-on-off-buttons

Regards,

Zhu

[Zhu]

Hi, Lokesh,

I tried  to set toggleSeriesVisibility to false, it don't work here.

Do you have an example that can work?

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

Query 1:   My requirement for using the legend toggle and what to achieve when toggling the legend

We have analyzed the provided ticket link and found that the seriesVisibility was not shown when toggling the legend, and the text color was changed using the legendItemBuilder property in the legend. However, in your sample, the series was displayed after it was toggled. We kindly request that you provide us with more detailed information regarding why you want the seriesVisibility to be shown when toggling the legend and what you want to achieve when toggling the legend. This will enable us to assist you more effectively.

Query 2:  I tried  to set toggleSeriesVisibility to false, it don't work here.Do you have an example that can work?

We have shared a code snippet and simple sample for your reference.

Code snippet:

legend: Legend(

        isVisible: true,

        toggleSeriesVisibility: false,

      ),

Regards,

Lokesh.

Attachment: chart_472586_4bc38df5.zip

[Zhu]

Hi, Lokesh,

I have 4 data to be displayed, so, there are 4 traces in my chart, sometimes they overlap, then user may want to close a trace to see others clearly, or may want to check one trace each time...

That's why the legend buttons are useful, give user the freedom to see any traces they want to.

In the example you provided, there's no streambuilder? 

I thought it should have  streambuilder to show how toggleSeriesVisibility: false could solve the flash issue?

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

Yes, you can achieve your requirement by using the toggleSeriesVisibility property set to false in the legend. This property will prevent from flash. We have modified the sample to meet your requirement and have also attached a video showing the changes made. Please let us know if you require any further assistance.

Regards,

Lokesh.

Attachment: chart_182613_new_b4b7ade4.zip

[Zhu]

Hi, Lokesh,

The legend buttons are supposed to close/open traces, if set toggleSeriesVisibility to false, they would not work.

And, the screen is still flashing, that means it can't stop flashing either.

That's why I think it don't work.

What I expect:

1. no flashing
2. close/open traces as normal, not being disturbed by realtime refreshing.
3. Trackbar display not being disturbed by realtime refreshing.

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

We have created a ticket for your query. Please check the ticket from the below site for further updates.

https://support.syncfusion.com/support/tickets

Regards,

Lokesh.

[Zhu]

Hi, Lokesh,

That sounds good, thank you.

Regards,

Zhu

[Lokesh Palani]

Hi Zhu,

 

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

 

Regards,

Lokesh.