Sequencing multiple chains

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<p id="status"></p>
<div id="expr1" style="width: 315px; height: 240px; "></div>
<div id="expr2" style="width: 315px; height: 240px; "></div>
<div id="expr3" style="width: 315px; height: 240px; "></div>

JavaScript

$(document).ready(function () {
    var run = 1, loop = 1;
    var $status = $("#status");
    var imageHolder;
    var data = [];
    var options = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        xaxis: { tickFormatter: function (v) { return v + " sec"; } },
        yaxis: { tickFormatter: function (v) { return v + " dB"; } }
    };
    doIteration();
    $status.text("Finished!");

    function doIteration() {
        if (loop == 1) imageHolder = "#expr" + run;
        $.plot(imageHolder, [getRandomData(data)], options);
        showStatus(run, loop)            
        if (loop++ >= 10) {
            loop = 1;
            run++;
        }
        if (run <= 3) setTimeout(doIteration, 1000);
    }

    function getRandomData(data) {
        var prev = data.length > 0 ? data[data.length - 1] : 50;
        var y = prev + Math.random() * 10 - 5;
        if (y < 0) y = 0;
        if (y > 100) y = 100;
        data.push(y);

        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
        return res;
    }
    
    function showStatus() {
        $status.text("Run: " + run + ", loop: " + loop);
    }            

});