jqPlot dynamic data updates
A playground doing some jqPlot behaviour testings.
HTML
<script src="http://cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.min.css">
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>
JavaScript
/* store empty array or array of original data to plot on page load */
var newData = [9, 1, 4, 6, 8, 2, 5,1,2,3,4,5,6,7,8,9];
/* initialize plot*/
var plot1;
renderGraph();
$('button').click( function(){
$(this).hide();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [newData]);
}
function doUpdate() {
if (newData.length) {
var val = newData.shift();
newData.push(val);
$.post('/echo/html/', {
html: val
}, function(response) {
var newVal = new Number(response); /* update storedData array*/
//storedData.push(newVal);
storedData=newData;
renderGraph();
log('New Value '+ newVal+' added')
setTimeout(doUpdate, 2000)
})
} else {
log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}