高图随时间填充实时数据 [英] Highcharts Populating Realtime Data with Time
问题描述
我已经四处寻找了几天，并测试了不同的样本，但是我无法弄清楚这一点，我希望有人知道答案，非常感谢.我正在创建一个图表，并从我的数据库中填充数据.我正在寻找一种使它每5秒重绘一次图表的方法.我曾尝试使用setInterval和setTimeout以及Charts.redraw()和其他解决方案，但发现读取了几个不同的示例，但未能使其正常工作.
I have been looking all around for a couple of days and testing different samples but I have not been able to figure this out and I hope someone knows an answer to this, thanks a lot. I am creating a chart and populating the data from my db. I am looking for a way to make it redraw the chart every 5 seconds. I have tried using setInterval and setTimeout and charts.redraw() and other solutions I have found reading several different samples, but haven't managed to get it working.
我有以下代码:
$(function () {
var reports= new Highcharts.Chart({
chart: {
renderTo: "reports",
defaultSeriesType: "area"
},
plotOptions: {
series: {
color: "#1875d3",
fillOpacity: 0.1,
lineWidth: 4,
marker: {
radius: 5,
lineWidth: 1,
lineColor: "#FFFFFF"
}
}
},
series: [{
name: "Reports",
data: <%= seriesarray %>
}],
yAxis: {
title: {
text: null
},
labels: {
x: 15,
y: 15,
style: {
color: "#999999",
fontWeight: "bold",
fontSize: "10px"
}
},
gridLineColor: "#e7e7e7"
},
xAxis: {
gridLineColor: "#e7e7e7",
labels: {
x: 15,
y: -5,
style: {
color: "#268ccd",
fontSize: "10px"
}
},
categories: <%= categoriesarray %>
},
tooltip: {
formatter: function () {
return "Visits: " + this.y;
},
borderColor: "#333333"
},
credits: false,
title: false,
exporting: false,
legend: false
});
});
在后面的代码中，我有一个方法可以从数据库中获取数据并将结果转换为JSON:
In the codebehind I have a method that gets the data from my db and converts the result into JSON:
例如
JavaScriptSerializer jss = new JavaScriptSerializer();
seriesarray = jss.Serialize(value1);
categoriesarray = jss.Serialize(value2);
我还创建了一个不同版本的Web服务，如下所示:
I also created a different version calling a web service as follow:
$().ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
//var series = this.series[0];
//var seriesData = getData();
setInterval(function() {
var chart = $('#container').highcharts();
chart.series[0].setData(getData(), true);
//setTimeout(getData, 500);
}, 1000);
}
}
},
xAxis: {
gridLineColor: "#e7e7e7",
labels: {
x: 15,
y: -5,
style: {
color: "#268ccd",
fontSize: "10px"
}
},
},
yAxis: {
title: {
text: null
},
labels: {
x: 15,
y: 15,
style: {
color: "#999999",
fontWeight: "bold",
fontSize: "10px"
}
},
gridLineColor: "#e7e7e7"
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
color: "#1875d3",
fillOpacity: 0.1,
lineWidth: 4,
marker: {
radius: 5,
lineWidth: 1,
lineColor: "#FFFFFF"
}
}
},
series: getData()
});
function getData() {
var retvalue;
$.ajax({
url: 'Test.aspx/getData',
data: [],
dataType: 'json',
type: 'POST',
async: false,
contentType: "application/json; charset=utf-8",
success: function (data) {
retvalue = eval(data.d);
//setTimeout(getData, 2000);
},
cache: false,
error: function (xhr, ajaxOptions, thrownError) {
var errorData = JSON.parse(xhr.responseText);
$.each(errorData, function (key, value) {
if (key == 'Message') {
alert(value);
retvalue = "0";
}
});
}
})
return retvalue;
}
});
这两个示例中的图表绘制都很好，但是它并不能实时更新，这正是我所需要的.在第二个示例中，实际上我没有在xAxis中显示类别，因为我找不到将其添加到第二个版本中的语法.
The chart draws just fine in both examples but it doesn't update in real time which is what I need. On my second example, I actually not getting the categories showing in the xAxis because I couldn't find the syntax to add that to the second version.
任何人都知道如何才能再次绘制图表，以便它从我的数据库中获取实时数据?
Anyone knows how can I get the chart to draw again so it gets the real time data from my db?
最新更新
这是我花了整个周末弄清楚语法之后完成此工作最接近的地方:
This is now the closest I am from getting this done after spending the weekend figuring the syntax out:
var chart;
var c = [];
var d = [];
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: getData
}
},
title: {
text: 'Live data'
},
xAxis: {
categories: c
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
data: d
}]
});
});
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function getData() {
$.ajax({
url: 'Test.aspx',
dataType: 'json',
success: function (data) {
var categories = [];
var seriesData = [];
$.each(data, function () {
categories.push(this.data);
seriesData.push(parseInt(this.count));
});
chart.xAxis[0].setCategories(categories);
chart.series[0].setData(seriesData);
setTimeout(requestData, 1000);
},
cache: false
});
}
Test.aspx从我的数据库获取此信息:
Test.aspx gets this from my DB:
1年8月19日 0 8月20 2月8日21 3月8日 1月8日23 0八月24 0 8月25日
19 Aug 1 20 Aug 0 21 Aug 2 22 Aug 3 23 Aug 1 24 Aug 0 25 Aug 0
然后将其转换为JSON:
then I convert this to JSON:
{"8月19日":1，"8月20日":0，"8月21日":2，"8月22日":3，"8月23日":1，"8月24日":0，"8月25日" :0，"8月26日":0}
{"19 Aug":1,"20 Aug":0,"21 Aug":2,"22 Aug":3,"23 Aug":1,"24 Aug":0,"25 Aug":0,"26 Aug":0}
例如8月19日=水平数据 1 =垂直数据
e.g. 19 Aug = horizontal data 1 = Vertical data
请参阅下面的内容，完全没有错误.谁知道我该如何显示数据?非常感谢
See below for what I get, no errors at all. Anyone knows how can I get the data to show now? thanks a lot
推荐答案
尝试将其更改为此:
$.each(data, function (i, e) {
categories.push(i);
seriesData.push(parseInt(e));
});
这篇关于高图随时间填充实时数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
