Resolved: Line chart representation of List containing double values

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:

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),
                )
            )
        )
    );
  }

If you have better answer, please add a comment about this, thank you!

Resolved: Line chart representation of List containing double values

Resolved: How to efficient create SimpleITK image?

Resolved: How can I write CSS selector(s) that apply to table rows for all td elements on that row after a td with a certain class?

Resolved: How do I use SetWindowText with Unicode in Win32 using PowerShell?

Leave A Reply