CODEWITHSUNDEEP
javascriptjqueryhtmlcharts
Drummad
Drummad

Reputation: 722

How to stop the legend disappearing during a Google Charts animation?

I'm using the Google Charts API to create a column chart. I have some other parts of the page that are animated when they load (not within the Google API) and would like the Google Charts to animate too. It's pretty easy to accomplish this but the strange thing is the way the chart animates and then the legend appears once the animation has completed.

Is there any way to make the legend appear straight away so that it is visible while the charts animate?

Here a fiddle showing some charts animating and the legend appearing afterwards: http://jsfiddle.net/Qquse/1343/ passing some animation settings in the chart options...

var options = {
    animation: {
        duration: 3000,
        easing: 'out',                
        'startup': true
    }
    //etc...
};

This thread: https://groups.google.com/forum/#!topic/google-chart-api/q15ggJ0sHNc would appear to suggest that there is nothing I can do about this as it is a necessary feature of the way Google animates the charts.

Thanks!

Upvotes: 10

Views: 1020

Answers (1)

Kevin
Kevin

Reputation: 369

It looks like that was a deliberate choice of the developers because the entire chart gets redrawn for each frame of the animation causing a flicker in the legend so it looks like it cannot be handled through Google Charts.

I would try a different approach. I would get rid of the GC generate legend by adding legend: 'none' to the options and then create my own with a transparent canvas or svg that I layer over the chart, allowing it to be there the whole time independent of the animation.

Upvotes: 0

Related Questions