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

Question

0

Asked: May 24, 20262026-05-24T15:59:07+00:00 2026-05-24T15:59:07+00:00

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

0

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?