SfCartesianChart chart doesn't show after updated data from json in dart

Question

This is SfCartesianChart and I want to make it dynamic as per the rest API data given below but when I put the dynamic data to it, the graph shows only null in the legend text and no data shown but I've posted the required data. Kindly help me it's right or not.

SfCartesianChart _getSpacingColumnChart() {
    return SfCartesianChart(
      // borderColor: Colors.red,
      // borderWidth: 2,
      // Sets 15 logical pixels as margin for all the 4 sides.
      margin: EdgeInsets.all(0),
      plotAreaBorderWidth: 0,
      title: ChartTitle(
          // text: 'Inventory - Finished Products',
          // textStyle: TextStyle(
          //   fontSize: 18.0,
          //   color: Colors.blueAccent,
          // ),
          text: widget.title,
          // backgroundColor: Colors.lightGreen,
          // borderColor: Colors.blue,
          borderWidth: 2,
          // Aligns the chart title to left
          alignment: ChartAlignment.center,
          // ignore: deprecated_member_use
          textStyle: ChartTextStyle(
            color: Colors.blueAccent,
            // fontFamily: 'Roboto',
            // fontStyle: FontStyle.italic,
            fontSize: 11,
          )),
      primaryXAxis: CategoryAxis(
        majorGridLines: MajorGridLines(width: 0),
      ),
      primaryYAxis: NumericAxis(
          // maximum: 150,
          // minimum: 0,
          interval: 25,
          axisLine: AxisLine(width: 0),
          majorTickLines: MajorTickLines(size: 0)),
      palette: <Color>[
        Color.fromRGBO(15, 207, 105, 1.0),
        Color.fromRGBO(242, 209, 106, 1.0),
        Color.fromRGBO(0, 72, 205, 1.0)
      ],
      series: _getDefaultColumn(),
      legend: Legend(
          isVisible: true,
          // Legend will be placed at the bottom
          position: LegendPosition.bottom,
          // Overflowing legend content will be wraped
          overflowMode: LegendItemOverflowMode.wrap),
      // tooltipBehavior: TooltipBehavior(
      //     enable: true,
      //     canShowMarker: true,
      //     header: '',
      //     format: 'point.y marks in point.x'),
      tooltipBehavior: TooltipBehavior(enable: true),
    );
  }

List<ColumnSeries<ColumnChartDataModel, String>> _getDefaultColumn() {
    List<ColumnChartDataModel> chartData = <ColumnChartDataModel>[];

    for (Map i in widget.data)
      chartData
          .add(ColumnChartDataModel.fromJson(i) // Deserialization step #3
      );
    print('chartDataNewchartDataNew=>${widget.data}');

    return <ColumnSeries<ColumnChartDataModel, String>>[
      ColumnSeries<ColumnChartDataModel, String>(

          /// To apply the column width here.
          width: isCardView ? 0.8 : _columnWidth,

          /// To apply the spacing betweeen to two columns here.
          spacing: isCardView ? 0.2 : _columnSpacing,
          animationDuration: 3000,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(2), topRight: Radius.circular(2)),
          dataSource: chartData,
          // color: const Color.fromRGBO(252, 216, 20, 1),
          xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
          yValueMapper: (ColumnChartDataModel sales, _) => sales.y,
          dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelAlignment: ChartDataLabelAlignment.top,
              textStyle: TextStyle(fontSize: 10, color: Colors.white)),
          name: 'In'),
      ColumnSeries<ColumnChartDataModel, String>(
          dataSource: chartData,
          width: isCardView ? 0.8 : _columnWidth,
          spacing: isCardView ? 0.2 : _columnSpacing,
          animationDuration: 3000,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(2), topRight: Radius.circular(2)),
          // color: const Color.fromRGBO(169, 169, 169, 1),
          xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
          yValueMapper: (ColumnChartDataModel sales, _) =>
              sales.secondSeriesYValue,
          dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelAlignment: ChartDataLabelAlignment.top,
              textStyle: TextStyle(fontSize: 10, color: Colors.white)),
          name: 'Out'),
      ColumnSeries<ColumnChartDataModel, String>(
          dataSource: chartData,
          width: isCardView ? 0.8 : _columnWidth,
          spacing: isCardView ? 0.2 : _columnSpacing,
          animationDuration: 3000,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(2), topRight: Radius.circular(2)),
          // color: const Color.fromRGBO(205, 127, 50, 1),
          xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
          yValueMapper: (ColumnChartDataModel sales, _) =>
              sales.thirdSeriesYValue,
          dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelAlignment: ChartDataLabelAlignment.top,
              textStyle: TextStyle(fontSize: 10, color: Colors.white)),
          name: 'Stock')
    ];
  }

this page is the model data

Model Data

/// Package import
import 'package:flutter/material.dart';

/// Base class of the sample's stateful widget class
abstract class ColumnChartModel extends StatefulWidget {
  /// base class constructor of sample's stateful widget class
  const ColumnChartModel({Key key}) : super(key: key);
}

/// Base class of the sample's state class
abstract class ColumnChartModelState extends State<ColumnChartModel> {

  /// Holds the information of current page is card view or not
  bool isCardView;

  @override
  void initState() {
    isCardView = true;
    super.initState();
  }

  /// Get the settings panel content.
  Widget buildSettings(BuildContext context) {
    return null;
  }
}

///Chart sample data
class ColumnChartDataModel {
  /// Holds the datapoint values like x, y, etc.,
  ColumnChartDataModel(
      this.x,
        this.y,
        this.xValue,
        this.yValue,
        this.secondSeriesYValue,
        this.thirdSeriesYValue,
        this.pointColor,
        this.size,
        this.text,
        this.open,
        this.close,
        this.low,
        this.high,
        this.volume);

  /// Holds x value of the datapoint
  final dynamic x;

  /// Holds y value of the datapoint
  final num y;

  /// Holds x value of the datapoint
  final dynamic xValue;

  /// Holds y value of the datapoint
  final num yValue;

  /// Holds y value of the datapoint(for 2nd series)
  final num secondSeriesYValue;

  /// Holds y value of the datapoint(for 3nd series)
  final num thirdSeriesYValue;

  /// Holds point color of the datapoint
  final Color pointColor;

  /// Holds size of the datapoint
  final num size;

  /// Holds datalabel/text value mapper of the datapoint
  final String text;

  /// Holds open value of the datapoint
  final num open;

  /// Holds close value of the datapoint
  final num close;

  /// Holds low value of the datapoint
  final num low;

  /// Holds high value of the datapoint
  final num high;

  /// Holds open value of the datapoint
  final num volume;

  // factory ColumnChartDataModel.fromJson(Map<String, dynamic> json) => ColumnChartDataModel(
  //   x: json["x"],
  //   y: json["y"],
  //   secondSeriesYValue: json["secondSeriesYValue"],
  //   thirdSeriesYValue: json["thirdSeriesYValue"],
  // );

  factory ColumnChartDataModel.fromJson(Map<String, dynamic> parsedJson) {
    return ColumnChartDataModel(
        parsedJson['x'].toString(),
        parsedJson['y'] as num,
        parsedJson['secondSeriesYValue'] as num,
        parsedJson['thirdSeriesYValue'] as num,
        parsedJson['xValue'] as dynamic,
        parsedJson['yValue'] as num,
        parsedJson['pointColor'] as Color,
        parsedJson['size'] as num,
        parsedJson['text'] as String,
        parsedJson['open'] as num,
        parsedJson['close'] as num,
        parsedJson['low'] as num,
        parsedJson['high'] as num,
        parsedJson['volume'] as num);
  }
}

widget.data == [{productName: abcd-4, totalIn: 10, totalOut: 40, currentStock: 270}, {productName: afegwt-10 Pairs, totalIn: 110, totalOut: 80, currentStock: 530}]

widget.title == "some text"

Please help me.. Thankx in advance.

Answer 1

In the json data the key names should be matched as per the data model created. or you have to put separate instead of .fromJson() .