Articles in this section
Category / Section

How to create Flutter animated charts using the SfCartesianChart ?

2 mins read

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

 

series_animation_gif

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

 

dynamic_data_point_animation_gif

 

View the sample in GitHub.

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