draw new data per second in flot

http://stackoverflow.com/questions/9393424/flot-graph-is-not-working-with-time-and-count

by dkunin

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:550px;height:400px;"></div>
<div id="placeholder2" style="width:550px;height:400px;"></div>
<div id="placeholder3" style="width:550px;height:400px;"></div>
<div id="placeholder4" style="width:550px;height:400px;"></div>
<div id="placeholder5" style="width:550px;height:400px;"></div>
<div id="placeholder6" style="width:550px;height:400px;"></div>
<div id="placeholder7" style="width:550px;height:400px;"></div>
<div id="placeholder8" style="width:550px;height:400px;"></div>
<div id="placeholder9" style="width:550px;height:400px;"></div>

JavaScript

function draw() {
    this.array = getTimeArray();
    var options = {
        xaxis: {
            mode: "time",
            timeformat: "%H:%M:%S"
        },
        yaxis: {
            min: -50
        }
    };
    var data = {
        data: this.array,
        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 = 180;
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);