How to bind data from an array to a Flutter Cartesian Chart?
This document explains how to bind array data to the SfCartesianChart widget.
Step 1: Declare and define two integer arrays that contain the necessary data for the x and y values of the chart. Then, create a list variable that holds a user-defined class (_SalesData) to be associated with the chart.
List<_SalesData> data = <_SalesData>[];
List<int> xValues = [1, 2, 3, 4, 5];
List<int> yValues = [35, 28, 34, 32, 40];
// This class serves as the data source type.
class _SalesData {
_SalesData(this.xValue, this.yValue);
final int xValue;
final int yValue;
}
Step 2: Call the getData method within the initState() method.
@override
void initState() {
// Calling the `getData` method to append data to the list.
getData();
super.initState();
}
Step 3: Define the getData() method, which iterates through the integer array and appends each element to the data list.
void getData() {
for (int i = 0; i < xValues.length; i++) {
// Adding data to the user-defined type list.
data.add(_SalesData(xValues[i], yValues[i]));
}
}
Step 4: Define the SfCartesianChart widget with the necessary properties and bind the data to the chart as shown below.
SfCartesianChart( series: <LineSeries<_SalesData, int>>[ LineSeries<_SalesData, int>( // Binding the data to the chart. dataSource: data, xValueMapper: (_SalesData sales, _) => sales.xValue, yValueMapper: (_SalesData sales, _) => sales.yValue, name: 'Sales' ) ] ),
By following these steps, the data from the array is successfully bound to the SfCartesianChart widget.
View the Github Sample here.
Conclusion
I hope you enjoyed learning about how to bind data from the array to the Flutter Cartesian chart.
You can refer to our Flutter Charts feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Charts 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!
