Not able to use two "data series" in Flotcharts (In real time example)

Question

I just follow the tutors (and the post from "StackOverfklow") to create 2 lines series in this real-time graphics example, but this two lines appear to use the very same data...

I just cant figure out what I am doing wrong... here is my adustments(they are -> getRandomData2):

$(function() {
    // info for graph2
    instant=1;
    high=-45;
    frequency=3;

    // We use an inline data source in the example, usually data would
    // be fetched from a server

    var data = [],
        totalPoints = 300;

    function getRandomData() {

        if (data.length > 0)
            data = data.slice(1);

        // Do a random walk

        while (data.length < totalPoints) {

            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }

            data.push(y);
        }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    function getRandomData2() {
        if (data.length > 0)
            data = data.slice(1);

            while (data.length < totalPoints) {

                instant=instant-frequency;
                if (instant<high ){instant=(high*-1);}

                instantShow=instant;
                if(instantShow<20){instantShow=20;}


                data.push(instantShow);
            }       



        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    // Set up the control widget
    var updateInterval = 30;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            } else if (updateInterval > 2000) {
                updateInterval = 2000;
            }
            $(this).val("" + updateInterval);
        }
    });
    //  var plot = $.plot("#placeholder", [ getRandomData() ], {
    var plot = $.plot("#placeholder", [{ data: getRandomData()},{ data: getRandomData2()}], {

        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });  

//  function update() { plot.setData([getRandomData()]);
    function update() { plot.setData([{data:getRandomData()},{ data:getRandomData2()} ]);
         plot.draw(); 
         setTimeout(update, 25); 
    }

    update();

    // Add the Flot version string to the footer

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

Thanks for all suport/tips!

Answer 1

The problem is that in your getRandomData() and getRandomData2() you're working on same variable data, so one function overwrites the effect of the other. The solution is to simply separate them:

// We use an inline data source in the example, usually data would
// be fetched from a server

var data1        = [],
    data2        = [],
    totalPoints = 300;

and use them in corresponding functions:

function getRandomData() {
    if (data1.length > 0)
        data1 = data1.slice(1);

    // Do a random walk
    while (data1.length < totalPoints) {
        var prev = data1.length > 0 ? data1[data1.length - 1] : 50,
            y    = prev + Math.random() * 10 - 5;

        if (y < 0) {
            y = 0;
        } else if (y > 100) {
            y = 100;
        }

        data1.push(y);
    }

    // Zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < data1.length; ++i) {
        res.push([i, data1[i]])
    }

    return res;
}

function getRandomData2() {
    if (data2.length > 0)
        data2 = data2.slice(1);

    while (data2.length < totalPoints) {
        instant = instant - frequency;
        if (instant < high) {
            instant = (high * -1);
        }

        instantShow = instant;
        if (instantShow < 20) {
            instantShow = 20;
        }

        data2.push(instantShow);
    }

    // Zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < data2.length; ++i) {
        res.push([i, data2[i]])
    }

    return res;
}

Then you can see two lines: fiddle.