Google Charts

Transition Animation

This page describes how to animate modifications made to chart data or options, instead of applying them instantly.

Contents

Overview

Google charts can transition gracefully when you change chart options or data. To animate a transition:

  1. Start with an already rendered chart
  2. Modify the data table or options. Different chart types support different modifications; see Supported Modifications to learn what modifications are supported for what chart types.
  3. Specify the transition behavior using the animation option.
  4. Call chart.draw() on your chart to transition to the new values.
Here is a simple example which changes the single value presented in a bar chart upon each click on a button:
   function init() {
    var options = {
      width: 400,
      height: 240,
      animation:{
        duration: 1000,
        easing: 'out',
      },
      vAxis: {minValue:0, maxValue:1000}
    };
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'N');
    data.addColumn('number', 'Value');
    data.addRow(['V', 200]);

    var chart = new google.visualization.ColumnChart(
        document.getElementById('visualization'));
    var button = document.getElementById('b1');

    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
          });
      chart.draw(data, options);
    }

    button.onclick = function() {
      var newValue = 1000 - data.getValue(0, 1);
      data.setValue(0, 1, newValue);
      drawChart();
    }
    drawChart();
  }

Supported Modifications

Support for different types of transitions differs from one chart to another. The different types of transitions are:

  • Changes to data table values only. The number of rows and columns is the same, and the columns maintain their original types and roles.
  • Addition or removal of columns (series).
  • Addition or removal of rows (categories).
  • Changes to chart options. As of now, only changes to the viewWindow option of an axis are supported. Changing the view window is useful for achieving "zoom" and continuous "drift" effects (see examples below).
Modification Type Valid Chart Types
Value changes ScatterChart, LineChart, AreaChart, BarChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Gauge
Adding/removing rows ScatterChart, LineChart, AreaChart, ComboChart (with line/area series only)
Adding/removing columns ScatterChart, LineChart, AreaChart, BarChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart
Modifying chart options ScatterChart, LineChart, AreaChart, BarChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart

Transition behavior

Name Type Default Description
animation.duration number 0 The duration of the animation, in milliseconds. For details, see the animation documentation.
animation.easing string 'linear' The easing function applied to the animation. The following options are available:
  • 'linear' - Constant speed.
  • 'in' - Ease in - Start slow and speed up.
  • 'out' - Ease out - Start fast and slow down.
  • 'inAndOut' - Ease in and out - Start slow, speed up, then slow down.

Events

When drawing a chart, a 'ready' event is fired once the chart is ready for external method calls. The chart will fire the animationfinish event when the transition is complete.

Name Description Properties
animationfinish Fired when transition animation is complete. None

Examples

Value changes

   // Some raw data (not necessarily accurate)
    var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 165, 938, 522, 998, 450, 114.6],
                    ['2005/06', 135, 1120, 599, 1268, 288, 382],
                    ['2006/07', 157, 1167, 587, 807, 397, 623],
                    ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                    ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
    var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 122, 638, 722, 998, 450, 614.6],
                    ['2005/06', 100, 1120, 899, 1268, 288, 682],
                    ['2006/07', 183, 167, 487, 207, 397, 623],
                    ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                    ['2008/09', 123, 491, 829, 826, 366, 569.6]];

    // Create and populate the data tables.
    var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData1);
    data[1] = google.visualization.arrayToDataTable(rowData2);

    var options = {
      width: 400,
      height: 240,
      vAxis: {title: "Cups"},
      hAxis: {title: "Month"},
      seriesType: "bars",
      series: {5: {type: "line"}},
      animation:{
        duration: 1000,
        easing: 'out'
      },
    };
    var current = 0;
    // Create and draw the visualization.
    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
          });
      options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

      chart.draw(data[current], options);
    }
    drawChart();

    button.onclick = function() {
      current = 1 - current;
      drawChart();
    }

Adding and removing rows

    var options = {
      width: 400,
      height: 240,
      vAxis: {minValue:0, maxValue:100},
      animation: {
        duration: 1000,
        easing: 'in'
      }
    };

    var chart = new google.visualization.LineChart(
        document.getElementById('visualization'));
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    data.addRow(['100', 123]);
    data.addRow(['700', 17]);
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
          });
      chart.draw(data, options);
    }

    button.onclick = function() {
      if (data.getNumberOfRows() > 5) {
        data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
      }
      // Generating a random x, y pair and inserting it so rows are sorted.
      var x = Math.floor(Math.random() * 1000);
      var y = Math.floor(Math.random() * 100);
      var where = 0;
      while (where < data.getNumberOfRows() && parseInt(data.getValue(where, 0)) < x) {
        where++;
      }
      data.insertRows(where, [[x.toString(), y]]);
      drawChart();
    }
    drawChart();

Adding and removing columns

    var options = {
      width: 400,
      height: 240,
      vAxis: {minValue:0, maxValue:1000},
      animation: {
        duration: 1000,
        easing: 'out'
      }
    };

    var chart = new google.visualization.ColumnChart(
        document.getElementById('visualization'));
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'A');
    data.addColumn('number', 'B');
    data.addRow(['A', 123, 40]);
    data.addRow(['B', 17, 20]);
    var addButton = document.getElementById('b1');
    var removeButton = document.getElementById('b2');
    function drawChart() {
      // Disabling the buttons while the chart is drawing.
      addButton.disabled = true;
      removeButton.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            // Enabling only relevant buttons.
            addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length;
            removeButton.disabled = (data.getNumberOfColumns() - 1) < 2;
          });
      chart.draw(data, options);
    }
    function shuffleAndDrawChart() {
      for (var i = 0; i < data.getNumberOfRows(); ++i) {
        for (var j = 1; j < data.getNumberOfColumns(); ++j) {
          var num = Math.floor(Math.random() * 1000);
          data.setValue(i, j, num);
        }
      }
      drawChart();
    }
    addButton.onclick = function() {
      data.addColumn('number', chars[data.getNumberOfColumns() - 1]);
      shuffleAndDrawChart();
    }
    removeButton.onclick = function() {
      data.removeColumn(data.getNumberOfColumns() - 1);
      shuffleAndDrawChart();
    }
    drawChart();

Changing the view window

    var options = {
      width: 400,
      height: 240,
      animation: {
        duration: 1000,
        easing: 'in'
      },
      hAxis: {viewWindow: {min:0, max:5}}
    };

    var chart = new google.visualization.SteppedAreaChart(
        document.getElementById('visualization'));
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    var MAX = 10;
    for (var i = 0; i < MAX; ++i) {
      data.addRow([i.toString(), Math.floor(Math.random() * 100)]);
    }
    var prevButton = document.getElementById('b1');
    var nextButton = document.getElementById('b2');
    var changeZoomButton = document.getElementById('b3');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      prevButton.disabled = true;
      nextButton.disabled = true;
      changeZoomButton.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            prevButton.disabled = options.hAxis.viewWindow.min <= 0;
            nextButton.disabled = options.hAxis.viewWindow.max >= MAX;
            changeZoomButton.disabled = false;
          });
      chart.draw(data, options);
    }

    prevButton.onclick = function() {
      options.hAxis.viewWindow.min -= 1;
      options.hAxis.viewWindow.max -= 1;
      drawChart();
    }
    nextButton.onclick = function() {
      options.hAxis.viewWindow.min += 1;
      options.hAxis.viewWindow.max += 1;
      drawChart();
    }
    var zoomed = false;
    changeZoomButton.onclick = function() {
      if (zoomed) {
        options.hAxis.viewWindow.min = 0;
        options.hAxis.viewWindow.max = 5;
      } else {
        options.hAxis.viewWindow.min = 0;
        options.hAxis.viewWindow.max = MAX;
      }
      zoomed = !zoomed;
      drawChart();
    }
    drawChart();

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.