the syncfusion charts can't fetch data from firebase

268 Views Asked by At

i have a syncfusion charts. i want the data fetch from firebase, but the data just for the xAxis and the yAxis just datetime type. i got a problem, the chart can't fetch the data from firebase. they only show the chart without the data line. this is my code :

  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: LiveChart());
  }
}

class LiveChart extends StatefulWidget {
  LiveChart({this.app});
  final FirebaseApp app;
  @override
  _LiveChartState createState() => _LiveChartState();
}

class _LiveChartState extends State<LiveChart> {
  int value;
  Timer timer;
  int count = 0;
  final dbRef = FirebaseDatabase.instance.reference();
  List<_ChartData> chartData = <_ChartData>[];
  Map<dynamic, dynamic> data;

  onUpdate() {
    setState(() {
      value = value;
    });
  }


  void _updateDataSource(Timer timer) {
    setState(() {
      if (count >= 59) {
        count = 0;
      }
      chartData.add(_ChartData(x: DateTime(2021, 1, 1, count), y1: data['y1']));

      if (chartData.length == 20) {
        chartData.removeAt(0);
      }
      count = count + 1;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: _showChart());
  }

  Widget _showChart() {
    return StreamBuilder(
        stream: dbRef.child("Data").onValue,
        builder: (context, snapshot) {
          Widget widget;

          if (snapshot.hasData &&
              !snapshot.hasError &&
              snapshot.data.snapshot.value != null) {
            List<dynamic> snaps =
                new List(snapshot.data.snapshot.value["Moisture"]);

            if (snaps != null && count < snaps.length) {
              data = snaps[count];
              timer = Timer.periodic(
                  Duration(milliseconds: 4000), _updateDataSource);
            }

            widget = Container(
              child: SfCartesianChart(
                tooltipBehavior: TooltipBehavior(enable: true),
                primaryXAxis: DateTimeAxis(),
                series: <LineSeries<_ChartData, DateTime>>[
                  LineSeries<_ChartData, DateTime>(
                    dataSource: chartData,
                    xValueMapper: (_ChartData data, _) => data.x,
                    yValueMapper: (_ChartData data, _) => data.y1,
                  )
                ],
              ),
            );
          } else {
            widget = Center(child: CircularProgressIndicator());
          }

          return widget;
        });
  }

  @override
  void dispose() {
    super.dispose();
    timer?.cancel();
  }
}

class _ChartData {
  _ChartData({this.x, this.y1});
  final DateTime x;
  final int y1;
}

even when they can't fetch data from firebase, i got a problem with the error while debugging code. this the error :

E/flutter (25491): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: NoSuchMethodError: The method '[]' was called on null.
E/flutter (25491): Receiver: null
E/flutter (25491): Tried calling: []("y1")

i hope anyone can help my problem. thx!

0

There are 0 best solutions below