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>

Forgot to mention.. I'm using phonegap for the application. I've tested it on three different devices which are all displaying multiple plots within the same graph. I also tested it as a web app through local host. Somehow my tablet (Samsung) isn't showing any problems.. It works perfectly! But my phone (Samsung Galaxy Core) is displaying the same issues.