title: Animate highcharts bubble graph
body: <p>I have a chart which shows the growth, share and revenue of a product in a bubble graph. 
  I build this chart for every year since 2006. Now my question is if I can animate the chart from year to year so that you can see the changes.</p>
  
  <p>I already tried to something with ajax and json. It shows the new data but it won't animate. </p>
  
  <pre><code>$.ajax({
                      url: 'json.php', 
                      type: 'POST',
                      dataType: 'json',
                      success: function(data){
                          if(data &amp;&amp; data != ''){
                              for(var i = 0; i &lt; data.length; i++){
                                  portfolioChart.series[i].setData([[ data[i][0], data[i][1], data[i][2] ]]);
  
                                  portfolioChart.redraw();
                              }                               
                          }
                      },
                      error: function(html){alert(html)},
                      data: {year: act_year}
                  });
  </code></pre>
  
  <p>There are about 5 - 15 products to be loaded (animated)</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Now it's working quite well. The main problem is the number of products. Up to 4-5 products it works smooth.
  Here's my final code:</p>
  
  <pre><code>var years = [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015];
  
  $.each(years, function(pi, act_year){
  
      setTimeout(function(){
         $.ajax({
              url: 'json.php', 
              type: 'POST',
              dataType: 'json',
              success: function(data){
                  if(data &amp;&amp; data != ''){
                      for(var i = 0; i &lt; data.length; i++){
                          portfolioChart.series[i].setData([[ data[i][0], data[i][1], data[i][2] ]]);
                      }           
                  }
              },
              error: function(html){alert(html)},
              data: {year: act_year, products: productArray}
          });
      }, 500 + ( pi * 2000 ));
  });
  </code></pre>