title: jQuery UI Tabs and Highcharts display/rendering issue
body: <p>Anyone ever used the tabs (<code>jquery-ui-1.8.9</code>) and pie charts from <code>Highcharts 2.1.4</code> together? To put it simply, I have multiple tabs, where each tab shows a pie chart with different data. The charts DO render to the divs, but when I click on the 2nd tab, the chart somehow shows up <code>300px</code> to the right of where it's suppose to be. Whenever I zoom in or out of the browser window, the chart goes back to the correction position.</p>
  
  <p>My code:</p>
  
  <p>//Suppose the number tabs are generated based on variable $count, and there are 2 tabs  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var chart_tab_&lt;?=count?&gt;;
  
  $(document).ready(function() {
      chart_tab_&lt;?=count?&gt; = new Highcharts.Chart({
        chart: {
           renderTo: 'chart_tab_&lt;?=count?&gt;',
           // blah blah
        }
  
  &lt;body&gt;
      &lt;div id="chart_tab_&lt;?=count?&gt;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Again, the chart renders, but on the 2nd tab the display is bugged. </p>
  
  <p>Update: I know that this KIND OF fixes the problem:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
     $(document).ready(function() {
        $( "#tabs" ).tabs({
            cookie: { expires: 1 }
        });
        $( "#tabs" ).tabs({
            select: function(event, ui) { window.location.reload(); }
        });
     });
  </code></pre>
  
  <p>But it's really crappy because the page has to be reloaded every time a user clicks on the tab. Any ideas would be great.</p>