How to render the Flutter chart using the data in Firestore?
In this article we will explain how to render the Flutter chart using the data stored in the Firestore.
Refer the following link for creating project in the Firestore database.
https://firebase.google.com/docs/firestore/quickstart
Refer the following link for configured Firestore project with created Flutter sample
https://firebase.google.com/docs/flutter/setup?platform=android#register-app
Step 1: Add the required packages in the pubspec.yaml file.
syncfusion_flutter_chart: ^19.1.59 firebase_core: ^1.1.1 cloud_firestore: ^2.1.0
Step 2: Import the required packages.
import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:syncfusion_flutter_charts/charts.dart';
Step 3: In initState() , fetch the data from Firestore by mapping the Firestore doc values to data source values in Flutter Chart by using snapShotValue.docs.
//Holds the data source of chart
List<_ChartData> chartData = <_ChartData>[];
@override
void initState() {
getDataFromFireStore().then((results) {
SchedulerBinding.instance!.addPostFrameCallback((timeStamp) {
setState(() {});
});
});
super.initState();
}
Future<void> getDataFromFireStore() async {
var snapShotsValue =
await FirebaseFirestore.instance.collection("chartData").get();
List<_ChartData> list = snapShotsValue.docs
.map((e) => _ChartData(x: DateTime.fromMillisecondsSinceEpoch(
e.data()['x'].millisecondsSinceEpoch)
, y: e.data()['y']))
.toList();
setState(() {
chartData = list;
});
}
// Class for chart data source, this can be modified based on the data in Firestore
class _ChartData {
_ChartData({this.x, this.y});
final DateTime? x;
final int? y;
}
Step 4: Then assign the populated values to dataSource property of the SfCartesianChart widget.
SfCartesianChart( primaryXAxis: DateTimeAxis(), primaryYAxis: NumericAxis(), series: <LineSeries<_ChartData, DateTime>>[ LineSeries<_ChartData, DateTime>( dataSource: chartData, xValueMapper: (_ChartData data, _) => data.x, yValueMapper: (_ChartData data, _) => data.y), ])
Thus, the chart is rendered with data from the Firestore. Image for the data in the Firestore and the chart rendered with the respective data is below.
Conclusion
I hope you enjoyed learning about how to render the Flutter chart using the data in Firestore.
You can refer to our Flutter Cartesian Chart feature tour page to know about its other groundbreaking feature representations,
documentation and how to quickly get started for configuration
specifications. You can also explore our Flutter Cartesian Chart example to understand how to create
and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
