draw new data per second in flot
http://stackoverflow.com/questions/9393424/flot-graph-is-not-working-with-time-and-count
HTML
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder2" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder3" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder4" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder5" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder6" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder7" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder8" width=205 height=85 style="width:205px;height:85px"></div>
<div id="placeholder9" width=205 height=85 style="width:205px;height:85px"></div>
JavaScript
var placeholder = $("#placeholder"),
placeholder2 = $("#placeholder2"),
placeholder3 = $("#placeholder3"),
placeholder4 = $("#placeholder4"),
placeholder5 = $("#placeholder5"),
placeholder6 = $("#placeholder6"),
placeholder7 = $("#placeholder7"),
placeholder8 = $("#placeholder8"),
placeholder9 = $("#placeholder9"),
options = {
xaxis: {
show: false
},
yaxis: {
min: -50
}
};
function draw() {
var data = [{
data: getTimeArray(),
lines: {
show: true,
lineWidth: 1,
shadowSize: 0
}
}];
$.plot(placeholder, data, options);
$.plot(placeholder2, data, options);
$.plot(placeholder3, data, options);
$.plot(placeholder4, data, options);
$.plot(placeholder5, data, options);
$.plot(placeholder6, data, options);
$.plot(placeholder7, data, options);
$.plot(placeholder8, data, options);
$.plot(placeholder9, data, options);
}
var period = 360;
var array = [];
var damntime = (new Date()).getTime();
var pointsPerPeriod = 50;
var numPoints = 3000;
var raises = true;
function getTimeArray(flg) {
var d = new Date(),
tz = d.getTimezoneOffset();
for (var i = 0; i < pointsPerPeriod; ++i) {
array.push([damntime, raises ? i : pointsPerPeriod - i - 1]);
damntime += 100;
}
raises = !raises;
if (array.length > numPoints) {
array.splice(0, array.length - numPoints);
}
return array;
}
draw();
setInterval(draw, period);