Flutter, I have This Type of Json from api i want to show multiline chart of every user. Users can increase or decrease on district basis selection inside application? I searched alot from Syncfusion library or from many others but i didnot find any way please help.

**[{"id":"1", "name":"fayyaz","date":"12-1-2021","count":"5"},
    {"id":"1", "name":"fayyaz","date":"13-1-2021","count":"7"},
    {"id":"1", "name":"fayyaz","date":"14-1-2021","count":"2"},
    {"id":"1", "name":"fayyaz","date":"15-1-2021","count":"15"},
    {"id":"1", "name":"fayyaz","date":"16-1-2021","count":"10"},
    {"id":"2", "name":"ali","date":"14-1-2021","count":"3"},
    {"id":"2", "name":"ali","date":"16-1-2021","count":"6"},
    {"id":"3", "name":"saad","date":"12-1-2021","count":"1"},
    {"id":"3", "name":"saad","date":"13-1-2021","count":"10"},
    {"id":"3", "name":"saad","date":"14-1-2021","count":"4"},
    {"id":"3", "name":"saad","date":"15-1-2021","count":"3"}];**


 SfCartesianChart(
                                          plotAreaBorderWidth: 0,
                                          title: ChartTitle(text: 'Monthly Progress'),
                                          legend: Legend(
                                              isVisible: isCardView ? false : true,
                                              overflowMode: LegendItemOverflowMode.wrap),
                                          primaryXAxis: CategoryAxis(
                                            // Axis will be rendered based on the index values
                                              interval: 1,
                                              labelRotation: 90,
                                              arrangeByIndex: true
                                          ),
                                          primaryYAxis: NumericAxis(
                                              edgeLabelPlacement: EdgeLabelPlacement.shift,
                                              // labelFormat: '{value}k',
                                              // minimum: 0,
                                              // maximum: 12,
                                              axisLine: const AxisLine(width: 0),
                                              majorTickLines: const MajorTickLines(color: Colors.transparent)
                                          ),
                                          tooltipBehavior: TooltipBehavior(enable: true),
                                          series: <ChartSeries<MonthlyCount, String>>
                                          [
                                            LineSeries<MonthlyCount, String>(
                                              animationDuration: 2500,
                                              width: 2,
                                              name: '',
                                              markerSettings: const MarkerSettings(isVisible: true),
                                              dataSource: chartDataMonthlyCount!,
                                              xValueMapper: (MonthlyCount sales, _) => sales.xaxis,
                                              yValueMapper: (MonthlyCount sales, _) => sales.collectCount,
                                            ),

                                          ]

                                      ),

CodePudding user response：

first use this site quichtype to create a model class from your json. then you can use this model to set data for charts. after you generate your model class from above site, let's call it User class. you can use it like this.

var json = jsonDecode(PutYourJsonHere);
List<Users> UsersList = json.map((e) => User.fromJson(e)).toList();

CodePudding user response：

We created a sample for your requirement that will parse given JSON data and convert it into multiple lists of a data source based on the id value in the JSON and rendered multiple line series. We have attached the code snippet below and KB for your reference.

KB: https://www.syncfusion.com/kb/11674/how-to-render-a-flutter-chart-using-the-json-data-sfcartesianchart

code snippet

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<SalesData> chartData = [];

  @override
  void initState() {
    loadSalesData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: FutureBuilder(
            future: getJsonFromAssets(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return SfCartesianChart(
                  primaryXAxis: DateTimeAxis(),
                  series: getLineChart(chartData),
                );
              } else {
                return const CircularProgressIndicator();
              }
            }));
  }

  Future<String> getJsonFromAssets() async {
    return await rootBundle.loadString('assets/data.json');
  }

  Future loadSalesData() async {
    final String jsonString = await getJsonFromAssets();
    final dynamic jsonResponse = json.decode(jsonString);
    for (Map<String, dynamic> i in jsonResponse) {
      // for(int i = 0; i < chartData.length)
      chartData.add(SalesData.fromJson(i));
    }
  }

  List<ChartSeries<SalesData, DateTime>> getLineChart(List<SalesData> data) {
    List<ChartSeries<SalesData, DateTime>> series = [];
    List<SalesData> _data = [];
    List<SalesData> _data1 = [];
    List<SalesData> _data2 = [];

    for (int i = 0; i < chartData.length; i  ) {
      chartData[i].id == 1
          ? _data.add(chartData[i])
          : chartData[i].id == 2
              ? _data1.add(chartData[i])
              : _data2.add(chartData[i]);
    }
    series.addAll([
      LineSeries(
          dataSource: _data,
          xValueMapper: (SalesData data, _) => data.date,
          yValueMapper: (SalesData data, _) => data.count),
      LineSeries(
          dataSource: _data1,
          xValueMapper: (SalesData data, _) => data.date,
          yValueMapper: (SalesData data, _) => data.count),
      LineSeries(
          dataSource: _data2,
          xValueMapper: (SalesData data, _) => data.date,
          yValueMapper: (SalesData data, _) => data.count)
    ]);
    return series;
  }
}

class SalesData {
  SalesData({
    this.id,
    this.name,
    this.date,
    this.count,
  });

  int? id;
  String? name;
  DateTime? date;
  int? count;

  factory SalesData.fromJson(Map<String, dynamic> json) => SalesData(
        id: int.parse(json["id"]),
        name: json["name"],
        date: DateFormat('dd-MM-yyyy').parse(json["date"]),
        count: int.parse(json["count"]),
      );
}