Jquery.flot - Android 4.2.2 WebKit 534.30 creates a second graph on the page -
i have jquery flot filtering buttons below graphic , enable user show values on weekly manner, or daily manner , on. problem happens when user clicks filtering button, flot chart above first chart created , stays there till leave page , come page.
i have following code show graph user gets page ; , filtering button calls function has same piece of code different tick size (with week example).
ps: i'm using phonegap prepares app normal android webview. engine used depends on android version.
webkit versions; ref
- android 4.2.2 534.30 ( flot chart created)
- android 4.4.x 537.36 ( works expected )
code:
var plot = $.plot("#placeholder", [{ data: dalle }], { series: { lines: { show: true }, points: { show: true } }, grid: { hoverable: true, clickable: true, markings: [{ yaxis: { from: 0, to: 12 }, color: "#f2cdea" }, { yaxis: { from: rangemin, to: rangemax }, color: "#d7eee1" }] }, xaxis: { mode: "time", minticksize: [1, "month"], /*min: theveryfirstpoint, max: theverylastpoint*/ }, yaxis: { min: 0, max: 12 } }); the weird thing same logic works android lg g2 api level 19 (4.4.2), when install app samsung s2 api level 16 (4.2.2) , problem occurs. there way of preventing occuring?
css + js imports follows ;
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel="stylesheet" href="css/jqm-icon-pack-fa.css" /> <script type="text/javascript" src="cordova.js"></script> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> <link href="css/examples.css" rel="stylesheet" type="text/css"> <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.threshold.js"></script> <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script> <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.areamarkings.js"></script> filter function called ;
$("#a-uke").click(function() { console.log("a dag filtering applied..."); var newdataser = window.localstorage.getitem("storeddata"); if (newdataser != null) { newdataser = json.parse(newdataser); // convert new array object first time //if (dagbuttonclicked == false) { $.each(newdataser, function(index, datapoint) { datapoint[2] = datapoint[0]; datapoint[0] = (new date(datapoint[0])).gethours(); console.log("hours created : " + datapoint[0]); dagbuttonclicked = true; }); //} if (newdataser != null && newdataser.length > 0) { newdataser.sort(function(x, y) { console.log("sorting.."); return x[0] - y[0]; }) } } else newdataser = []; $.plot("#placeholder", [newdataser], { series: { lines: { show: true }, points: { show: true } }, grid: { hoverable: true, clickable: true, areamarkings: [{ points: [ [7, 12], [24, 12], [24, 0], [7, 0] ], linewidth: 0, fillcolor: "#f2cdea" }, { points: [ [7, rangebr1], [7, rangebr2], [10, rangebr2], [10, rangebr1] ], // green breakfast linewidth: 0, fillcolor: "#d7eee1" }, { points: [ [7, rangebr2], [7, rangebr3], [10, rangebr3], [10, rangebr2] ], // gradient1 top breakfast linewidth: 0, fillcolor: "#dfe4e3" }, { points: [ [7, rangebr3], [7, rangebr4], [10, rangebr4], [10, rangebr3] ], // gradient2 top breakfast linewidth: 0, fillcolor: "#e7dae6" }, { points: [ [7, rangebrbot2], [7, rangebrbot3], [10, rangebrbot3], [10, rangebrbot2] ], // gradient1 bottom breakfast linewidth: 0, fillcolor: "#dfe4e3" }, { points: [ [7, rangebrbot1], [7, rangebrbot2], [10, rangebrbot2], [10, rangebrbot1] ], // gradient2 bottom breakfast linewidth: 0, fillcolor: "#e7dae6" }, { points: [ [10, rangemin], [10, rangemaxgrad], [24, rangemaxgrad], [24, rangemin] ], // green rest linewidth: 0, fillcolor: "#d7eee1" }, { points: [ [10, rangemaxgrad], [10, rangemaxgrad2], [24, rangemaxgrad2], [24, rangemaxgrad] ], // gradient1 top rest linewidth: 0, fillcolor: "#dfe4e3" }, { points: [ [10, rangemaxgrad2], [10, rangemaxgrad3], [24, rangemaxgrad3], [24, rangemaxgrad2] ], // gradient2 top rest linewidth: 0, fillcolor: "#e7dae6" }, { points: [ [10, rangemingrad2], [10, rangemin], [24, rangemin], [24, rangemingrad2] ], // gradient1 bottom rest linewidth: 0, fillcolor: "#dfe4e3" }, { points: [ [10, rangemingrad3], [10, rangemingrad2], [24, rangemingrad2], [24, rangemingrad3] ], // gradient2 bottom rest linewidth: 0, fillcolor: "#e7dae6" }] }, xaxis: { tickformatter: getampmhour, min: 7, max: 24 }, yaxis: { min: 0, max: 12 } }); });
not sure causing bug, there 2 possible solutions can try:
1) can clear old plot before creating new one:
$('#placeholder').empty(); $.plot("#placeholder", [newdataser], { /* new options */ }); 2) can use existing plot instead of creating new 1 (which recommended way):
plot.setdata([newdataser]); plot.getoptions().grid.areamarkings = [ /* new markings / options */ ]; plot.getoptions().xaxis = { /* new options */ }; plot.setupgrid(); plot.draw();
Comments
Post a Comment