0

i want to build a syncfusion chart in flutter. i retrive data from firebase realtime database. the data would be show in the chart. and i got a problem here. they say about 'millisecondsSinceEpoch'. but i don't have it in my code. but there's got a problem. this is my code :

import 'dart:async';

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class Chart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: HolyChart(),
      ),
    );
  }
}

class HolyChart extends StatefulWidget {
  @override
  _HolyChartState createState() => _HolyChartState();
}

class _HolyChartState extends State<HolyChart> {
  Timer _timer;
  int _count = 0;
  ChartSeriesController _seriesController;
  final _dbReference = FirebaseDatabase.instance.reference();
  List _chartData = <ChartData>[];
  int _values;

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

  _updateData(Timer timer) {
    _chartData.add(ChartData(_count, _values));

    if (_chartData.length == 20) {
      _chartData.removeAt(0);
      _seriesController.updateDataSource(
          addedDataIndexes: <int>[_chartData.length - 1],
          removedDataIndexes: <int>[0]);
    }

    _count = _count + 1;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _dbReference.child("Data").onValue,
      builder: (context, snapshot) {
        Widget widget;

        if (snapshot.hasData &&
            !snapshot.hasError &&
            snapshot.data.snapshot.value != null) {
          _values = snapshot.data.snapshot.value["Moisture"];

          if (_values != null) {
            _timer = Timer.periodic(Duration(seconds: 3), _updateData(_timer));
          }

          widget = Container(
            child: SfCartesianChart(
              tooltipBehavior: TooltipBehavior(enable: true),
              primaryXAxis: DateTimeAxis(),
              series: <LineSeries<ChartData, int>>[
                LineSeries<ChartData, int>(
                  dataSource: _chartData,
                  xValueMapper: (ChartData data, _) => data.xAxisValue,
                  yValueMapper: (ChartData data, _) => data.yAxisValue,
                )
              ],
            ),
          );
        } else {
          widget = Center(child: CircularProgressIndicator());
        }

        return widget;
      },
    );
  }
}

class ChartData {
  ChartData(this.xAxisValue, this.yAxisValue);
  ChartData.fromMap(this.xAxisValue, this.yAxisValue);

  final int xAxisValue;
  final int yAxisValue;
}

and this is the problem for my code. what's mean with the function 'millisecondsSinceEpoch'? b

The following NoSuchMethodError was thrown building LayoutBuilder:
Class 'int' has no instance getter 'millisecondsSinceEpoch'.
Receiver: 0
Tried calling: millisecondsSinceEpoch

can anyone help me?? thank you so much for your help...

Ayas
  • 61
  • 6

2 Answers2

1

Thanks for the interest in our Flutter charts. We have analyzed your query and the given code and would like to tell you that you are using the DateTimeAxis for the primaryXAxis but your data source values are not a DateTime value. So, kindly use NumericAxis in the chart to process numeric data. To know more about our charts, please find the help document.

Thanks, Dharanitharan. P

Dharani
  • 179
  • 1
  • 8
  • but if i want to show my chart by the time, how can i do? when yAxis is retrive data from firebase, and the xAxis just flow every second/minute – Ayas Apr 15 '21 at 02:27
  • You can use DateTimeAxis for the primaryXAxis and if you want to retrieve y values alone from the firebase and for x-values you can map locally, Here we attach the sample like your requirement we bind DateTime value to x-axis locally and for y-axis bin the numeric values from the firebase database. You can make use as a reference and hope it will help you. [Sample.](https://www.syncfusion.com/downloads/support/directtrac/general/ze/firebase-database822007827) – Dharani Apr 15 '21 at 09:13
  • i try the code from you. but i got my new problem. please cek this [Error](https://stackoverflow.com/questions/67207686/the-syncfusion-charts-cant-fetch-data-from-firebase?noredirect=1#comment118807893_67207686) @Dharani – Ayas Apr 23 '21 at 02:46
0

My guess is that you use primaryXAxis: DateTimeAxis(), but none of your x/y value is a Date. The SfCartesianChart tries to convert x or y as a date (millisecondsSinceEpoch is relative to the usage of a date) but both of them are int.

Have a look at this (search for DateTimeAxis, there is different examples) : https://help.syncfusion.com/flutter/cartesian-charts/axis-customization

BabC
  • 1,044
  • 5
  • 18
  • but if i want to show my chart by the time, how can i do? when yAxis is retrive data from firebase, and the xAxis just flow every second/minute – Ayas Apr 15 '21 at 02:30
  • @Ayas what kind of data do you retrieve from firebase for your xAxis ? – BabC Apr 15 '21 at 07:05
  • nothing. i don't retrieve data/anything from firebase for the xAxis. the yAxis retrive and update data every second in chart. so, i want the xAxis just show the time (in second). example: yAxis show 15 in 1 second, beside them show 24 in 2 second – Ayas Apr 16 '21 at 08:17