RealTime Flot chart not working with JSON

Question

I am using this realtime graph given here : http://www.flotcharts.org/flot/examples/realtime/index.html

I tried to replace the random math generating code with inputting values from JSON file. It draws a blank graph. Not able to figure out the problem since it looks logically correct. Please help.

Here's the scriplet:

<script type="text/javascript">

$(function() {

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

    var dat = [];
        //totalPoints = 300;

    function getRandomData() {
        //alert("fff");
        if (dat.length > 0)
            dat = dat.slice(1);

        // Do a random walk

        //while (dat.length < totalPoints) {

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

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

            //dat.push(y);

        $.getJSON('data_3.json', function(data) {
        alert(data+"i m here");
                for (var i in data.nums) {
                    output = data.nums[i];
                    dat.push(output);
                    }
        });

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < dat.length; ++i) {
            res.push([i, dat[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() ], {
        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();

    // Add the Flot version string to the footer

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

</script> 

And this is the JSON data, data_3.json:

{
"label": "FLOT",
"nums":[ 
    0.8446, 0.8445, 0.8444, 0.8451,    0.8418, 0.8264,    0.8258, 0.8232,    0.8233, 0.8258,
    0.8283, 0.8278, 0.8256, 0.8292,    0.8239, 0.8239,    0.8245, 0.8265,    0.8261, 0.8269,
    0.8273, 0.8244, 0.8244, 0.8172,    0.8139, 0.8146,    0.8164, 0.82,    0.8269, 0.8269,
    0.8269, 0.8258, 0.8247, 0.8286,    0.8289, 0.8316,    0.832, 0.8333,    0.8352, 0.8357,
    0.8355, 0.8354, 0.8403, 0.8403,    0.8406, 0.8403,    0.8396, 0.8418,    0.8409, 0.8384,
    0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,
    0.838, 0.8373, 0.8316, 0.8303,    0.8303, 0.8302,    0.8369, 0.84, 0.8385, 0.84,
    0.8401, 0.8402, 0.8381, 0.8351,    0.8314, 0.8273,    0.8213, 0.8207,    0.8207, 0.8215,
    0.8242, 0.8273, 0.8301, 0.8346,    0.8312, 0.8312,    0.8312, 0.8306,    0.8327, 0.8282,
    0.824, 0.8255, 0.8256, 0.8273, 0.8209, 0.8151, 0.8149, 0.8213, 0.8273, 0.8273,
    0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097,
    0.8101, 0.8119, 0.8107, 0.8105,    0.8084, 0.8069,    0.8047, 0.8023,    0.7965, 0.7919,
    0.7921, 0.7922, 0.7934, 0.7918,    0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867,
    0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816,
    0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845
] }

Answer 1

I believe the problem is you get the data asynchronously, but continue your code as if the data was already there.

When you get into getRandomData, you remove (almost) all points. Then you get new data asynchronously with $.getJSON. You try and fill res but the result of your $.getJSON is probably not there yet.

Insert a breakpoint/debugger when you fill res to check.

Try not to empty your dat variable by removing this code

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