syncfusion_flutter_charts not provide all my data

Question

I am trying to use this chart package and retrieve the data from firebase the data is added by the user for example if Alex added 300 then added 400 I will add to the firebase tow different document one for 300 and one for 400 like in this photo all of these document for one user

So, I want to retrieve all of the values and dates from all document for every user and provide chart with these information note : my application is linking the elderly user with his watcher the elderly user will add his glucose value from his home and the chart will displayed in the watcher home this is my code which goes correctly but I am only having one column in my chart I tried to print the list length and it give me 4 which equals the number of document

  Widget build(BuildContext context) {
    Future getElderlyId() async {
      await FirebaseFirestore.instance
          .collection('users')
          .doc(FirebaseAuth.instance.currentUser.uid)
          .get()
          .then((data) {
        setState(() {
          elderlyId = data.data()['elderlyId'];
        });
      });
    }

return Scaffold(
    body: StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('glucose')
            .where('uid', isEqualTo: elderlyId)
            .snapshots(),
        builder: (context, snapshot) {
          if (snapshot.data == null) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          final doc = snapshot.data.docs;
          return ListView.builder(
              itemCount: 1,
              itemBuilder: (ctx, index) {
                List<ChartData> chartData = <ChartData>[];
                for (int i = 1; i <= doc.length; i++) {
                  chartData.add(
                      ChartData(doc[index]['date'], doc[index]['glucose']));
                }
                print(chartData.length);
                return Container(
                  child: Column(
                    children: [
                      Text(
                        "رسم بياني لمستويات الضغط خلال اسبوع",
                        style: textStyle2,
                      ),
                      Directionality(
                        textDirection: TextDirection.ltr,
                        child: SfCartesianChart(
                            plotAreaBorderWidth: 0,
                            margin: EdgeInsets.all(10),
                            primaryXAxis: CategoryAxis(
                              maximumLabelWidth: 80,
                            ),
                            primaryYAxis: CategoryAxis(
                              maximumLabelWidth: 80,
                            ),
                            enableAxisAnimation: true,
                            // borderColor: yellow,
                            series: <CartesianSeries<ChartData, dynamic>>[
                              ColumnSeries<ChartData, dynamic>(
                                color: yellow,
                                dataSource: chartData,
                                xAxisName: "days",
                                yAxisName: "values",
                                // color: yellow,
                                animationDuration: 20,
                                xValueMapper: (ChartData gelu, _) =>
                                    gelu.xValue,
                                yValueMapper: (ChartData gelu, _) =>
                                    gelu.yValue,
                              )
                            ]),
                      ),
                    ],
                  ),
                );
              });
        }));

} }

class ChartData {
  ChartData(this.xValue, this.yValue);
  String xValue;
  double yValue;
}

here is my output which give me only the information of the first document please if any one could give me the solution

Answer 1

I think you need something like this :

Widget build(BuildContext context) {
    Future getElderlyId() async {
      await FirebaseFirestore.instance
          .collection('users')
          .doc(FirebaseAuth.instance.currentUser.uid)
          .get()
          .then((data) {
        setState(() {
          elderlyId = data.data()['elderlyId'];
        });
      });
    }

    return Scaffold(
        body: StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection('glucose')
                .where('uid', isEqualTo: elderlyId)
                .snapshots(),
            builder:
                (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.hasData) {
                // return Center(
                //   child: CircularProgressIndicator(),
                // );

                List<ChartData> chartData = [];
                for (int index = 0;
                    index < snapshot.data.docs.length;
                    index++) {
                  DocumentSnapshot documentSnapshot = snapshot.data.docs[index];
                  chartData.add(ChartData.fromMap(documentSnapshot.data()));
                }

                return Container(
                  child: Column(
                    children: [
                      Text(
                        "رسم بياني لمستويات السكر خلال اسبوع",
                        style: textStyle2,
                      ),
                      Directionality(
                        textDirection: TextDirection.ltr,
                        child: SfCartesianChart(
                            plotAreaBorderWidth: 0,
                            margin: EdgeInsets.all(10),
                            // primaryXAxis: CategoryAxis(
                            //   maximumLabelWidth: 80,
                            // ),
                            primaryXAxis: DateTimeAxis(
                                // Interval type will be months
                                intervalType: DateTimeIntervalType.days,
                                interval: 1),
                            primaryYAxis: CategoryAxis(
                              maximumLabelWidth: 80,
                            ),
                            enableAxisAnimation: true,
                            // borderColor: yellow,
                            series: <CartesianSeries<ChartData, dynamic>>[
                              ColumnSeries<ChartData, dynamic>(
                                color: yellow,
                                dataSource: chartData,
                                xAxisName: "days",
                                yAxisName: "values",
                                // color: yellow,
                                animationDuration: 20,
                                xValueMapper: (ChartData gelu, _) =>
                                    gelu.xValue,
                                yValueMapper: (ChartData gelu, _) =>
                                    gelu.yValue,
                              )
                            ]),
                      ),
                    ],
                  ),
                );
              } else {
                return CircularProgressIndicator();
              }
            }));
  }
}

class ChartData {
  ChartData(this.xValue, this.yValue);
  ChartData.fromMap(Map<String, dynamic> dataMap)
      : xValue = dataMap['date'],
        yValue = dataMap['glucose'];
  Timestamp xValue;
  double yValue;
}