highcharts - Delay after addpoint when y-axis with opposite: true -
i want make chart adding many points series.addpoint( [xtime, yvalue], true, true); works fine, if chart big whole container filled , use opposite:true y-axis, last point missing shown, when next point has been added. without opposite:true can see points correctly added, have put y-axis right. tried increase offset, didn't solve problem.
how can show last point?
here jsfiddle: http://jsfiddle.net/charissima/tfheu/1/
in right corner, actual y value displayed. can see, chart displayed correctly until reaches right margin. afterwords chart 1 step behind.
var prevy = 0; var data = []; var time = (new date()).gettime(), i; // getting first data, show diagonals (i = -19; <= 0; i++) { data.push({ x: time + * 1000, y: math.round(math.random() * 11) }); } $(function () { $(document).ready(function() { highcharts.setoptions({ global : { useutc : false }, lang: { months: ['jan.', 'feb.', 'märz', 'april', 'mai', 'juni', 'juli', 'aug.', 'sep.', 'okt.', 'nov.', 'dez.'], weekdays: ['sonntag', 'montag', 'dienstag', 'mittwoch', 'donnerstag', 'freitag', 'samstag'], decimalpoint: ',', thousandssep: '.' }, chart : { zoomtype: 'x' }, scrollbar: { enabled: true }, navigation: { buttonoptions: { align: 'left' } }, navigator: { enabled: true, top: 388, outlinecolor: '#c0c0c0', outlinewidth: 1 }, tooltip: { enabled: true, xdateformat: '%d.%m.%y %h:%m:%s' }, credits: { enabled: false }, title: { text : '' }, xaxis: { type: 'datetime', linecolor: '#eeeeee', tickcolor: '#eeeeee', gridlinecolor: '#eeeeee', minorgridlinecolor: '#ffffff', gridlinewidth: 1, minrange: 1 * 60 * 1000, range: 3 * 60 * 1000, labels: { enabled: true } }, yaxis: { linecolor: '#eeeeee', tickcolor: '#eeeeee', gridlinecolor: '#eeeeee', opposite: true, offset: 5, linewidth: 1, tickwidth: 1, tickinterval: 1, minorgridlinecolor: '#ffffff', minortickinterval: 'auto', minorgridlinewidth: 0, minortickcolor: '#ffffff', minortickwidth: 1, endontick: false, title: { enabled: false }, labels: { formatter: function () { return highcharts.numberformat(this.value, 1,',','.'); } } }, plotoptions: { series: { linewidth: 1, threshold: null, showinlegend : false, marker: { enabled: false, radius: 2 } } } }); $('#container').highcharts({ chart: { events: { load: function() { var chart = this; var series = this.series[0]; setinterval(function() { var xtime = (new date()).gettime(); // current time var y = math.round(math.random() * 11); data.push([ xtime, prevy ]); data.push([ xtime, y ]); series.setdata(data, true); chart.xaxis[0].setextremes( chart.xaxis[0].min, chart.xaxis[0].max); document.getelementbyid('value').innerhtml = y; prevy = y; }, 3 * 1000); } } }, series: [{ name: 'series', type : 'area', color: 'rgba(026, 089, 184, 1)', fillcolor: 'rgba(200, 221, 251, 0.5)', // nicht mit # hexcode angeben, sonst funktioniert opacity (durchsichtigkeit) nicht data: data }] }); }); });
Comments
Post a Comment