问题
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.
I have the following code:
$(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
});
});
In the codebehind I have a method that gets the data from my db and converts the result into JSON:
e.g.
JavaScriptSerializer jss = new JavaScriptSerializer();
seriesarray = jss.Serialize(value1);
categoriesarray = jss.Serialize(value2);
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;
}
});
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?
LATEST UPDATE
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 gets this from my DB:
19 Aug 1 20 Aug 0 21 Aug 2 22 Aug 3 23 Aug 1 24 Aug 0 25 Aug 0
then I convert this to JSON:
{"19 Aug":1,"20 Aug":0,"21 Aug":2,"22 Aug":3,"23 Aug":1,"24 Aug":0,"25 Aug":0,"26 Aug":0}
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
回答1:
Try to change your for to this one:
$.each(data, function (i, e) {
categories.push(i);
seriesData.push(parseInt(e));
});
来源：https://stackoverflow.com/questions/18397809/highcharts-populating-realtime-data-with-time