flutter problem: how to use dynamic data in chart? - flutter

Question

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"
}];

Answer 1

Map data to List<ChartData>, which the widget already understands.
final chartData = data.map((item) => ChartData(
item['name']!,
double.parse(item['weightage']!)
)).toList();