Articles in this section
Category / Section

How to bind data from the array to the Flutter Cartesian chart?

3 mins read

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.

bind array data to the chart

 

View the sample in GitHub.


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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied