how to add dynamic data in a highchart?
Solution 1
I think you are nearly there; the only piece i believe you are missing is an initial call to your regData function from the chart's load event.
So to your second line after define the options, change this line:
chart: {renderTo: 'container'},
to this:
chart: {renderTo: 'container', events: {load: regData}},
Solution 2
Try converting the time strings to Javascript datetime objects. Highcharts will then read the datetimes correctly. For example, if the JSON date is in the format 'YYYY-MM-DD' you can use this code:
var dates = [];
$.each(jsondata[0], function(itemNo, item) {
year = parseInt(item.split('-')[0], 10);
month = parseInt(item.split('-')[1], 10);
day = parseInt(item.split('-')[2], 10);
dt = Date.UTC(parseInt(year), parseInt(month), parseInt(day));
series[0].data.push([dt, parseInt(jsondata[2][itemNo], 10)]);
series[1].data.push([dt, parseInt(jsondata[1][itemNo], 10)]);
dates.push(dt);
});
options.series = series;
cobolstinks
Software developer. I work primarily with .Net and Typescript/Javascript web applications. I enjoy Angular. I used to work on developing web services in java and before that i had the displeasure of working in COBOL, hence my avatar name. :(
Updated on June 25, 2022Comments
-
cobolstinks almost 2 years
I have a Highchart that is receiving JSON data via AJAX and jQuery. But my chart doesn't show the points until I hover the mouse over the chart. Even then the points are all at the very top of the chart. I don't think I'm adding my points to the series correctly. Please tell me what I'm doing wrong in the jsonpcallback function.
Thanks!
<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>