Duplicate plot rendering of Flot graph

I'm using jquery mobile and flot to display charts on a native (android v.4.2) 
application (image 1). Flot is however displaying the same series twice when 
the page is loaded. When I hide the (first) plot with the toggling buttons 
(image 2), the second plot stays present. When I use the jquery mobile swipe 
function to scroll through the chart the second plot finally disappears. 
Sometimes you can actually see the second plot behind the first one because of 
an offset (image 3). After reactivating the plot the second (unwanted) plot 
reappears as well.

Image 1: http://postimg.org/image/dj1vogy7l/

Image 2: http://postimg.org/image/ewtijrxgx/

Image 3: http://postimg.org/image/tvbxe7cj5/

Any ideas on how I can fix this?

Here is most of the code:

$(document).ready(function ()
    {   
        togglePlot = function(seriesIdx)
        {
          var currentData = Plot.getData();
          currentData[seriesIdx].bars.show = !currentData[seriesIdx].bars.show;

          Plot.setData(currentData);
          Plot.setupGrid();
          Plot.draw();
        }
}):

var graphData = [{
            data: plotData[0],
            color: 'rgba(0, 0, 0, 0)',
            highlightColor: 'rgba(96, 96, 94, 1.0)',
            bars: { show: false, fillColor: "rgba(96, 96, 94, 0.5)"},
            points: {show: false},
            lines: {show:false},
            idx: 0,         
        }
        , {
            data:   plotData[1],
            color: 'rgba(0, 0, 0, 0)',
            highlightColor: 'rgba(123, 192, 67, 1.0)',
            bars: { show: false, fillColor: "rgba(123, 192, 67, 0.5)" },
            points: {show: false},
            lines: {show:false},
            idx: 1
        }];

Plot = $.plot($('#graph-content'), graphData, 
    {
        series: {
            bars: {
                barWidth:1000 * 60 * 60 * 12,
                align: 'center'
            },
            shadowSize: 0
        },
        grid: 
        {
            borderColor: 'transparent',
            borderWidth: 20,
            mouseActiveRadius: 20,
            hoverable: true,
            clickable: false,
        },
        xaxis: 
        {
            tickColor: "rgba(255, 255, 255, 0)",
            ticks: plotData[0].length,
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelPadding: 5,
            mode: 'time',
            tickFormatter: function (val, axis) {           
                return dayOfWeek[new Date(val).getDay()];
            },
        },
        yaxis: 
        {
            tickColor: "rgba(255, 255, 255, 0)"
        },
        legend: 
        {
            labelBoxBorderColor: 'transparant',
            backgroundColor:'#eeeeee',
            noColumns: 3,
            position: "nw",
            margin: [-69,220]
        }
    });

<div id="graph-wrapper">
        <div class="graph-container" style="margin-left:1.5em;">
            <div id="graph-content" style="background:none;"></div>
        </div>
    </div>

    <table id="Legendlabels" > 
            <tr>        
                <script> 
                    document.write("<td style='width:5.5em; padding-right:1.0em'> <input id='legendCB0' class='legendCB' type='checkbox' /> <label for='label0' name='label0' class='legendCB-label' id='legendCB-label0' onclick='togglePlot(0)'><a> Energieverbruik </a></label> </td>");  
                    document.write("<td> <input id='legendCB1' class='legendCB' type='checkbox' /> <label for='label1' name='label1' class='legendCB-label' id='legendCB-label1' onclick='togglePlot(1)'><a> Energieproductie </a></label> </td>");  
                </script> 
            </tr>
    </table>
Original issue reported on code.google.com by boekemam...@gmail.com on 20 Aug 2014 at 11:15
zhaoweikai / flot

Duplicate plot rendering of Flot graph #770
