Category / Section
How to bind data from the list to the Flutter Cartesian chart (SfCartesianChart) ?
1 min read
The following steps explains how to bind a list of data to the SfCartesianChart widget.
Step 1: Define the data source that needs to be bound to the chart as shown in the code snippet below:
final List<_ChartData> chartData = <_ChartData>[
_ChartData(2005, 21, 28),
_ChartData(2006, 24, 44),
_ChartData(2007, 36, 48),
_ChartData(2008, 38, 50),
_ChartData(2009, 54, 66),
_ChartData(2010, 57, 78),
_ChartData(2011, 70, 84)
];
// Class for data source.
class _ChartData {
_ChartData(this.x, this.y, this.y2);
final double x;
final double y;
final double y2;
}
Step 2: Define the SfCartesianChart widget with the required properties and bind the chartData to the chart as below.
SfCartesianChart( series: <LineSeries<_ChartData, num>>[ LineSeries<_ChartData, num>( animationDuration: 2500, // Binding list data to the chart. dataSource: chartData, xValueMapper: (_ChartData sales, _) => sales.x, yValueMapper: (_ChartData sales, _) => sales.y, ), LineSeries<_ChartData, num>( animationDuration: 2500, // Binding list data to the chart. dataSource: chartData, xValueMapper: (_ChartData sales, _) => sales.x, yValueMapper: (_ChartData sales, _) => sales.y2, ) ]; ),
Thus, the data from the list is bound to the SfCartesianChart widget.
View the Github Sample here.
