Reputation: 4178
I am trying to apply animation on google chart on first load, its working with normal bar chart but when I am making it stacked, Animation not working. Please help me out Tried almost every option from documentation but nothing is helping out. there is no error in console.
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'EL', 'CL'],
['Jan', 2, 4],
['Feb', 1, 4],
['Mar', 6, 1],
['Apr', 3, 5],
['May', 1, 4],
['Jun', 3, 4],
['Jul', 2, 5],
['Aug', 2, 4],
['Sep', 1, 4],
['Oct', 6, 1],
['Dec', 1, 4]
]);
var options = {
chart: {
title: 'Leave Info',
subtitle: 'Total EL and CL consumed in a year',
},
bars: 'vertical',
height: 300,
width: 500,
animation:{
startup: 'true',
duration: 1000,
easing: 'out'
},
bar: {groupWidth: "40%"},
isStacked: true,
series: {
0: { color: 'red' },
1: { color: '#999' }
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Upvotes: 1
Views: 91
Reputation: 4178
With the great help by White-hat from comments above, I am able to get this result, Thought of posting it here if anyone else need the help
google.charts.load('current', {
callback: function() {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'EL', 'CL'],
['Jan', 2, 4],
['Feb', 1, 4],
['Mar', 6, 1],
['Apr', 3, 5],
['May', 1, 4],
['Jun', 3, 4],
['Jul', 2, 5],
['Aug', 2, 4],
['Sep', 1, 4],
['Oct', 6, 1],
['Dec', 1, 4]
]);
var options = {
animation: {
duration: 1000,
easing: 'linear',
startup: true
},
isStacked: true,
height: 600,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Upvotes: 1