Google bubble charts: how to use explorer + animation

Question

i'm trying to add an animation to my bubble chart, but if I add it the explorer function stops working.

javascript:

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {          
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Score', 'Doc Count', 'Classification', 'Rules Matched'],
          ['foo', 0.29380098, 1, 1, 6],
          ['bar', 0.29226518, 1, 1, 6],
          ['poo', 0.24833801, 0, 0, 5]
        ]);

        var options = {
            hAxis: {title: 'Score'},
            explorer: {

            },
            vAxis: {title: 'Document Count'},
            bubble: {opacity: 0.5, textStyle: {color: 'transparent'}},
            colors: ['green', 'red'],
            colorAxis: {legend: {position: 'none'}},
            fontSize: 12,
            fontName: 'Source Sans Pro',
            animation: {startup: true, duration: 2000}
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('bubbles'));
        chart.draw(data, options); 
    }
</script>

html:

<div id="bubbles" style="max-height: 450px; height: 450px; margin: auto;">
</div>

What am I doing wrong?

you can see the fiddle here: https://jsbin.com/tafiyafofu/edit?html,output

Answer 1

I'm not sure if are doing anything wrong, the documentation didn't mention that there is a conflict when you use both options. But the exporer is marked as "experimental", so anything may happen.

Possible workaround: redraw the chart(without animation) when the animation has been finished:

      var chart = new google.visualization.BubbleChart(document.getElementById('bubbles'));
      google.visualization.events.addOneTimeListener(chart,'animationfinish',function(){
        delete options.animation;
        chart.draw(data, options); 
      });
      chart.draw(data, options);