data is not plotted sequentially in LineSeries

Question

I have problems when viewing the data in the line graph.

I get the data from firestore, and when a new data arrives it is not sorted in a straight way but the new data joins the nearest point.

I want the data to be displayed as in the second image

Rokesh Karthikeyan · Answer

Hi Aldair,

Greetings from Syncfusion.

We have analyzed your query. The data points will be rendered in the order it is specified and this is the default behavior of charts. And for your scenario, you can use the sorting feature in the chart. Specify the x value field in the sortFieldValueMapper property and also specify ascending value for sortingOrder property. Now the dynamic data points will also be sorted and rendered properly. Please find the code snippet below.

[Dart]

SfCartesianChart(

series: <LineSeries<OrdinalSales, int>>[

LineSeries<OrdinalSales, int>(

dataSource: chartData,

sortingOrder: SortingOrder.ascending,

sortFieldValueMapper: (OrdinalSales sales, _) => sales.country,

xValueMapper: (OrdinalSales sales, _) => sales.country,

yValueMapper: (OrdinalSales sales, _) => sales.sales

)

]

)

The below screenshot shows the default behavior.

Whereas the below screenshot shows the sorted rendering.

Please check this and let us know if you face any concerns.

Thanks,

Rokesh Karthikeyan

Aldair Ramiro Turizo Gamarra · Answer

Thank you very much, your help has helped me a lot.

Dharanidharan Dharmasivam · Answer

Hi Aldair, 
 
Most welcome. Kindly get back to us if you have further queries, we are always happy in assisting you. 
 
Thanks, 
Dharani.