Real-time data (about 100 per second) Frame drops over time when UI is updated (FastLineSeries)

[jaehyeok]

Hi.

My package Version is: syncfusion_flutter_charts: ^20.1.60

We are developing Bluetooth communication that take 100 data per second from NRF 52832 devices.

It was developed by referring to official documents.

series: <ChartSeries<HeartRateDataPacket, int>>[

FastLineSeries<HeartRateDataPacket, int>(

onRendererCreated: (ChartSeriesController controller) {

home.chartSeriesController = controller;

},

dataSource: data.cast<HeartRateDataPacket>(),

xValueMapper: (HeartRateDataPacket item, _) => item.time,

yValueMapper: (HeartRateDataPacket item, _) => item.data,

xAxisName: "${data.length}",

animationDuration: 0,

),

]

When the UI is updated, a normal frame (56 FPS) appears at first, but the app slows down and stops over time (about 3 to 4 hours).

Is there a way to solve the UI Jank problem?

Thank you for the reply.

Attachment: jank_e29b44bc.zip

[Yuvaraj Gajaraj]

Hi Jaejyeok,

Greetings from Syncfusion. We would like to know are removing the data from the data source while adding the data to the data source. Since if you keep on adding the data alone at 100 data points in one second, then for 3 hours it's almost 10 lakh points in the viewport. So, having a greater number of data points in the viewport may degrade the performance of the application. And we suspect that you are using the updateDataSource method to update the data in the chart, if not then please use this to update the data. 

Also, in case of handling a large set of data, we suggest using the on-demand loading concept, with this you can load the data on-demand and performance will also be improved. We have attached the sample and UG link below for your reference.

Sample: https://flutter.syncfusion.com/#/cartesian-charts/infinite-scrolling

UG: https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading#infinite-scrolling

Regards,

Yuvaraj.

[jaehyeok]

Hi.

This data list operates in the form of removing the 0th index if there are more than 200.

If (Chart Data Length >=200){

ChartData.removeAt(0);

}

also.

void_updateDataSource() {

       home.chartData! .add(HeartRateDataPacket()

           home.hrcount, double.parse(home.real HeartRate.value));

       if (home.chartData!).Length == 100) {

         home.chartData! .removeAt(0);

         Update home.chartSeries controller data sources (

           DataIndexes: <int>[home.chartData!] has been added.Length - 1),

           Removed data index: <int>[0],

         );

       } } else{

         Update home.chartSeries controller data sources (

           DataIndexes: <int>[home.chartData!] has been added.Length - 1),

         );

       }

     }

I changed it through the update source method as above.

Is there anything I'm making a mistake about?

[Yuvaraj Gajaraj]

Hi Jaehyeok,

We have checked your code snippet in the last query, and we suspect that you want to show the 200 data in the viewport and remove the first point. But in your code snippet, you have removed the data from the list when its length reaches 100, so the data source will not reach 200.  So, could please change the condition like the below code snippet it will help you achieve your requirement.

Code snippet:

void updateData(Timer timer) {

  chartData.add(ChartData(chartData.last.x + 1, Random().nextInt(90)));

  if (chartData.length >= 200) {

    chartData.removeAt(0);

    chartSeriesController!.updateDataSource(

        addedDataIndexes: <int>[chartData.length - 1],

        removedDataIndexes: [0]);

  } else {

    chartSeriesController!

        .updateDataSource(addedDataIndexes: <int>[chartData.length - 1]);

  }

}

Regards,

Yuvaraj.

[jaehyeok]

Thank you for your reply.

After correcting and testing the code in CodeSnippet, the frame drop symptom still occurs.

One difference is that the updateData function is called each time Bluetooth data is received, rather than the method of calling the updateData parameter every time through a timer variable.

Will this be a problem?

[Yuvaraj Gajaraj]

Hi Jaehyeok,

Thanks for the update. Calling the updateDataSource method when Bluetooth data is received is the proper way to update the data in the chart, but as of now, we did not get any frame drops as you mentioned it always stays with 57 FPS, we have run the project for around 2hours with dynamic updates. We have also attached a screenshot of that below. Since we are not aware of your exact scenario in which the frame drop occurs, kindly replicate your scenario with the attached sample, kindly revert us with issue replication steps i.e., how long do you run the application for the frame drop, this will be useful in further analysis.

Screenshot:

Regards,

Yuvaraj.

Attachment: f175670_ebfbc817.zip

[jaehyeok]

I checked that there was no frame drop when executing the code (54-56 frame) you attached.

The causes of the frame loss are:

 I checked that a frame drop occurred while updating the UI through OBX using the GetX library of my code. So I tested it with a Stateful Widget without using the GetX library, and it lasted about 42 frames (less than 20 frames with GetX) for 2 hours.

Thank you. This has solved the problem.

I have two questions.

1. Why is the frame drop getting worse on the FastLine series? The animationDuration value was 0.

If you test without specifying the animationDuration property on the LineSeries, no frame loss occurs.

2. If you look at the Flutter Development Tool, is there a way to remove the shader complexity?

[Yuvaraj Gajaraj]

Hi Jaehyeok,

Please find the response to your question below.

Query #1: Why is the frame drop getting worse on the FastLine series? The animationDuration value was 0. If you test without specifying the animationDuration property on the LineSeries, no frame loss occurs.

As stated earlier, we have checked the FastLineSeries by updating the data around 2 hours, and we do not face any frame drops we constantly have the 57 FPS without GetX. And in your last update, you mentioned that you have frame drop when updating the FastLineSeries using the GetX package and you have removed that to resolve the issue. So, are you expect to update the FastLineSeries using the GetX package without frame drop. Could you please explain your exact requirement, that would be more helpful to us to provide a solution sooner?

Query #2: If you look at the Flutter Development Tool, is there a way to remove the shader complexity?

In the flutter they already have documentation for the shader compilation, for more information please find the links below,

• https://docs.flutter.dev/perf/shader
• https://suryadevsingh24032000.medium.com/announcing-flutter-1-20-7dcf7d7f5d50

Regards,

Yuvaraj.