javascript - Highcharts - update chart using ajax -
here sample chart random data http://jsfiddle.net/fw4pz/
$(function () { $(document).ready(function() { highcharts.setoptions({ global: { useutc: false } }); var chart; chart = new highcharts.chart({ chart: { renderto: 'container', type: 'area', marginright: 10, events: { load: function() { // set updating of chart each second var series = this.series[1]; setinterval(function() { var x = (new date()).gettime(), // current time y = math.random(); series.addpoint([x, y], true); }, 1000); } } }, title: { text: 'live random data' }, xaxis: { type: 'datetime', tickpixelinterval: 150 }, yaxis: { title: { text: 'value' }, plotlines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ highcharts.dateformat('%y-%m-%d %h:%m:%s', this.x) +'<br/>'+ highcharts.numberformat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'random data', data: [] },{ name: 'random data', type: 'spline', data: [] }] }); }); }); how update each series, not [1] ?
load: function() { // set updating of chart each second var series = this.series[0]; setinterval(function() { var x = (new date()).gettime(), // current time y = math.random(); series.addpoint([x, y], true); }, 1000); // set updating of chart each second var series = this.series[1]; setinterval(function() { var x = (new date()).gettime(), // current time y = math.random(); series.addpoint([x, y], true); }, 1000); } doesn't work...
and 2nd thing... how update series using ajax? (i need have 2 areas , 4 splines)
update change this
events: { load: function() { // set updating of chart each second var series = this.series; setinterval(function() { var x = (new date()).gettime(), // current time y = math.random(); series[0].addpoint([x, y], false); series[1].addpoint([x, y], false); series[2].addpoint([x, y], false); series[3].addpoint([x, y], false); series[4].addpoint([x, y], false); series[5].addpoint([x, y], true); }, 5000); } } but crashes browser :\ http://jsfiddle.net/2tmrb/1/ (watch out link!) i'm doing wrong?
example:
var series = this.series; setinterval(function() { var x = (new date()).gettime(), // current time y = math.random(), y1 = math.random(); series[0].addpoint([x, y], false); series[1].addpoint([x, y1], true); }, 1000); live example: http://jsfiddle.net/fw4pz/1/
regarding ajax - in setinterval call getjson() or similar, , add values response chart using addpoint() (like in above example).
Comments
Post a Comment