Tab 2 and tab 3 contain plots which are initially hidden. Using a combination of alternate sizing specification and the plots "replot" method the plots are properly displayed when their containers are shown.

The alternate sizing specifications for setting plot height and width are needed because a hidden element (or child of a hidden element) has no size. The first example in tab 2 uses custom "data-height" and "data-width" attributes on the plot target element to specify height. The second example uses "width" and "height" properties specified on the options object passed into the $.jqplot() function.

The default size is 300px wide by 400px high. The default setting can be overriden by specifying different values to the $.jqplot.config.defaultHeight and $.jqplot.config.defaultWidth properties. Height and width values are taken in this order of prececence:

1. The css properties if available and plot is not hidden with display:none.
2. Options object passed into the $.jqplot() function.
3. Custom data-height and data-width attributes on the plot target.
4. The config defaults.

Here is how the replot method can be used to bind to the "tabsshow" event of the UI tabs:

    $('#tabs').bind('tabsshow', function(event, ui) {
      if (ui.index == 1) {
        plot1.replot();
      }
      else if (ui.index == 2) {
        plot2.replot();
      }
    });

The ui.index property is the index of the tab that was shown.

This plot was in an initially hidden container. It's hieght and width are set by the "data-height" and "data-width" properties of the plot container.

This plot is in an initially hidden container. It's height and width are set by the 'height' and 'width' properties of the options object passed into the plot constructor.

Secion 2 contains a plot. Sizing plots in hidden accordion sections is very similar to sizing in a tab widget. Because of the default animation on accordions, however, the plot will not draw itself until the entire accordion panel is shown.

Binidng to the accordion "accordionchange" event is also similar as with tabs:

    $('#accordion').bind('accordionchange', function(event, ui) {
      var index = $(this).find("h3").index ( ui.newHeader[0] );
      if (index == 1) {
        plot3.replot();
      }
    });
    

This plot also has it's height and width set with the data-height and data-width attributes. Note, if you want the accordian widget to properly size itself before the plot is shown, you must also specify a css height and width on the plot target.