jqplot in an Accordian within a Tab not working

I am using jqplot to show graphs in an accordion. http://www.jqplot.com/tests/UI.php

When I just show the graphs without them being split into various accordion headers it works perfectly. As soon as I started putting the charts into the various accordion headers I started getting javascript errors when I mouse over where the chart should appear:

Error: plot.plugins.pieRenderer is undefined

Error: plot.plugins.barRenderer is undefined

<script type="text/javascript">
            $(function() {
                $("#RTD_BreakGroups").accordion({
                    autoHeight: false,
                    navigation: true,
                    collapsible: true,
                    active: false
                });

                $("#RTD_BreakGroups").bind('accordionchange', function(event, ui) {
                    var index = $(this).find("h3").index(ui.newHeader[0]);
                    switch (index)
                    {
                        case 1:
           开发者_运维技巧                 goodbadplot.replot();
                            percentdiffplot.replot();
                            break;
                        case 10:
                        Engineergoodplot.replot();
                        Engineerbadplot.replot();
                        break;
                }
            });
        });

<div id="RTD_BreakGroups">
        <h3><a href="#">RTD Overview</a></h3>
        <div>
            <div id="GoodVsBad" data-height="450" data-width="450" style="height:450px;width:450px;"></div>
            <div id="GoodVsBadThreshold" data-height="250" data-width="700" style="height:250px;width:700px;"></div>
            <style type="text/css">
                #GoodVsBadThreshold .jqplot-meterGauge-tick, #GoodVsBadThreshold .jqplot-meterGauge-label
                {
                    font-size: 10pt;
                }
            </style>
        </div>
<h3><a href="#">Engineer Overview</a></h3>
        <div>
            This grouping shows how RTD has been behaving if the player is a engineer.
            <div id="EngineerGoodRolls" data-height="450" data-width="1024" style="height:450px;width:1024px;"></div>
            <div id="EngineerBadRolls" data-height="450" data-width="1024" style="height:450px;width:1024px;"></div>
        </div>
    </div>

Like I said above, these charts load fine when they are not in the accordion, but throw errors about undefined renderers when in the accordion. Can any one see what I've done wrong?

the error is related to attempting to plot into a hidden div

https://bitbucket.org/cleonello/jqplot/issue/252/ppluginsbarrenderer-is-undefined

this fixes it for accordion

<script>
var plotline;   
var plotgraph = 0;     
$(document).ready(function(){ 
    $("#accordion").accordion({
        autoHeight: false,
        navigation: true
    });
    $("#accordion").bind('accordionchange', function(event, ui) {
        if (plotgraph==0){  
            drawGrid();     
        }
    });
});


function drawGrid() { 
    if ($('#chartdiv').is(":visible")) { 
          plotline=[11, 9, 5, 12, 14];   
          plotgraph =  $.jqplot('chartdiv',[plotline],{       
            stackSeries: true,       
            showMarker: false,       
            seriesDefaults: {           
                fill: true       
            },       
            axes: {           
                xaxis: {               
                    renderer: $.jqplot.CategoryAxisRenderer,               
                    ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]           
                }       
            }    
        });
    }     
    else{ 
        plotgraph = 0; 
    } 
} 
</script>

<div id="accordion">
    <h3><a href="#">Table</a></h3>
    <div class="ui-widget">
        <table style="border: solid white 20px;">
            <tr>
                <th>Mon</th>
                <th>Tues</th>
                <th>Wed</th>
                <th>Thr</th>
                <th>Fri</th>
            </tr>
            <tr>
                <td>11</td>
                <td>9</td>
                <td>5</td>
                <td>12</td>
                <td>14</td>
            </tr>
        </table>
    </div>
    <h3><a href="#">Graph</a></h3>
    <div class="ui-widget">
        <div id="chartdiv" style="height:400px;width:850px;"></div>     
    </div>  
</div>

or this for tabs

<script>
var plotline;   
var plotgraph = 0;     
$(document).ready(function(){ 
    $('.button').button(); 
        $("#tabs").tabs({   
            show: function(event, ui) {     
            if (plotgraph==0){  
                drawGrid();     
            }   
        }
    });
});


function drawGrid() { 
    if ($('#chartdiv').is(":visible")) { 
          plotline=[11, 9, 5, 12, 14];   
          plotgraph =  $.jqplot('chartdiv',[plotline],{       
            stackSeries: true,       
            showMarker: false,       
            seriesDefaults: {           
                fill: true       
            },       
            axes: {           
                xaxis: {               
                    renderer: $.jqplot.CategoryAxisRenderer,               
                    ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]           
                }       
            }    
        });
    }     
    else{ 
        plotgraph = 0; 
    } 
} 
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Table</a></li>
        <li><a href="#tabs-2">Graph</a></li>        
    </ul>
    <div id="tabs-1">
        <table>
            <tr>
                <th>Mon</th>
                <th>Tues</th>
                <th>Wed</th>
                <th>Thr</th>
                <th>Fri</th>
            </tr>
            <tr>
                <td>11</td>
                <td>9</td>
                <td>5</td>
                <td>12</td>
                <td>14</td>
            </tr>
        </table>
    </div>
    <div id="tabs-2">
        <div class="ui-widget">
            <p class="ui-widget-content para">
                <div id="chartdiv" style="height:400px;width:850px;"></div>
            </p>
        </div>  
    </div>  
</div>