How to assign an array to spots in fl_chart in Flutter

Question

I am new to Flutter and just started using fl_charts which really looks fantastic. However I am struggling to move beyond demo LineChartSample1.

The sample code given here assigns values to spots as follows:

  spots: [
    FlSpot(1, 1.4),
    FlSpot(2, 3.4),
    FlSpot(3, 2),
    FlSpot(4, 2.2),
    FlSpot(5, 1.8),
  ],

In real life this obviously will have to be dynamic. Hence I need to assign values from an array of numbers like this:

myArray = [7578, 7547, 3578, 9875]

I can't figure out how to assign this array to spots assuming that first parameter to FlSpot is just a sequence like 0, 1, 2, 3 ... and second parameter coming from myArray.

I need something like FlSpot(x++, myArray[x]) in a loop.

which type of chart are you using? – Darish Feb 18 '20 at 12:42 — Darish, Feb 18 '20 at 12:42
Line, Bar charts using https://pub.dev/packages/fl_chart – AnR Feb 18 '20 at 13:02 — AnR, Feb 18 '20 at 13:02

score 5 · Answer 1 · answered May 24 '20 at 14:37

sorry for the late answer, I will follow the fl-chart tag to answer earlier. There is an operator called map, it converts your current data to a new different data model. you can use like this:

final List<double> yValues = [
    1.3,
    1,
    1.8,
    1.5,
    2.2,
    1.8,
    3,
  ];

List<FlSpot> spots =  
      yValues.asMap().entries.map((e) {
         return FlSpot(e.key.toDouble(), e.value);
      }).toList(),

// now spots are [
//    FlSpot(0, 1.3),
//    FlSpot(1, 1),
//    FlSpot(2, 1.8),
//    FlSpot(3, 1.5),
//    FlSpot(4, 2.2),
//    FlSpot(5, 1.8),
//    FlSpot(6, 3),
//  ];

how can I plot the spots with 2 different arrays for the x and y axis respectively? — Falady, Nov 23 '22 at 03:55

score 1 · Answer 2 · answered Dec 22 '22 at 12:55

First you can pass the data static to fl_chart means the point you want to show there like this:

spots: [ FlSpot(1, 1.4), FlSpot(2, 3.4), FlSpot(3, 2), FlSpot(4, 2.2), FlSpot(5, 1.8), ],

for adding the dynamic value from list you have to use the code

RxList analyticPlots = [].obs;

List.generate(widget.list.length, (i) {

  analyticPlots.add(
      FlSpot(i.toDouble(), 
      double.parse(widget.list[i].value.toString())));

});

How to assign an array to spots in fl_chart in Flutter

2 Answers2

Linked