We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
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: <ChartSeries<_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.
|
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
