title: Google combo chart transition animation
body: <p>today i found it these chart service by google and i played around with a little ans seem to go stuck and chart transition animation where i try 2 view two sets of different data on the same table which changes on button click, following is the code,</p>
  
  <pre><code>  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;button type="button" id="b1"&gt;Click Me!&lt;/button&gt; 
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
    &lt;title&gt;
    Google Visualization API Sample
    &lt;/title&gt;
    &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    google.load('visualization', '1', {packages: ['corechart']});
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    // Some raw data (not necessarily accurate)
  var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                   'Rwanda', 'Average'],
                  ['2004/05', 165, 938, 522, 998, 450, 114.6],
                  ['2005/06', 135, 1120, 599, 1268, 288, 382],
                  ['2006/07', 157, 1167, 587, 807, 397, 623],
                  ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                  ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
  var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                   'Rwanda', 'Average'],
                  ['2004/05', 122, 638, 722, 998, 450, 614.6],
                  ['2005/06', 100, 1120, 899, 1268, 288, 682],
                  ['2006/07', 183, 167, 487, 207, 397, 623],
                  ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                  ['2008/09', 123, 491, 829, 826, 366, 569.6]];
  
  // Create and populate the data tables.
  var data = [];
  data[0] = google.visualization.arrayToDataTable(rowData1);
  data[1] = google.visualization.arrayToDataTable(rowData2);
  
  var options = {
    width: 400,
    height: 240,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}},
    animation:{
      duration: 1000,
      easing: 'out'
    },
  };
  var current = 0;
  // Create and draw the visualization.
  var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
  var button = document.getElementById('b1');
  function drawChart() {
    // Disabling the button while the chart is drawing.
    button.disabled = true;
    google.visualization.events.addListener(chart, 'ready',
        function() {
          button.disabled = false;
          button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
        });
    options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
  
    chart.draw(data[current], options);
  }
  drawChart();
  
  button.onclick = function() {
    current = 1 - current;
    drawChart();
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="chart_div" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>over here <a href="https://developers.google.com/chart/interactive/docs/animation?hl=nl-NL" rel="nofollow">https://developers.google.com/chart/interactive/docs/animation?hl=nl-NL</a>, please, i know this is a nooby question, but this doesn't seem to work for me...i added references and everything but still doesn't gave me anything, please any one could fix this code with html to work or give some information how to, i'd be much grateful :) thank you very much. :)</p>