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.