Question 126418 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Line chart representation of List containing double values

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    
@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;
}

  2. 0

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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search