comment ajouter des données dynamiques dans un highchart?

J'ai un Highchart qui reçoit les données JSON via AJAX et jQuery. Mais mon tableau ne pas afficher les points jusqu'à ce que je passe avec la souris sur le graphique. Même alors, les points sont tout à fait en haut de la carte. Je ne pense pas que je vais ajouter mes points à la série correctement. S'il vous plaît dites-moi ce que je fais mal dans le jsonpcallback fonction.

Merci!

        <script type="text/javascript">
<!-- Begin Chart options-->
//define the options
var options = {
chart: {renderTo: 'container'},
title: {text: 'Brewery'},
subtitle: {text: ' '},
xAxis: {text: 'Time',type: 'datetime'},
yAxis: [{ //left y axis
title: {text: 'Temperature (℉)'},
labels: {align: 'left', x: 3, y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);}
},
showFirstLabel: false}, 
{ //right y axis
linkedTo: 0, gridLineWidth: 0, opposite: true,
title: {text: 'Temperature (℉)'},
labels: {align: 'right', x: -3, y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);}
},
showFirstLabel: false
}],
legend: {align: 'left', verticalAlign: 'top', y: 20,
floating: true, borderWidth: 0},
tooltip: {shared: true, crosshairs: true},
plotOptions: {  series: {cursor: 'pointer',
point: {events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX, 
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
this.y +'(℉)',
width: 200});
}}},
marker: {lineWidth: 1}}},
series: [   {name: 'Hot Liqour Tank'},
{name: 'MashTun'},
{name: 'Brew Kettle'},
{name: 'Post Chiller'},
{name: 'Control Box'}
]
};
<!-- End Chart Options -->
var chart;
//after DOM is loaded setup timeout to call the ajax method
$(document).ready(function() {
//call function to render the chart and setup the options
renderChart();
});
//this function requests the data
function reqData(){
$.ajax({
url: "http://192.168.0.11/"+Math.random(),
dataType: "jsonp",              
jsonp: "callback",
jsonpCallback: "jsonpcallback"
});
}
function jsonpcallback(rtndata) { 
for(var i = 0; i < rtndata.length; i++){
if(rtndata[i].sensor=="hlt")
{
chart.series[0].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="mt")
{
chart.series[1].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="bk")
{
chart.series[2].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="pc")
{
chart.series[3].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="box")
{
chart.series[4].addPoint([rtndata[i].time, rtndata[i].temp]);
}       
}
}
function renderChart(){
chart = new Highcharts.Chart(options);
}
//continually poll for data
setInterval(reqData, 5000);
</script>
Avez-vous essayez d'utiliser console.info ou la console.journal des états de journal de ce que vous faites? Peut-être l'aide d'un débogueur, comme le Chrome Dev tools ou Firebug aidera à vous montrer ce que vous faites mal. Aussi, postez un lien vers le site afin que nous puissions voir ce qui se passe. Merci!
Pour répondre à cette question, il est nécessaire de connaître la structure du JSON? Ce qui est à l'intérieur de rtndata? Comme il n'est pas possible pour nous de savoir ce qui est retourné par JSON

OriginalL'auteur cobolstinks | 2012-01-25