Animation

  • You can animate changes made to a chart either on startup or when redrawing the chart after modifying data or options.

  • To animate on startup, set an animation duration and easing type, set animation: {"startup": true} in your options, and call chart.draw().

  • To animate a transition, modify the data or options of an already rendered chart, specify the transition behavior using the animation option, and call chart.draw().

  • Supported modifications for animation include changes to data table values, adding/removing rows or columns, and changing specific chart options like view window, ticks, gridlines, direction, baseline, logScale, and chart size.

  • The animation.duration and animation.easing options control the animation speed and style, and the animationfinish event is fired when a transition animation is complete.

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

[フレーム]

Contents

Overview

Google charts can animate smoothly in one of two ways, either on startup when you first draw the chart, or when you redraw a chart after making a change in data or options.

To animate on startup:

  1. Set your chart data and options. Be sure to set an animation duration and easing type.
  2. Set animation: {"startup": true} — setting this in your options will cause your chart to start with series values drawn at the baseline, and animate out to their final state.
  3. Call chart.draw(), passing in your data and options.

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: 

functioninit(){
varoptions={
width:400,
height:240,
animation:{
duration:1000,
easing:'out',
},
vAxis:{minValue:0,maxValue:1000}
};
vardata=newgoogle.visualization.DataTable();
data.addColumn('string','N');
data.addColumn('number','Value');
data.addRow(['V',200]);
varchart=newgoogle.visualization.ColumnChart(
document.getElementById('visualization'));
varbutton=document.getElementById('b1');
functiondrawChart(){
//Disablingthebuttonwhilethechartisdrawing.
button.disabled=true;
google.visualization.events.addListener(chart,'ready',
function(){
button.disabled=false;
});
chart.draw(data,options);
}
button.onclick=function(){
varnewValue=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. Currently, options that will animate on change include:
    • the view window (vAxis.viewWindow.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max) — Changing the view window is useful for achieving "zoom" and continuous "drift" effects (see examples below)
    • vAxis.ticks and hAxis.ticks values
    • vAxis.gridlines.count and hAxis.gridlines.count
    • vAxis.direction and hAxis.direction
    • vAxis.baseline and hAxis.baseline
    • vAxis.logScale and hAxis.logScale
    • chart size (height and width)
    • chart area (chartArea.height, chartArea.width, chartArea.top, chartArea.left)
Modification Type Valid Chart Types
Value changes ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Gauge
Adding/removing rows ScatterChart, LineChart, AreaChart, BubbleChart, ComboChart (with line/area series only)
Adding/removing columns ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart
Modifying chart options ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart

Transition behavior

Name
animation.duration

The duration of the animation, in milliseconds. For details, see the animation documentation.

Type: number
Default: 0
animation.easing

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.
Type: string
Default: 'linear'
animation.startup

Determines if the chart will animate on the initial draw. If true, the chart will start at the baseline and animate to its final state.

Type: boolean
Default false

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
animationfinish

Fired when transition animation is complete.

Properties: none

Examples

Value changes

//Somerawdata(notnecessarilyaccurate)
varrowData1=[['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]];
varrowData2=[['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]];
//Createandpopulatethedatatables.
vardata=[];
data[0]=google.visualization.arrayToDataTable(rowData1);
data[1]=google.visualization.arrayToDataTable(rowData2);
varoptions={
width:400,
height:240,
vAxis:{title:"Cups"},
hAxis:{title:"Month"},
seriesType:"bars",
series:{5:{type:"line"}},
animation:{
duration:1000,
easing:'out'
},
};
varcurrent=0;
//Createanddrawthevisualization.
varchart=newgoogle.visualization.ComboChart(document.getElementById('visualization'));
varbutton=document.getElementById('b1');
functiondrawChart(){
//Disablingthebuttonwhilethechartisdrawing.
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

varoptions={
width:400,
height:240,
vAxis:{minValue:0,maxValue:100},
animation:{
duration:1000,
easing:'in'
}
};
varchart=newgoogle.visualization.LineChart(
document.getElementById('visualization'));
vardata=newgoogle.visualization.DataTable();
data.addColumn('string','x');
data.addColumn('number','y');
data.addRow(['100',123]);
data.addRow(['700',17]);
varbutton=document.getElementById('b1');
functiondrawChart(){
//Disablingthebuttonwhilethechartisdrawing.
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()));
}
//Generatingarandomx,ypairandinsertingitsorowsaresorted.
varx=Math.floor(Math.random()*1000);
vary=Math.floor(Math.random()*100);
varwhere=0;
while(where < data.getNumberOfRows() && parseInt(data.getValue(where,0)) < x){
where++;
}
data.insertRows(where,[[x.toString(),y]]);
drawChart();
}
drawChart();
 [フレーム]

Adding and removing columns

varoptions={
width:400,
height:240,
vAxis:{minValue:0,maxValue:1000},
animation:{
duration:1000,
easing:'out'
}
};
varchart=newgoogle.visualization.ColumnChart(
document.getElementById('visualization'));
varchars='ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
vardata=newgoogle.visualization.DataTable();
data.addColumn('string','x');
data.addColumn('number','A');
data.addColumn('number','B');
data.addRow(['A',123,40]);
data.addRow(['B',17,20]);
varaddButton=document.getElementById('b1');
varremoveButton=document.getElementById('b2');
functiondrawChart(){
//Disablingthebuttonswhilethechartisdrawing.
addButton.disabled=true;
removeButton.disabled=true;
google.visualization.events.addListener(chart,'ready',
function(){
//Enablingonlyrelevantbuttons.
addButton.disabled=(data.getNumberOfColumns()-1)>=chars.length;
removeButton.disabled=(data.getNumberOfColumns()-1) < 2;
});
chart.draw(data,options);
}
functionshuffleAndDrawChart(){
for(vari=0;i < data.getNumberOfRows();++i){
for(varj=1;j < data.getNumberOfColumns();++j){
varnum=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

varoptions={
width:400,
height:240,
animation:{
duration:1000,
easing:'in'
},
hAxis:{viewWindow:{min:0,max:5}}
};
varchart=newgoogle.visualization.SteppedAreaChart(
document.getElementById('visualization'));
vardata=newgoogle.visualization.DataTable();
data.addColumn('string','x');
data.addColumn('number','y');
varMAX=10;
for(vari=0;i < MAX;++i){
data.addRow([i.toString(),Math.floor(Math.random()*100)]);
}
varprevButton=document.getElementById('b1');
varnextButton=document.getElementById('b2');
varchangeZoomButton=document.getElementById('b3');
functiondrawChart(){
//Disablingthebuttonwhilethechartisdrawing.
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();
}
varzoomed=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();
 [フレーム]

Changing the chart size

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
functiondrawChart(){
functiongenData(){
vararray=[];
for(vari=0;i < 10;i++){
varx=i,
y=Math.floor(Math.random()*50),
z=Math.floor(Math.random()*25);
array.push([x,y,z]);
}
returnarray;
}
functiondoubleIt(){
options.chartArea.height='100%';
options.chartArea.width='100%';
}
functionhalveIt(){
options.chartArea.height='50%';
options.chartArea.width='50%';
}
functiongoTo50(){
options.chartArea.left='50%';
options.chartArea.top='50%';
}
functiongoTo10(){
options.chartArea.left='10%';
options.chartArea.top='10%';
}
vardata=newgoogle.visualization.DataTable();
data.addColumn('number','X');
data.addColumn('number','Y');
data.addColumn('number','Z');
data.addRows(genData());
varoptions={
height:500,
chartArea:{
height:'50%',
width:'50%',
top:'10%',
left:'10%'
},
colors:['#ee8100','#9575cd'],
animation:{
duration:1500,
easing:'linear',
startup:true
},
vAxis:{
ticks:[10,20,30,40,50,60],
gridlines:{color:'#ccc'}
},
hAxis:{
ticks:[0,4,8,12],
gridlines:{color:'#ccc'}
},
legend:{position:'none'},
enableInteractivity:false
};
varchart=newgoogle.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
varbtns=document.querySelector('#btns');
btns.onclick=function(e){
switch(e.target.id){
case"size":
options.chartArea.height==='50%'?doubleIt():halveIt();
break;
case"slide":
options.chartArea.left==='10%'?goTo50():goTo10();
}
chart.draw(data,options);
}
}
 [フレーム]

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024年07月10日 UTC.