Dynamically create series in line chart

[mehmet]

Hi
I have used your library to create line chart, but in the example all the series are created statically.

I want to create series dynamically. 

I tried something in my code but cant work it.

      series:<ChartSeries>[ 
        getChart()
       ]);
}

getChart() {
  for (var item in spesificConsumptionData) {
    return 
      // Initialize line series
      SplineSeries<_SpesificConsumptionData, String>(
        animationDuration: 1,
        dataSource: item,
        name: spesificConsumptionDataLegendTitle,
        xValueMapper: (_SpesificConsumptionData data, _) => data.x,
        yValueMapper: (_SpesificConsumptionData data, _) => data.y,
      );
   
  }
}

Can you help me with that?

Thanks 

[Yuvaraj Gajaraj]

Hi Mehmet, 

 

Greetings from Syncfusion. We have created a sample that will generate a line series dynamically and return the list of LineSeries. In this sample it has a method called getSeries it will generate a line series based on the length of the data source then returned the list of series. We have attached the sample below for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173253/ze/f173253-2039004757 

  

Since the provide code is not runnable, we have created the sample and returned the list of series in the getSeries method, kindly try with this and get back to us if you face still any issues. 

 

Regards, 

Yuvaraj. 

[mehmet]

Hi Yuvaraj,

This is exactly what i wanted. Thank you support team and you.

[Yuvaraj Gajaraj]

Hi Mehmet, 

 

Most welcome. If you have any further query, please get back to us, we are always happy to assist you. 

 

Regards, 

Yuvaraj. 

[mehmet]

Hi Yuvaraj,

I integrated this function in my code and it works dynamically but its rendering incorrect as follows 

https://prnt.sc/sMGFtTKgt6eD 

if you choose 1 series there is no problem.

https://prnt.sc/7E8dNkAUvVxK

Did you encounter this problem?

This series all x values sometimes different sometimes same Would you think is this a problem?

[Yuvaraj Gajaraj]

Hi Mehmet, 

 

Yes, if you add same x values, this scenario may occur. However, we have sortingOrder and sortFieldValueMapper properties in series, which helps you to sort the values based on the required filed and render a series in ascending or descending order. We have attached the code snippet below for your reference. 

 

Code snippet: 

LineSeries( 

  //Other required properties 

  sortingOrder: SortingOrder.ascending, 

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

) 

 

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

 

We hope it will help you to achieve your requirement. 

 

Regards, 

Yuvaraj. 

[mehmet]

Hi Yuvaraj,

I tried solution your mentioned in my project but i have still getting same problem. Even if only 1 data different then others, the different data appear at the end of the chart. Then chart gets mixing.

[Marismathan Gurusamy]

Hi Mehmet,

As stated in our previous update, we have sorted the x values in ascending order with the help of sortingOrder and sortFieldValueMapper properties all were working fine. We have attached the sample below which is used in the testing phase. Since we are not aware of your exact data source, kindly change and get back to us by modifying the attached sample, this will be useful to provide you with the solution sooner.

Sample: https://www.syncfusion.com/downloads/support/forum/173253/ze/dynamic_update-34137554

Regards,

Maris.

[mehmet]

Hi Marismathan,

I guess I couldn't explain the problem, sortingOrder and sortFieldValueMapper were working fine for me too.

If there is a data that does not match the dates and times in the 3 series, this data is thrown to the end of the graph.

Like this => https://prnt.sc/H5_yVMiqPdaz

Also, if I create this graph without being dynamic, there is no problem.

I hope I was able to explain.

[Shamini Kiruba Sobers]

Hi Mehmet,

We have analyzed the query with the data point which does not match the 3 series in the chart, we have given the data points(x-values) to the chart as per the data in your screenshot, but the series were rendering properly,

Since we could not replicate your scenario at our end, we request you to modify the attached sample with your data source and replicate your scenario in that, so that we can analyze and provide you with a prompt solution.

Screenshot:

Regards,

Yuvaraj.

Attachment: f173253__716ef05d.zip

[mehmet]

Hi Shamini,

I added my problematic dataset in main as an example on your dynamic_update.rar.

Thanks, good work.

Attachment: dynamic__update_946c1bf5_eba46fc1.rar

[Yuvaraj Gajaraj]

Hi Mehmet,

We have analyzed the attached document and suggest you use the arrangeByIndex property in the CategoryAxis it will help you to arrange the data point based on the index. We have attached the code snippet and demo sample link below for your reference.

Code snippet:

primaryXAxis: CategoryAxis(

   arrangeByIndex: true,

   ),

UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#indexed-category-axis

Demo sample: https://flutter.syncfusion.com/#/cartesian-charts/axis-types/category/arranged-by-index

Regards,

Yuvaraj.

[mehmet]

Hi Yuvaraj,

That's property solved my problem. Thanks for your time.

Good works.

[Yuvaraj Gajaraj]

Hi Mehmet,

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

Regards,

Yuvaraj.