animationfinish event does not fire...

[T-Roy]

With this working chart definition, the ready event fires, but not the finish animation event.

I am trying to orchestrate an ajax call after the redraw from the animationfinish event because if I make the ajax call before this event, the animation is interrupted and it looks very "jerky".  How do I get the animiationfinish event to fire?

     // Create and draw the visualization.
     stackcol = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart2',
          'options': {
               'title':'Scan History',
               'titleTextStyle': {color: 'yellow', fontName: 'Porkys', fontSize:16 }, //"Porkys", Comic Sans MS;
               'width':'100%',
               'height':170,
               'chartArea':{left:20,top:25,right:10,width:"95%",height:"65%"},
               'isStacked': true,
               'backgroundColor': '#222222',
               'legend': {'position':'none'},
               'colors': ['#22445d','446985','678ba7','8eaec6','bed4e5'], //mindset blues
               'animation': {'duration':1000, 'easing':'inAndOut'},
               'hAxis': {'title': '',
                    'slantedTextAngle': 60,
                    'baselineColor' : 'yellow',
                    'titleTextStyle': {color: 'yellow', fontName: 'Soopafresh, Comic Sans MS', fontSize:11 },
                    'textStyle': {color: 'yellow', fontName: 'Soopafresh, Comic Sans MS', fontSize:10 }
               },
               'vAxis': {'title': 'Fixed\u00a0\u00a0Mixed\u00a0\u00a0Growth',
                    'maxValue': 100,
                    'viewWindowMode': 'explicit', //'pretty' 'explicit' 'maximized'
                    'viewWindow': {'max':100, 'min':40},
                    'baselineColor' : 'yellow',
                    'gridlines': {color: 'yellow', count: 4},
                    'titleTextStyle': {color: 'yellow', fontName: 'Comic Sans MS', fontSize:11 },
                    'textStyle': {color: 'yellow', fontName: 'Comic Sans MS', fontSize:10 }
               }
          },
          'view': {'columns': [{calc:mindsetDate, type:'string', label:''},6,4]}
     });

     google.visualization.events.addListener(stackcol, 'animationfinish', function(){
          alert('stackcol animation is finished.');
     });
     google.visualization.events.addListener(stackcol, 'ready', function(){
          alert('stackcol is ready.');
     });

[MC Get Vizzy]

I think the ChartWrapper class doesn't support the 'animationfinish' event.  You could use the ColumnChart class directly.  Or, you could do something like this (it will only work after the first call to draw()):

google.visualization.events.addListener(stackcol.getChart(), 'animationfinish', function(){

          alert('stackcol animation is finished.');
     });

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/xO6u22mrvBQJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

Try this:

google.visualization.events.addListener(stackcol, 'ready', function(){
    alert('stackcol is ready.');
    

    google.visualization.events.addListener(stackcol.getChart(), 'animationfinish', function(){

        alert('stackcol animation is finished.');
    });

}); 

[T-Roy]

Ahhhhhhh - I see said the blind man!