Real-time Database Firebase and Syncfusion charts.

Question

The Syncfusion charts are perfect for an app I'm writing. I was able to get the charts to work using static data and am now trying to hook it up to my Firebase backend. I collect data from my controller for every 10minutes as below:

I have been referred to your previous forum, https://www.syncfusion.com/forums/149174/flutter-firebase-and-syncfusion-charts. I'm having a hard time figuring out why my line chart plot like that.

Thanks in advance for any help!!

class _ChartView extends State<ChartView>{

  final dataRef = FirebaseDatabase.instance.reference().child("G").child("GH1");

  @override
  Widget build(BuildContext context) {
    final _width = MediaQuery.of(context).size.width;
    final _height = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Chart'),
      ),
      body: Container(
        width: _width,
        height: _height,
        child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Expanded(
                      child: StreamBuilder<Event>(
                        stream: dataRef.onValue,
                        builder: (BuildContext context, AsyncSnapshot<Event> snap) {
                          Widget widget;
                          if (snap.hasData) {
                            List<ChartData> chartData = <ChartData>[];
                            Map data =
                                snap.data.snapshot.value;
                            for (Map childData in data.values) {
                              // here we are storing the data into a list which is used for chart’s data source
                              chartData.add(ChartData.fromMap(childData.cast<String, dynamic>()));
                            }
                            widget = Container(
                                child: SfCartesianChart(
                                  primaryXAxis: DateTimeAxis(),
                                  series: <ChartSeries<ChartData, dynamic>>[
                                    LineSeries<ChartData, dynamic>(
                                        dataSource: chartData,
                                        xValueMapper: (ChartData data, _) => DateTime.fromMillisecondsSinceEpoch(data.xValue.toInt()),
                                        yValueMapper: (ChartData data, _) => data.yValue)
                                  ],
                                ));
                          }
                          return widget;
                        },
                      )
                  ),
                ],
              ),
            )
        ),

      ),
    );
  }
}

class ChartData {
  ChartData({this.xValue, this.yValue});
  ChartData.fromMap(Map<String, dynamic> dataMap)
      : xValue = dataMap['serverms'],
        yValue = dataMap['ldr1'];
  final double xValue;
  final int yValue;
}

Dharanidharan Dharmasivam · Answer

Hi Hakim, 
 
Thanks for your interest in the Syncfusion Flutter chart widget. We have analyzed your query and from the provided screenshot, we suspect that the x values in each update seems to be with the 24 hours on the same day, in such cases the chart will render as per provided image. Since we are not aware of your exact data, we can’t proceed further. So, while refreshing the data, print those data and kindly share those information. This will be helpful in further analysis and provide you the solution sooner. 
 
Thanks, 
Dharani.

Hakim · Answer

I collecting the value of LDR from the controller every 10minutes.

In my coding, I use ldr1 value for y-value, and the local time in milliseconds value for x-value.

class ChartData {
  ChartData({this.xValue, this.yValue});
  ChartData.fromMap(Map<String, dynamic> dataMap)
      : xValue = dataMap['serverms'],
        yValue = dataMap['ldr1'];
  final double xValue;
  //final String xValue;
  final int yValue;
}

Below the picture, I print the chart data value from the firebase.

Sriram Kiran Senthilkumar · Answer

Hi Hakim, 
  
We have analyzed your scenario with the provided data, and we found that the data your binding to the chart is the reason for the chart to render like you have mentioned in the screenshot previously. For more clarification, we have attached two screenshots in which one shows the chart which is rendered using the provided data points. You can see that the data points in the chart are rendered back and forth according to x-axis values which is in hours. 
Screenshots: 
#1 chart render 
   
 #2 Formatted x-axis values from milliseconds to DateTime 
   
  
In the second screenshot, you can see that the date values are the same for all data points, but the time values are not in proper order. Because of this only the chart datapoints renders back and forth. For example, In the #2 screenshot, you can see that the first three time values of the data points increase gradually but then, the fourth time value is decreased by two hours. This improper binding of time values makes the chart series rendering back and forth. So kindly please bind properly ordered data point values for the chart to render properly. 
  
Thanks, 
Sriram Kiran.