here I display data from the database on the flutter chart, but when in the browser it looks like this .if this is my code

class Chart extends StatefulWidget {
  final String ..;

  Chart({this.user_id, this.projectName, this.userName});
  @override
  _ChartState createState() => _ChartState(user_id: this.user_id, projectName: this.projectName, userName: this.userName);
}

class _ChartState extends State<Chart> {
  String /..;

  _ChartState({this.projectName, this.user_id, this.userName});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FutureBuilder(
        future: ActivityController.getWorkTimeByUiPn({
      "user_id": user_id,
      "project_name": projectName,
    }),
        builder: (context, snapshot) {
          if (snapshot.hasError);
          return snapshot.hasData
              ? Itemchart(
                  iList: snapshot.data,
                )
              : Center();
        },
      ),
    );
  }
}

class OrdinalSales {
  final String name;
  final int count;

  OrdinalSales(this.name, this.count);
}

class Itemchart extends StatelessWidget {
  final List<dynamic> iList;
  Itemchart({this.iList});

  @override
  Widget build(BuildContext context) {
    List<OrdinalSales> tsdata = [];
    if(iList != null){
      for (final i in iList) {
        try{
          tsdata.add(OrdinalSales(i['project_name'], i['durasi']));
        }catch (e) {
          print(e.toString());
        }
      }
    }else{
      return Text("NULL");
    }

    var series = [
      charts.Series(
        domainFn: (OrdinalSales ordinalsales, _) => ordinalsales.name,
        measureFn: (OrdinalSales ordinalsales, _) => ordinalsales.count,
        id: 'OrdinalSales',
        data: tsdata,
      )
    ];
    var chart = charts.BarChart(series, animate: true);
    var chartWidget = Padding(
      padding: EdgeInsets.all(32.0),
      child: SizedBox(
        width: 700.0,
        height: 400.0,
        child: chart,
      ),
    );
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Jumlah  : ${iList.length.toString()}",
              style: Theme.of(context).textTheme.title,
            ),
            chartWidget,
            //Text(tsdata.toString())
          ],
        ),
      ],
    );
  }
}

the data doesn't appear, I'm a little confused here because when I try to print (tsdata.toString ()) the result [].. I think the data is missing / not included in the OrdinarySales class or in the tsdata? and when I try print (iList.toString ()) the data is there


Solution 1: Kherel

Probably iList is a List of Strings, check that it is List of Objects with needed keys.

for (var i in iList) {
  print(i.runtimeType);
}

try something like:

Itemchart(iList: [
        {'project_name': 'first', 'durasi': 1},
        {'project_name': 'second', 'durasi': 2},
        {'project_name': 'third', 'durasi': 3},
      ]),
    ),

if you see your chart, the problem is with the data, and not with the chart or OrdinalSales class, so code that you provide is working well. But it's hard fro me to say what is wrong with the iList data, because I don't see it..

hope it will help you to make a next step in right direction