UI getting janky/laggy by a fast and continuous call off updateDataSource with real time data (LineSeries)

Question

Hello,I am building an Flutter App and testing it on an Lenovo P11 Tab, running Android 10.My package Version is: syncfusion_flutter_charts: ^20.1.56My App is connected to a Microcontroller, sending real time data (4 Channels) via BLE (using flutter_blue) to the Tablet. What I'm trying to accomplish is to plot the received data (4 different values -> 4 lines) in a single SfCartesianChart using 4 LineSeries.Now the goal is to print the values as fluid as possible in a real-time chart. In my case the tablet receives new values every 20 ms (so 50 times per second). Those values shall be plotted in the 4 LineSeries, by adding the newest and deleting the oldest value to the 4 different ChartData Instances. Then the updateDataSource method is called on the 4 ChartSeriesControllers.My Problem is that the tablet is huzzeling hard to plot this amount of data in the Chart. And the UI is getting very janky/laggy.And the question is: Is there any way to optimize the real time chart to fluidly render the massive/fast amount of incoming data? I already tried the FastLineSeries, which was not really solving the problem for this usecase.Thank you very much and btw, your library is amazing! GreetingsBenjamin

Yuvaraj Gajaraj · Answer

Hi Benjamin,Greetings from Syncfusion. We have updated data every 20 ms
and removed the old point when the length of the data points reaches a thousand
using the updateDataSource method
and it is working smoothly without any lag, with the FastLineSeries.
We have attached the sample which is used for testing for your reference. If
still are you facing any issues, please let us know what the properties have
you enabled in the chart and when did you remove the old data from the chart
that will be more helpful to us to provide a solution sooner.We suggest you following things to improve the performance
of the chart if you have more data
 set
     the animationDuration to
     zero
 enabling
     the data label with more data will not look good in appearance and if more
     data label gets plotted, we may not be aware of which point the data label
     belongs to, so you can disable such type of features. 
 we
     have a concept for on-demand loading, here you can load a certain amount
     of data alone based on the needs. We have shared the demo and user guide
     below on this.
Demo: https://flutter.syncfusion.com/#/cartesian-charts/infinite-scrolling
UG: https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading#infinite-scrolling
Regards,Yuvaraj.Attachment: f175129_a206fb7e.zip

Benjamin Geiger · Answer

Hello Yuvaraj,thank you for your great support. There were some small tweaks i could use in my code.Most of it is exactly the way I do it in my code. Now that I know this is the right way of doing it I'm convinced that my Tablet (cheap) just has not enough processing power to handle it smoothly. Nevertheless it's still ok to use the app like it is right now.Thanks again for your help!!Regards,Benjamin

Yuvaraj Gajaraj · Answer

Hi Benjamin,Thanks for the update. If you have any further queries,
kindly get back to us, we are always happy to assist you.Regards,
Yuvaraj.