android - Zooming in highchart makes line disappear -
i'm using highchart in android app display dynamic chart updated every 3 secs , displayed on 1 day.
my chart composed of 2 fixed data series displaying limit monitored data should not exceed, , monitored data (power value) power value 00:05 moment chart loaded, first displayed. , then, every 3 seconds, value added serie.
the problem when try zoom end point of power values. power data line (and one) disappear when zoom in. if zoom out, line reappears. if zoom on area end point of data power line not displayed, goes right.
i tried remove 2 fixed serie (it adjust chart height length of power data line whatever), , same zoom problem appears. can't zoom end point of power data line can zoom anywhere else. tried use datagrouping, problem stay same
here code:
$(function() { $(document).ready(function() { highcharts.setoptions({ global: { useutc: true } }); var datapower = android.getdayhistory((new date()).gethours(), (new date()).getminutes(), (new date()).getseconds()); //var datapower = []; console.log(datapower); // create chart $('#container').highcharts( 'stockchart', { chart : { type : 'line', backgroundcolor : '#d6d7d4', ignorehiddenseries: false, zoomtype : 'x', marginright : 10, events : { load : function() { // set updating of chart each second var series = this.series[0]; setinterval(function() { var x = (new date()).gettime(), // current time y = android.getdata((new date()).gethours(),(new date()).getminutes(), (new date()).getseconds()); series.addpoint([ x, y ]); android.checkalert((new date()).gethours(),(new date()).getminutes(), (new date()).getseconds()); }, 3000); } }, }, rangeselector : { buttons : [ { type : 'minute', count : 2, text : '2m' }, { type : 'minute', count : 5, text : '5m' }, { type : 'minute', count : 30, text : '30m' }, { type : 'hour', count : 1, text : '1h' }, { type : 'all', text : 'all' } ], selected : 4, inputenabled : false, }, xaxis : { ordinal : false, minrange : 36000 }, yaxis : { title : { text : 'power (mw)' }, max : 500, plotbands : [ { : 0, : 100, color : 'rgba(247, 247, 247, 0.3)' }, { : 100, : 200, color : 'rgba(215, 216, 212, 0.3)' }, { // light breeze : 200, : 300, color : 'rgba(247, 247, 247, 0.3)' }, { // light breeze : 300, : 400, color : 'rgba(215, 216, 212, 0.3)' }, { : 400, : 500, color : 'rgba(247, 247, 247, 0.3)' } ] }, plotoptions: { spline: { linewidth: 2, states: { hover: { enabled: true, linewidth: 3 } }, marker: { enabled: false, states: { hover: { enabled : true, radius: 5, linewidth: 1 } } } } }, title : {}, subtitle : {}, navigator : { enabled : false }, scrollbar : { enabled : false }, credits : { enabled : false }, series : [ { name : 'power', data : eval('[' + datapower + ']'), pointstart : date.utc((new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate()), pointinterval : 3000, }, { data : [ [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 0, 5, 0), 40 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 7, 0, 0), 40 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 7, 30, 0), 440 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 11, 57, 0), 440 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 12, 3, 0), 390 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 13, 57, 0), 390 ] , [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 14, 3, 0), 440 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 17, 3, 0), 440 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 23, 55, 0), 40 ] ], type : 'line', color : "#d3a6ad", enablemousetracking : false }, { data : [ [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 0, 5, 0), 60 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 7, 0, 0), 60 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 7, 30, 0), 460 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 11, 57, 0), 460 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 12, 3, 0), 410 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 13, 57, 0), 410 ] , [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 14, 3, 0), 460 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 17, 3, 0), 460 ], [ date.utc( (new date()).getfullyear(), (new date()).getmonth(), (new date()).getdate(), 23, 55, 0), 60 ] ], type : 'line', color : "#d3a6ad", enablemousetracking : false } ] }); }); });
Comments
Post a Comment