使用Ajax的动态Flot图表

Question

我是JavaScript和flot的新手，希望有人能帮助我解决这个问题。 我试图实现它有一个页面上的动态flot图。

要绘制的系列数据位于每隔几秒会更新一次的文件中。我希望flot图每隔几秒钟读取一次数据文件，并用新数据更新。

这是我得到的代码不工作。图表在加载页面时显示正常，但不会每5秒更新一次。

任何帮助，非常感谢。

$(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

我想通了。该文件的ajax调用被缓存在浏览器中，因此任何对同一文件的进一步调用都将从缓存中返回，使得看起来没有更新图形。在函数中切换缓存，现在它工作正常。

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

Answer 2

它似乎使用数字正确更新。你能提供一些数据例子吗？

我改变了X轴和数据拉，但更新工作正常。

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

小提琴 - http://jsfiddle.net/EX6dv/1/

Answer 3

看来你需要把更多的功能放在外面。

setTimeout(update, updateInterval);