Strange drawing in real time graph

[Michael]

Good morning,

I created a real time graph and I update the data with updateDataSource function using a fixed-length List.
I put a limit of points in the screen and when this one is reached I use updateDataSource with the param removedIndexes to remove 10 points at the beginning of the graph and every 10 points I receive, I update them with addedIndexes. But in the graph after some points have been drawn, the following points have been drawn in a strange way as in the video example.

Could you help me, please?

Thank you

Attachment: strangeDrawing.mp4_1cd2e61.zip

[Yuvaraj Gajaraj]

Hi Michael,

Greetings from Syncfusion. We suspect that you have added nonlinear data to your chart which is the reason you are getting strange behavior. So, we suggest you use the sortingOrder property in ascending order and map the x value to the sortFieldValueMapper property. It will render a chart in ascending order only, we hope it will help you to achieve your requirement. We have attached the code snippet for your reference.

Code snippet:

LineSeries<ChartSampleData, num>(

  sortingOrder: SortingOrder.ascending,

  sortFieldValueMapper: (ChartSampleData data, _) => data.x,

  //Other required property

)

UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#sorting 

Regards,

Yuvaraj.

[Michael]

Hi Yuvaraj,

thank you for your advice, I tried to implement your solution but it can't resolve the problem.

I tested my code (so at the beginning without the sortingOrder param) in landscape mode and the graph has been drawn well. The same thing happens with the sortingOrder param with landscape mode.

In the end I think it depends on the screen size, maybe a wrong updateDataSource could be the problem?

I receive the live data every about 10 milliseconds.

This is my code if could be useful:

initialization of data

List<LiveData> data = List<LiveData>.generate(L, (i) => LiveData(i * 5.0,130000));
int c = 0;
int maxPointsGraph = 600;
int N = 10;

just before getting live data (only once before the communication starts)

_dataSeriesController.updateDataSource(
     removedDataIndexes: [for (var i = 0; i < maxPointsGraph; i += 1) i]);

updating data fixed-length list (every time I receive data so about every 10 milliseconds)

data[c] = (LiveData(time, someData0.toDouble()));
data[c + 1] = (LiveData(time + 5.0, someData1.toDouble()));
time += 10.0;
c += 2;

updating graph (only when the condition is true, obv)

if ((c % N) == 0) {

   _dataSeriesController.updateDataSource(
        addedDataIndexes: [for (var i = c - N; i < c; i += 1) i]);

   if (c == maxPointsGraph) {
        c = c - N;
        _dataSeriesController.updateDataSource(        
            removedDataIndexes: [for (var i = 0; i < N; i += 1) i]);
   }
}

Thank you a lot again for your help

Regards

Michael

[Sriram Kiran Senthilkumar]

Hi Michael,

We are analyzing the reported scenario at our end and yet we need time on this. We will update you in two business days (19 April 2022) and we appreciate your patience until then.

Regards,

Sriram Kiran

[Yuvaraj Gajaraj]

Hi Michael,

We would like to inform you that, in the updateDataSource method, we will render the points based on the given order, we will not perform sorting here. To improve the performance of the chart in updating the data, we have provided this updateDataSource method and in this method, we will be processing only the required data points, we will avoid old points processing, bounds calculation, sorting, etc as these things will degrade the performance. So, if you wish to sort the data source in the dynamic updates too, you can make use of setstate to refresh the chart widget by using the sortingOrder and sortFieldValueMapper properties. 

UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#sorting

Regards,

Yuvaraj.

[Michael]

Hi Yuvaraj,

thank your for your reply, but I don't want to sort the data. I receive data from a stream ble and I would to draw this data in a real time chart.

thanks

regards

Michael

[Yuvaraj Gajaraj]

Hi Michael,

On further checking your queries, we are not clear on your exact requirement. In your first query, you have told like the series rendering looks strange, so that case might occur if the data is not get sorted, so we have provided suggestions to sort the data. And in your last update you have told like to get data and using that data needs to draw real time chart. From your previous updates, we suspect that using the updateDataSource method, you have already achieved that scenario. So, currently we are not clear on your exact requirement, so can you please more precise on your requirement, so that we can provide you the solution sooner.

Regards,

Yuvaraj.

[Michael]

Hi Yuvaraj,

I'm sorry if I've not been clear with the requirement.

I try to draw a real time graph with points which I receive every 10 milliseconds and I update the graph using the code above in the previous reply.

The problem is that with some screen sizes the graph it's been drawn well while with other screen sizes the drawings are like in the video I sent to you.

I don't understand if the problem is in my code or it is a bug.

I hope to have been more clear

I apologize again

If there's some further information I can give you, tell me and I'll be glad to give it to you

Regards,

Michael

[Yuvaraj Gajaraj]

Hi Michael,

We have analyzed your code snippet and found that you have removed the 600 data initially and kept the rest of the data in the list then assigned the data at the starting 10 positions. For example, consider you are having the x-values from 1 to 610, you have deleted the first 600 data, and refreshed the chart with the remaining x-values from 601 to 610. Now, if you add x-values between 1 to 600, the line will draw back as per the provided video. So, this is not a bug, it’s a behavior and the chart will render like this irrespective of screen size.

If you have any further queries, please get back to us.

Regards,

Yuvaraj

[Michael]

Hi Yuvaraj

Thanks again for your support. I will check and I will attempt to fix my code.

For the moment thank you again

Regards

Michael

[Yuvaraj Gajaraj]

Hi Michael,

Thanks for the update. We are always happy to assist you, if you have any further queries, please get back to us.

Thanks,

Yuvaraj.