title: google bar charts animation
body: <p>I am trying to animate this bar charts but it doesn't seems working.This bar chart represents real time data and update in every 2-3 seconds. I want to add easing so it visualize nicely. If anyone can help me out for fix the animation it would be great. Thanks</p>
  
  <p>The chart looks like this ;
  <a href="http://postimg.org/image/bvw86rmsl/" rel="nofollow">Bar Chart</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;html&gt;
      &lt;head&gt;
          
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;MindStream Visual Chart&lt;/title&gt;
          &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
        google.load("visualization", "1.1", {packages:["bar"]});
  
    
        google.setOnLoadCallback(drawChart);
   
        function drawChart() {
           
     
          var data2 = google.visualization.arrayToDataTable([
            ['EEG Power', 'High Gamma', 'Low Gamma', 'Theta', 'High Alpha', 'Low Alpha', 'Low Beta', 'High Beta','Delta'],
            ['Real Time Data', 0, 0, 0, 0, 0, 0, 0, 0]
          ]);
  
  
          var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
    
    
            var bli;
            var att;
            var med;
            
            var highGamma;
            var lowGamma;
            var theta;
            var lowAlpha;
            var highAlpha;
            var lowBeta;
            var highBeta;
            var delta;
          
   
   // ajax 
          setInterval(function() {
            $.ajax({
               type        : 'get', 
               url         : 'jsonProvider', 
               data        : '',
               dataType    : 'json', 
               encode          : true
           }).done(function( data ) {
      
      console.log(data);
                //  console.log(data['eSense'].attention+"  "+data['eSense'].meditation+" "+data['eSense'].blinkStrength);
    
      att=data['eSense'].attention;
                  med=data['eSense'].meditation;
                  bli = data['eSense'].blinkStrength;
                  highGamma = (data['eegPower'].highGamma != null) ? data['eegPower'].highGamma : 0 ;
      lowGamma = ( data['eegPower'].lowGamma != null) ?  data['eegPower'].lowGamma : 0 ;
      theta = (data['eegPower'].theta != null) ?  data['eegPower'].theta : 0 ;
      lowAlpha = (data['eegPower'].lowAlpha != null) ?  data['eegPower'].lowAlpha : 0 ;
      highAlpha = (data['eegPower'].highAlpha != null) ?  data['eegPower'].highAlpha : 0 ;
      lowBeta = (data['eegPower'].lowBeta != null) ?  data['eegPower'].lowBeta : 0 ;
      highBeta = (data['eegPower'].highBeta != null) ?  data['eegPower'].highBeta : 0 ;
      delta = (data['eegPower'].delta != null) ?  data['eegPower'].delta : 0 ;
      
      });
      
  
               
               
              data2 = google.visualization.arrayToDataTable([
              ['EEG Power', 'High Gamma', 'Low Gamma', 'Theta', 'High Alpha', 'Low Alpha', 'Low Beta', 'High Beta','Delta'],
              ['Real Time Data', highGamma, lowGamma, theta, highAlpha, lowAlpha, lowBeta, highBeta, delta]
            ]);
               
              var options2 = {
            chart: {
              title: 'EEG Power',
              subtitle: 'High Gamma, Low Gamma, Theta, High Alpha, Low Alpha, Low Beta, High Beta, Delta'}, 
        animation: {duration: 1000, easing: 'out'}
          };
              
  
          chart2.draw(data2, options2);
         
          });  
  
         
        
    
        }
      &lt;/script&gt;
      
      
      
   &lt;/head&gt;
      &lt;body&gt;
   
  
  &lt;table&gt;
        &lt;tr&gt;
          &lt;td class="container"&gt;
            &lt;div id="chart_div2" style="width: 800px; height: 700px;float: left;"&gt;&lt;/div&gt;      
          &lt;/td&gt;
         
        &lt;/table&gt;
             
        
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>