Line chart representation of List containing double values - flutter

Question

I have Lists of values containing double type numbers and each of this lists contains about 5000 values. Each of this lists has been collected from a microcontroller within 60 seconds.
I want to create a line chart to show the variance of this values. I tried to use the Spline Chart in Flutter but I cannot manage to make it read values from a list as its throwing this error:
The return type 'List?' isn't a 'num?', as required by the closure's context.
and here is the code:
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, [5.5,0.6]),
ChartData(20, [2.5,0.6]),
ChartData(30, [1.5,0.6]),
ChartData(40, [0.5,0.6]),
ChartData(50, [0.5,3.6]),
ChartData(60, [0.5,2.6]),
ChartData(70, [0.5,1.6]),
ChartData(80, [0.5,0.63]),
ChartData(90, [0.5,0.126]),
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: <ChartSeries>[
// Renders spline chart
SplineSeries<ChartData, int>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
)
]
)
)
)
);
}
}
class ChartData {
ChartData(this.x, this.y);
final int x;
final List? y;
}
I tried to create a list that has few values and called some elements from each list to the chart. It looked like this:
List x =[1.0,1.2,1.3,1.5,1.9,1.8,1.9,2.9,3.9,1.9,1.8,1.4];
#override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, x[1]),
ChartData(20, x[2]),
ChartData(30, x[0]),
ChartData(40, x[4]),
ChartData(50, x[5]),
ChartData(60, x[6]),
ChartData(70, x[7]),
ChartData(80, x[8]),
ChartData(90, x[9]),
];
And this worked for me but Can I make it so I can call all the elemnts from the list to the chart.
Do you have any suggestion on how to make this thing happens.
thank you in advance

Answer 1

Your y in ChartData is List. And you try to assign it to num?
yValueMapper: (ChartData data, _) => data.y
If the length of y is not fixed, you can use this function to generate SplineSeries
List<SplineSeries> generateSplineSeries(List<ChartData> chartData){
List<SplineSeries> splines = [];
for(int i=0; i<chartData.first.y!.length; i++){
splines.add( SplineSeries<ChartData, int>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y![i],
));
}
return splines;
}
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(10, [5.5,0.6]),
ChartData(20, [2.5,0.6]),
ChartData(30, [1.5,0.6]),
ChartData(40, [0.5,0.6]),
ChartData(50, [0.5,3.6]),
ChartData(60, [0.5,2.6]),
ChartData(70, [0.5,1.6]),
ChartData(80, [0.5,0.63]),
ChartData(90, [0.5,0.126]),
];
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: generateSplineSeries(chartData),
)
)
)
);
}

Answer 2

#override
Widget build(BuildContext context) {
List x =[10.0,1.2,1.3,1.5,1.9,1.8,1.9,2.9,3.9,1.9,1.8,1.4];
final List<ChartData> chartData = [
ChartData(60,x),
];
List<SplineSeries> generateSplineSeries(List<ChartData> chartData){
List<SplineSeries> splines = [];
for(int i=0; i<chartData.first.y!.length; i++){
splines.add( SplineSeries<ChartData, int>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y![i],
));
}
return splines;
}
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
series: generateSplineSeries(chartData),
)
)
)
);
}
}
class ChartData {
ChartData(this.x, this.y);
final int x;
final List? y;
}