How to bind data from the array to the Flutter Cartesian chart?
The following steps explains how to bind the array data source to the SfCartesianChart widget.
Step 1: Declare and define the two integer arrays with the required data for the x and y values of the chart, and a variable data of list type with user-defined class(_SalesData) to bind to the chart as in the below code snippet.
List<_SalesData> data = <_SalesData>[];
List<int> xValues = [1, 2, 3, 4, 5];
List<int> yValues = [35, 28, 34, 32, 40];
//Class which is used as type for the data source.
class _SalesData {
_SalesData(this.xValue, this.yValue);
final int xValue;
final int yValue;
}
Step 2: In the intState() call the getData method.
@override
void initState() {
// Calling getData method to add data to the list
getData();
super.initState();
}
Step 3: Define the getData() method which loops the integer array and add them into 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 required properties and bind the data to the chart as 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' ) ] ),
Thus, the data from the array is bound to the SfCartesianChart widget.
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 know 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!
