Why does the animation not work?

1,891 views
Skip to first unread message

Nico van de Mortel

unread,
May 22, 2016, 6:45:47 AM5/22/16
to Google Visualization API

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:

Daniel LaLiberte

unread,
May 22, 2016, 1:04:04 PM5/22/16
to Google Visualization API
The material Bar chart does not support animation.   Use the non-material (or 'classic') corecharts for animation.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
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.



--

Nico van de Mortel

unread,
May 22, 2016, 2:27:14 PM5/22/16
to Google Visualization API
So this should work?
google.charts.load('43', {'packages':['bar', 'corechart']});

Because in this case all of my charts disappears.. 


Op zondag 22 mei 2016 19:04:04 UTC+2 schreef Daniel LaLiberte:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

Nico van de Mortel

unread,
May 22, 2016, 2:32:02 PM5/22/16
to Google Visualization API
Sorry, I mean this:
google.charts.load('43', {'packages':['corechart']});

Is there any way to use column chart (with isStacked = true function) with using animation? 


Op zondag 22 mei 2016 20:27:14 UTC+2 schreef Nico van de Mortel:

Daniel LaLiberte

unread,
May 23, 2016, 6:48:50 AM5/23/16
to Google Visualization API
The packages you load need to be consistent with the parts of the library that you are using.   Loading 'corechart' is what you should do if you only use corechart functions.

The problem the following:

  var chart = new google.charts.Bar(document.getElementById('columnchart'));

That's what you need to change as well, to use google.visualization.ColumnChart instead.  You will also need to NOT convert the options.

Look at your JavaScript console for errors.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
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/88a2a007-a55d-4691-a225-cc140d13c2b3%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Nico van de Mortel

unread,
May 23, 2016, 9:13:19 AM5/23/16
to Google Visualization API
Thank you! 
I changed it to  var chart = new google.charts.ColumnChart(document.getElementById('columnchart')); 
So I forgot changing 'charts' to 'visualization'.


Op maandag 23 mei 2016 12:48:50 UTC+2 schreef Daniel LaLiberte:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Nico van de Mortel

unread,
May 23, 2016, 9:26:28 AM5/23/16
to Google Visualization API
I have one more question. I want to do this:

But now the view is not changing from 0-5 to 4-5. It's redrawing everything but I don't want to redraw it. 


Op maandag 23 mei 2016 12:48:50 UTC+2 schreef Daniel LaLiberte:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
May 23, 2016, 9:38:29 AM5/23/16
to Google Visualization API
Your code creates a new chart each time you push the buttons, and that's why the startup animation applies each time.   So you need to instead only create the chart one time, and then only call chart.draw() when you change the data or options.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
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/9aea355c-35a8-455d-983b-0564e9dfd84a%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Nico van de Mortel

unread,
May 23, 2016, 9:57:16 AM5/23/16
to Google Visualization API
Yes I saw already in the documentation. Asked to quickly! Thanks a lot.

Still 1 more question...
Now I have this:

The blue column is getting smaller but the red column suddely appears. Is it possible to make the blue getting smaller and the red getting bigger (which appears from the bottom)? 

Op maandag 23 mei 2016 15:38:29 UTC+2 schreef Daniel LaLiberte:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
May 23, 2016, 10:29:21 AM5/23/16
to Google Visualization API
There is no way to customize the animation beyond the timing, at this time.  But you could probably get the effect you want if you add an extra draw() step with no animation where you first add the red values as 0s, and then draw() again with the new values so they would grow rather show up instantly at the end of the animation.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
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/d669fd43-a72c-4ba1-a00f-d5aebb451b09%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Nico van de Mortel

unread,
May 23, 2016, 11:23:52 AM5/23/16
to Google Visualization API
Really, really awesome!
Thanks a lot for everything!! :) 

Op maandag 23 mei 2016 16:29:21 UTC+2 schreef Daniel LaLiberte:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--
Reply all
Reply to author
Forward
0 new messages