How to implement data in chart_flutter time series?

Question

I am trying to implement api data inside of chart_flutter time series. But i have a problem while implement it. Here is how my code look below:

class TankChart extends StatefulWidget {
  TankChart({Key key}) : super(key: key);
  @override
  _TankChartState createState() => _TankChartState();
}

class _TankChartState extends State<TankChart> {
  var ping;
List<charts.Series<TankPingProvider, dynamic>> series = [
        charts.Series(
          id: 'Tank Ping',
          data: ping,
          domainFn: (TankPingProvider pings, _) => pings.tankPing[number.toString()][index].trackedAt,
          measureFn: (TankPingProvider pings, _) => pings.tankPing[number.toString()][index].volume
        )
      ];

      return charts.TimeSeriesChart(
        series,
        animate: true,
      );
     
    });
  }
}

As you can see, i have error in this line of code:

data: ping,

and here:

series,

The error is:

The argument type 'TankPingProvider' can't be assigned to the parameter type 'List<TankPingProvider>'.

Is there anyway to implement the data?

Here is how my api look:

{
    "1": [
        {
            "tracked_at": "2020-11-29T17:33:42.000000Z",
            "fuel": 71.05,
            "level": 2.4867087,
            "volume": 41671.1
        },
        {
            "tracked_at": "2020-11-30T01:41:41.000000Z",
            "fuel": 70.04,
            "level": 2.451534,
            "volume": 41031.36
        },
        {
            "tracked_at": "2020-11-30T01:44:05.000000Z",
            "fuel": 68.47,
            "level": 2.396358,
            "volume": 40015.56
        },
        {
            "tracked_at": "2020-11-30T01:46:47.000000Z",
            "fuel": 66.89,
            "level": 2.341182,
            "volume": 38985.96
        },
]
}

And i use model instead of series. Here is how my model looks like:

import 'dart:convert';

Map<String, List<TankPing>> tankPingFromJson(dynamic str) => Map.from(json.decode(str)).map((k, v) => MapEntry<String, List<TankPing>>(k, List<TankPing>.from(v.map((x) => TankPing.fromJson(x)))));

String tankPingToJson(Map<String, List<TankPing>> data) => json.encode(Map.from(data).map((k, v) => MapEntry<String, dynamic>(k, List<dynamic>.from(v.map((x) => x.toJson())))));

class TankPing {
    TankPing({
        this.trackedAt,
        this.fuel,
        this.level,
        this.volume,
    });

    DateTime trackedAt;
    double fuel;
    double level;
    double volume;

    factory TankPing.fromJson(Map<String, dynamic> json) => TankPing(
        trackedAt: DateTime.parse(json["tracked_at"]),
        fuel: json["fuel"].toDouble(),
        level: json["level"].toDouble(),
        volume: json["volume"].toDouble(),
    );

    Map<String, dynamic> toJson() => {
        "tracked_at": trackedAt.toString(),
        "fuel": fuel,
        "level": level,
        "volume": volume,
    };
}

Any help would be appreciate.

Solution

The root of issue is the chart's datasource needs a List there while you put a Map in your code.

To fix it, convert all the items in the api result to a List< TankPingProvider> and it should work.

Comments

[Aiman_Irfan]

Hey there, i have change the TankPingProvider as you said. But now, i have this error: "The argument type 'List<Series<TankPingProvider, dynamic>>' can't be assigned to the parameter type 'List<Series<dynamic, DateTime>>'" When i look at my code, i cannot find the 'DateTime'.

[Q.u.a.n.g L.]

Because you are using a TimeSeriesChart, that requires exactly the Datetime type, not the dynamic one. Change the List<charts.Series<TankPingProvider, dynamic>> series to List<charts.Series<TankPingProvider, DateTime>> series.

[Aiman_Irfan]

alright, i have change it. But when you say change all the items in api to a List, do i have to change it from the model or just put an Empty List variable and then make it a list?

[Q.u.a.n.g L.]

You can do anything comfortable for you. Since the chart requires a List as the input while the api response is a Map. So either the server alternates the response to a List directly or you take an extra step to convert the Map to List. Both will work in your case :)

[Aiman_Irfan]

Alright Thank You very much. I really appreciate your help :)

[Aiman_Irfan]

Hey there @Quang L. Can you help me convert a Map object to List?

[Q.u.a.n.g L.]

@Aiman_Irfan try this YOUR_MAP_HERE.values.expand((i) => i).toList()

[Aiman_Irfan]

Do i need to add it inside of a set State?