我刚开始学习JavaScript和Flot,希望有人能帮我解决这个问题。我想在页面上实现一个动态的Flot图表。
要绘制的系列数据存储在一个文件中,该文件每隔几秒钟就会更新一次。我希望Flot图表能够每隔几秒钟读取数据文件,并用新数据进行更新。
以下是我的代码,但它并不能正常工作。图表可以在页面加载时正确显示,但在5秒后无法更新。
非常感谢您的帮助。
要绘制的系列数据存储在一个文件中,该文件每隔几秒钟就会更新一次。我希望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();});