使用Ajax的动态Flot图表

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();});

3个回答


我知道了。 该文件的ajax调用已被缓存在浏览器中,因此对同一个文件的任何其他调用都将从缓存中返回,这使得该图似乎没有更新。 切换功能中的缓存,现在可以正常使用了。</ p>

  function getSeriesData(file){
     var url = dataFolder + file;
     var data = null;
     $ .ajax({
         异步:错误,
         快取:false,
         网址:url,
         方法:“ GET”,
         dataType:'json',
         成功:功能(数据集){
             数据=数据集;
         },
         错误:函数(错误,文本,http){
             警报(错误+“” +文字+“” + http);
         }
     });

     返回数据;
}
</ code> </ pre>
     </ div>

展开原文

原文

I figured it out. The ajax call for the file was being cached in the browser so any further calls for the same file would have been returned from cache, making it look like no updates to the graph were happening. Switch caching of in the function and it works fine now.

function getSeriesData(file) {
    var url= dataFolder + file;
    var data = null;
    $.ajax({
        async: false,
        cache: false,
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            data = datasets;
        },
        error: function(error,text,http){
            alert(error + " " + text + " " + http);
        }
    });  

    return data;
}


使用数字似乎对我来说正确更新。 您能否提供一些数据示例?</ p>

我更改了x轴和数据提取,但是更新工作正常。 </ p>

  function getSeriesData(){

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

];

返回数据;
}
</ code> </ pre>

小提琴- http://jsfiddle.net/EX6dv/1/ </ p>
     </ div>

展开原文

原文

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/


似乎您也需要把更新功能放在后面。</ p>

  setTimeout(update,updateInterval);
</ code> </ pre>
     </ div>

展开原文

原文

It seems you need to put following out side the update function too.

setTimeout(update, updateInterval); 

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问