How to render a Flutter chart using the JSON data?

Question

I am new to flutter can someone please help me how to render chart using JSON data.

This is my JSON data.

{
    "data": {
        "container_id": 123,
        "container_serial_no": "CM22TLB101",
        "readings": [
            {
                "temperature": [
                    {
                        "timestamp": "2023-03-10T12:00:00.562060",
                        "value": 19.56
                    },
                    {
                        "timestamp": "2023-03-10T12:00:02.573979",
                        "value": 19.56
                    },
                    {
                        "timestamp": "2023-03-10T12:00:02.744149",
                        "value": 19.56
                    },
                    {
                        "timestamp": "2023-03-10T12:00:04.653301",
                        "value": 19.56
                    },
                    {
                        "timestamp": "2023-03-10T12:00:06.633112",
                        "value": 19.56
                    }
                ]
            },
            {
                "liquidNitrogenLevel": [
                    {
                        "timestamp": "2023-03-10T12:00:00.562060",
                        "value": 72
                    },
                    {
                        "timestamp": "2023-03-10T12:00:02.573979",
                        "value": 72
                    },
                    {
                        "timestamp": "2023-03-10T12:00:02.744149",
                        "value": 73
                    },
                    {
                        "timestamp": "2023-03-10T12:00:04.653301",
                        "value": 73
                    },
                    {
                        "timestamp": "2023-03-10T12:00:06.633112",
                        "value": 70
                    }
                ]
            },
            {
                "battery": [
                    {
                        "timestamp": "2023-03-10T12:00:00.562060",
                        "value": 4.8
                    },
                    {
                        "timestamp": "2023-03-10T12:00:02.573979",
                        "value": 4.8
                    },
                    {
                        "timestamp": "2023-03-10T12:00:02.744149",
                        "value": 4.8
                    },
                    {
                        "timestamp": "2023-03-10T12:00:04.653301",
                        "value": 4.8
                    }
                ]
            }
        ]
    },
    "status": "success"
}

Below is my model class

class ChartModel {
  Data? data;
  String? status;

  ChartModel({this.data, this.status});

  ChartModel.fromJson(Map<String, dynamic> json) {
    data = json['data'] != null ? new Data.fromJson(json['data']) : null;
    status = json['status'];
  }
}

//class Data

class Data {
  int? containerId;
  String? containerSerialNo;
  List<Readings>? readings;

  Data({this.containerId, this.containerSerialNo, this.readings});

  Data.fromJson(Map<String, dynamic> json) {
    containerId = json['container_id'];
    containerSerialNo = json['container_serial_no'];
    if (json['readings'] != null) {
      readings = <Readings>[];
      json['readings'].forEach((v) {
        readings!.add(new Readings.fromJson(v));
      });
    }
  }
}

//class Readings

class Readings {
  List<Temperature>? temperature;
  List<LiquidNitrogenLevel>? liquidNitrogenLevel;
  List<Battery>? battery;

  Readings({this.temperature, this.liquidNitrogenLevel, this.battery});

  Readings.fromJson(Map<String, dynamic> json) {
    if (json['temperature'] != null) {
      temperature = <Temperature>[];
      json['temperature'].forEach((v) {
        temperature!.add(new Temperature.fromJson(v));
      });
    }
    if (json['liquidNitrogenLevel'] != null) {
      liquidNitrogenLevel = <LiquidNitrogenLevel>[];
      json['liquidNitrogenLevel'].forEach((v) {
        liquidNitrogenLevel!.add(new LiquidNitrogenLevel.fromJson(v));
      });
    }
    if (json['battery'] != null) {
      battery = <Battery>[];
      json['battery'].forEach((v) {
        battery!.add(new Battery.fromJson(v));
      });
    }
  }
}

//class Temperature

class Temperature {
  String? timestamp;
  var value;

  Temperature({this.timestamp, this.value});

  Temperature.fromJson(dynamic json) {
    timestamp = json['timestamp'];
    value = json['value'];
  }
}

//class LiquidNitrogenLevel

class LiquidNitrogenLevel {
  String? timestamp;
  var value;

  LiquidNitrogenLevel({this.timestamp, this.value});

  LiquidNitrogenLevel.fromJson(Map<String, dynamic> json) {
    timestamp = json['timestamp'];
    value = json['value'];
  }
}

//class Battery

class Battery {
  String? timestamp;
  var value;

  Battery({this.timestamp, this.value});

  Battery.fromJson(Map<String, dynamic> json) {
    timestamp = json['timestamp'];
    value = json['value'];
  }
}

how to show the charts for Temperature, LiquidNitrogenLevel and Battery.

Thanks in advance.

I tried to read the data using the model class but i am getting error.

code:

final serviceData = context.read<ChartService>().model;
var lst = serviceData!.data!.readings!;
    print('len: ${serviceData!.data!.readings![0].temperature!}');
    for (int i = 0; i < lst!.length; i++) {
      (lst[i].temperature!)
          .map(
            (e) => Temperature.fromJson(e),
          )
          .toList();
    }

error:

Class 'Temperature' has no instance method '[]'.
Receiver: Instance of 'Temperature'
Tried calling: []("timestamp")

Can anyone help me on this.

Answer 1

Try this lib, it's free and pretty easy to customize: fl_chart

As for the error of getting data from json, try it in your class:

factory Temperature.fromJson(Map<String, dynamic> json) => Temperature(
    timestamp: json['timestamp'],
    value: json['value'],
  );