使用Ajax的动态Flot图表

Question

I'm new to javascript and flot and hope someone can help me with this problem I'm having. What I'm trying to achieve it have a dynamic flot graph on a page.

The data for the series that is to be plotted is in a file that will get updated every few seconds. I want the flot graph to read the data file every few seconds and be updated with the new data.

Here's the code I've got which isn't working. The graph displays ok on page load, but just doesn't get updated every 5 seconds.

Any help is much appreciated.

   $(function () {

var dataFolder = "http://localhost/graphdata/";

/***********************************************************************
 *             Function to get series data from a file
 ***********************************************************************/
function getSeriesData(file) {
    var url= dataFolder + file;
    var data = null;
    $.ajax({
        async: false,
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            data = datasets;
        },
        error: function(error,text,http){
            alert(error + " " + text + " " + http);
        }
    });  

    return data;
}
    var plot = $.plot($("#placeholder"),
        [
            {label: "A", data: getSeriesData("dataA.txt")},
            {label: "B", data: getSeriesData("dataB.txt")},
            {label: "C", data: getSeriesData("dataC.txt")}
        ],
        {
            series: {
                lines: {
                    color: "red",
                    show: true
                },
                points: {
                    show: true
                },
                shadowSize: 0,
                hoverable: true
            },
            colors: ["red", "blue", "green"],
            yaxis: {
                min: 0,  ticks:5
            },
            xaxis: {
                mode: 'time',
                timeformat: '%H:%m',
                show: false
            },
            legend:{
                show: true
            },
            grid:{
                color: "green",
                show: true,
                backgroundColor: "white",
                hoverable: true
            }
        }
);

var updateInterval = 1000 * 5;
function update() {

    plot.setData([
                          {label: "A", data: getSeriesData("dataA.txt")},
                          {label: "B", data: getSeriesData("dataB.txt")},
                          {label: "C", data: getSeriesData("dataC.txt")}
                      ]);
    plot.setupGrid();
    plot.draw();

    setTimeout(update, updateInterval);
}
update();});

Answer 1

It seems to update correctly for me using numbers. Can you provide a few data examples?

I changed the x axis and data pull but the updating worked fine.

function getSeriesData() {

var randomnumber=Math.floor(Math.random()*11)
var randomnumber2=Math.floor(Math.random()*11)
var data = [ 
             [randomnumber, randomnumber2],
            [randomnumber +1, randomnumber2 +2],
            [randomnumber +3, randomnumber2 +4],
            [randomnumber +5, randomnumber2 +6],
            [randomnumber +7,  randomnumber2 +8],

];

return data; 
}

fiddle - http://jsfiddle.net/EX6dv/1/