jQuery UI Tabs and Highcharts display/rendering issue

Question

Anyone ever used the tabs (jquery-ui-1.8.9) and pie charts from Highcharts 2.1.4 together? To put it simply, I have multiple tabs, where each tab s

Answer 1

I had a jQuery accordion that was opening with garbled charts... this was my solution:

first is stuffed the charts in a global: window.myNamespace.charts.#{container_id}, and then in my accordion i do this:

$('#my-accordion').accordion
  ...,
  change: () ->
    chartId = ui.newContent.find('.highcharts-container').parent().attr('id')
    window.myNamespace.charts[chartId].setSize(248,220) if chartId?

the above is coffeescript, but it should be easy enough to translate...

basically i'm calling setSize on the chart to set it to the size it already is... this has the effect of cleaning up the chart after it opens... which i'll admit is just a workaround... ideally highcharts fixes the bug and uses the size i'm giving them instead of trying to calculate the size from a hidden element

Answer 2

jQuery UI 1.9+ changed the way tabs are hidden, you should set your own classes when activating tabs this way:

$('#tabs').tabs({
  beforeActivate: function (event, ui) {
    $(ui.oldPanel).addClass('ui-tabs-hide');
    $(ui.newPanel).removeClass('ui-tabs-hide');
  }
});

combined with the following CSS:

.ui-tabs-hide { 
  display: block !important; 
  height: 0!important; 
  width: 0!important; 
  border:none!important; 
}

This will also fix any Flash embedded object not loading properly in hidden tabs.

Answer 3

I had a similar issue in that my charts were rendering on the client with zero width whenever the chart was on a tab that was not activated by default. This answer was inspired by ojreadmore's answer. Instead of using the document ready event of jQuery to initialize your highchart, you should instead use the activate event of your the tab your chart is on. This has the added benefit of doing the snazzy chart animation each time the user clicks the tab.

Instead of:

$(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Use:

$('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Answer 4

The second chart may be off because it sounds like it is hidden when you draw it. Try to draw the chart upon selection.

Here is some pseudo code to give you an idea of what I imagine. This is not tested.

$("#tabs").tabs({
  select: function(event, ui) {
     var chart = new Highcharts.Chart({
      chart: {
       renderTo: ui.panel.id,
       // blah blah
      }
     });

  }
});

Answer 5

This is my solution (only tested in Safari and Firefox). It works great if you want to load the chart into a hidden tab on a page with flexible width. The chart resize if the browser window is resized.

In the chart settings, set the width of the chart from the tab that opens on page load (using jQuery to get the width):

   var chart = new Highcharts.Chart({
     chart: {
       renderTo: 'container',
       type: 'column',
       width: $('#tab-1').width()
     },
     ....

The following function adjusts width if the browser window is resized. 500 is the height. This is done automatically if the width is not specified in the chart options.

$(window).resize(function() {
   chart.setSize($('#chart_tab').width(),500);       
});

Answer 6

Modification needed in order to make Highcharts work in hidden jQuery tabs. By default, jQuery sets display: none to hidden tabs, but with this approach Highcharts is unable to get the true width and height of the element. So instead, we position it absolutely and move it away from the viewport.

 <style type="text/css">
.ui-tabs .ui-tabs-hide {
     position: absolute;
     top: -10000px;
     display: block !important;
}           
 </style>

adding example: http://www.highcharts.com/studies/jquery-ui-tabs.htm