flutter problem: how to use dynamic data in chart?

I Have shared my api data which I stored in a list variable. I want to show my that list data in chart. How to do it?

I Have shared my api data which I stored in a list variable. I want to show my that list data in chart. How to do it?

this is my cart ui code


import 'package:bonanza_flutter/Constants/constants.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';


class OverviewPage extends StatefulWidget {

  const OverviewPage({Key? key})
      : super(key: key);

  @override
  _OverviewPageState createState() => _OverviewPageState();
}

class _OverviewPageState extends State<OverviewPage> {


  final List<ChartData> chartData = [
    ChartData('Healthcare', 25.5, Color.fromRGBO(9, 0, 136, 1)),
    ChartData('Education', 38, Color.fromRGBO(147, 0, 119, 1)),
    ChartData('Power', 34, Color.fromRGBO(228, 0, 124, 1)),
    ChartData('Manufacture', 52, greyColor),
    ChartData('Agriculture', 52, greenColor),
    ChartData('Services', 52, orangeColor),
    ChartData('Others', 52, green2Color),
  ];



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(20, 10, 20, 0),
                  child: Text(
                    "Sector Bifurcation",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                  ),
                ),
                Container(
                    width: MediaQuery.of(context).size.width,
                    padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
                    child: SfCircularChart(
                        legend: Legend(
                            isVisible: true,
                            width: "130",
                            legendItemBuilder: (String name, dynamic series,
                                dynamic point, int index) {
                              return Container(
                                width: 174,
                                child: Row(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  children: [
                                    Row(
                                      children: [
                                        Container(
                                          decoration: BoxDecoration(
                                              borderRadius:
                                              BorderRadius.circular(40),
                                              color: point.color),
                                          height: 15,
                                          width: 15,
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.fromLTRB(
                                              9.0, 8, 15, 9),
                                          child: Text(
                                            point.x.toString(),
                                            style: TextStyle(
                                                color: blackColor,
                                                fontSize: tSize13,
                                                fontWeight: FontWeight.w500),
                                            textAlign: TextAlign.left,
                                          ),
                                        ),
                                      ],
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.fromLTRB(
                                          9.0, 8, 15, 9),
                                      child: Row(
                                        children: [
                                          Text(
                                            point.y.toString(),
                                            style: TextStyle(
                                                color: blackColor,
                                                fontSize: tSize13,
                                                fontWeight: FontWeight.w500),
                                          ),
                                          Text(
                                            "%",
                                            style: TextStyle(
                                                color: blackColor,
                                                fontSize: tSize13,
                                                fontWeight: FontWeight.w500),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              );
                            }),
                        series: <CircularSeries>[
                          DoughnutSeries<ChartData, String>(
                              dataSource: chartData,
                              pointColorMapper: (ChartData data, _) => data.color,
                              xValueMapper: (ChartData data, _) => data.x,
                              yValueMapper: (ChartData data, _) => data.y,
                              innerRadius: '60%'),
                        ],
                        annotations: <CircularChartAnnotation>[
                          CircularChartAnnotation(
                            widget: Container(
                                child: Text(
                                  'Sectors',
                                  style: TextStyle(
                                      fontSize: tSize16, fontWeight: FontWeight.w500),
                                )),
                          )
                        ])),
              ],
            ),
            
          ],
        ),
      ),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y, [this.color]);

  final String x;
  final double y;
  final Color? color;
}

This is my api data, I stored in list variable from api?

data = [ {
                "name": "Others",
                "weightage": "9.44"
            },
            {
                "name": "INFORMATION TECHNOLOGY",
                "weightage": "4.90"
            },
            {
                "name": "BANKS",
                "weightage": "22.72"
            },
            {
                "name": "PHARMA",
                "weightage": "5.09"
            },
            {
                "name": "INDUSTRIAL MACHINERY",
                "weightage": "2.57"
            },
            {
                "name": "FINANCIAL SERVICES",
                "weightage": "4.38"
            },
            {
                "name": "FOOTWEAR",
                "weightage": "1.75"
            },
            {
                "name": "CHEMICALS",
                "weightage": "4.50"
            },
            {
                "name": "OIL EXPL. SERVICES",
                "weightage": "2.12"
            },
            {
                "name": "APPARELS & ACCESSORIES",
                "weightage": "4.01"
            },
            {
                "name": "Industrial Machinery",
                "weightage": "1.80"
            },
            {
                "name": "Miscellaneous",
                "weightage": "20.16"
            },
            {
                "name": "Plastics",
                "weightage": "1.33"
            },
            {
                "name": "Auto Ancil",
                "weightage": "0.98"
            },
            {
                "name": "CONSTRUCTION",
                "weightage": "1.75"
            },
            {
                "name": "FMCG",
                "weightage": "1.21"
            },
            {
                "name": "Other/Misc",
                "weightage": "4.10"
            },
            {
                "name": "Finance",
                "weightage": "2.01"
            },
            {
                "name": "TEXTILES",
                "weightage": "2.81"
            },
            {
                "name": "Pharmaceuticals",
                "weightage": "2.01"
            }];

1 answer

  • answered 2022-05-04 15:50 user18309290

    Map data to List<ChartData>, which the widget already understands.

      final chartData = data.map((item) => ChartData(
        item['name']!, 
        double.parse(item['weightage']!)
      )).toList();
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum