How to create Flutter animated charts using the SfCartesianChart ?
In this article, we explained how to create the animated charts using series animation, animation method and dynamic data point animation.
Series animation
Our Flutter Cartesian chart provides animation support by default. The animationDuration property in the chart series is used to control the speed of the animation and its default value is 1500. To render the chart without animation, you can specify the animationDuration as 0.
SfCartesianChart( series: <LineSeries<_SalesData, num>>[ LineSeries<_SalesData, num>( // Animation duration for this line series set to 2000 animationDuration: 2000, dataSource: data, xValueMapper: (_SalesData sales, _) => sales.year, yValueMapper: (_SalesData sales, _) => sales.sales, ) ] ),
Screenshot
Animation method
Our Cartesian chart widget provides public method namely animate method for animating the cartesian series dynamically. Following steps explains about dynamic animation.
Step 1: First, initialize a global variable of type ChartSeriesController, which can be used to call the animate method.
// Initialized the global variable ChartSeriesController? _chartSeriesController;
Step 2: Then, initialize SfCartesianChart widget with required data source and series type. Here we have used the line series and in the onCreateRenderer event, assign the controller argument from the event to the _chartSeriesController.
SfCartesianChart(
series: <LineSeries<_SalesData, num>>[
LineSeries<_SalesData, num>(
// Animation duration for this line series
animationDuration: 2000,
// Assigning the controller to the global variable
onRenderCreated: (ChartSeriesController controller){
_chartSeriesController = controller;
},
dataSource: data,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
)
]
),
Step 3: Define a button and in its onPressed event, call the animate method using the _chartSeriesController to perform the animation for line series dynamically.
RaisedButton(
child: Text(
'Animate line series',
),
onPressed: () {
// Call the animate method for performing dynamic animation
_chartSeriesController?.animate();
},
),
Dynamic data point animation
Our Cartesian chart provides the animation support while dynamically adding the data to the chart. When a data point is added dynamically, the newly data point get animated.
Refer the following steps to add the data point dynamically,
Step 1: Declare the variable named data globally to store data of the chart and initialize the data source in the initState().
late List<_SalesData> data;
int count = 11;
@override
void initState() {
data = [
_SalesData(1, 35),
_SalesData(2, 28),
_SalesData(3, 34),
_SalesData(4, 26),
_SalesData(5, 35),
_SalesData(6, 28),
_SalesData(7, 32),
_SalesData(8, 28),
_SalesData(9, 32),
_SalesData(10, 35),
];
super.initState();
}
Step 2: Define the method to refresh the chart data with newly added points.
// Method to assign the new value to the data variable and rebuilds the chart
addChartData() {
setState(() {
data = getChartData();
});
}
Step 3: Define the getChartData() method, which returns the randomly generated data.
// Method returns random data
List<_SalesData> getChartData() {
data.add(_SalesData(count, getRandomInt(20, 50)));
count = count + 1;
return data;
}
// Method to generate random numbers in the given range
num getRandomInt(num min, num max) {
final Random random = Random();
return min + random.nextInt(max - min);
}
Step 4: Now define a button widget and in its onPressed event, call the addChartData() method for adding a new point and the chart will gets animated.
RaisedButton(
child: Text(
'Add data point',
),
onPressed: () {
addChartData();
},
),
Screenshot
