I'm using Google Charts. It has an animation function but this one is not
working for me. The documentation says that you have to add something like
this:
animation: {
startup:true,
duration: 2000,
easing: 'in',
},
to your options. But that is not working for me and I can't see why.
I made a codepen you can find here: http://codepen.io/anon/pen/ZWNrOg
HTML:
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<div id="columnchart"></div><button type="button"
onclick="drawChartColumn('zoom')">Zoom</button><button type="button"
onclick="drawChartColumn('column1')">Column1</button><button type="button"
onclick="drawChartColumn('column2')">Column2</button>
CSS
#columnchart {
height: 300px;
width: 500px;}
Javascript
google.charts.load('43', {'packages':['bar', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(category) {
drawChartColumn();}
function drawChartColumn(category) {
var data = google.visualization.arrayToDataTable([
['Jaar', 'Nummer1', 'Nummer2'],
['2015', 238000000, 9400000000],
['2016', 275000000, 9700000000],
['2017', 339000000, 9900000000],
['2018', 369000000, 10100000000],
['2019', 3690000, 101000000],
]);
if(category == 'zoom'){
var options = {
isStacked: true,
animation: {
startup:true,
duration: 2000,
easing: 'in',
},
hAxis: {viewWindow: {min:3, max:4}},
vAxis: {viewWindow: {min:0, max:3000000}}
};
}
else {
var options = {
isStacked: true,
animation: {
startup:true,
duration: 2000,
easing: 'in',
},
hAxis: {viewWindow: {min:0, max:5}}
};
}
var chart = new google.charts.Bar(document.getElementById('columnchart'));
var view = new google.visualization.DataView(data);
var viewColumns = [0];
switch (category) {
case 'column2':
viewColumns.push(1);
viewColumns.push(2);
break;
case 'column1':
viewColumns.push(1);
break;
default:
viewColumns.push(1);
}
view.setColumns(viewColumns);
chart.draw(view, google.charts.Bar.convertOptions(options));}
Google has example code but that doesn't work for me. I want to do 2 things:
- zoom to a value with animation like this example:
https://developers.google.com/chart/interactive/docs/animation#changing-the-view-window
- change number of columns like this example:
https://developers.google.com/chart/interactive/docs/animation#adding-and-removing-columns
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/9e0a404e-a5d5-400c-addc-0a18ac74b506%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
