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 the list of data to the SfCartesianChart widget.
Step 1: Define the data source that needs to be bind to the chart as in the below code snippet.
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.
