performance - HighChart getting navigator to work with dynamic data -
i trying have live graph of bitcoins can running long term 2 datasets buy , sell using highstocks problem data live graph starts no data , gets update every 30 seconds , in conditions highstocks doesn't seem play nice
i have created demo close final code http://jsfiddle.net/v3z6t/2/! increment set 1 second speed demo, if change adapttoupdateddata true has significant lag effects until lowest navigator interval exceeded (30s) careful
i want navigator area work if leave updating adapttoupdateddata : true graph laggy after short time , can't leave running hours without whole browser starting not respond , getting script delay errors
this strange me running example 8 hours @ 30second increments 960 data points, not enough use processing , memory seems to
if adapttoupdateddata false graph faster , updates stream in ok until 1 of navigation buttons used graph no longer 'live' new updates out of scope, navigator starts @ 1970 rather start of series data
does know way trigger navigator refresh or can call when add new data point keep navigator area updated , keep graph @ latest data entry point , not stop page rendering in timely fashion? or better way of using api or data
hope makes sense whole idea of graph kept running days possibly weeks live view of data progressing , cant use handling large datasets example code highstocks data live, not mention not working large datasets anyway constant slow updates
$(function() { var curtime = $.now(); var chart = new highcharts.stockchart({ chart: { renderto: 'chartcontainer', zoomtype: 'x', turbothreshold:100, marker: { enabled: false, states: { hover: { enabled: true, radius: 5 } } }, shadow: false }, rangeselector: { buttons: [{ count: 30, type: 'second', text: '30s' },{ count: 5, type: 'minute', text: '5m' },{ count: 30, type: 'minute', text: '30m' },{ count: 60, type: 'minute', text: '1h' },{ count: 360, type: 'minute', text: '6h' },{ count: 720, type: 'minute', text: '12h' },{ count: 1, type: 'day', text: '1d' },{ type: 'all', text: 'all' }], inputenabled: false }, scrollbar: { liveredraw: false }, title : { text : 'live bitcoin data' }, exporting: { enabled: true }, navigation: { buttonoptions: { theme: { 'stroke-width': 1, stroke: 'silver', r: 0, states: { hover: { fill: '#bada55' }, select: { stroke: '#039', fill: '#bada55' } } } } }, navigator : { adapttoupdateddata: false }, yaxis: { title: { text: 'price' } }, xaxis: { type: 'datetime' }, credits: { enabled: false }, series: [{ name: 'sell', color: '#00ff00', pointstart: $.now(), data : [], tooltip: { pointformat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', valuedecimals: 3, valueprefix:"$" } },{ name: 'buy', color: '#ff00ff', pointstart: $.now(), data : [], tooltip: { pointformat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', valuedecimals: 3, valueprefix:"$" } }] }); setinterval(function() { var chart = $('#chartcontainer').highcharts(); var exchangesellrate = math.floor(math.random()*30)+40; var exchangebuyrate = math.floor(math.random()*30)+40; var x = $.now(); chart.series[0].addpoint([x,exchangesellrate],false,false); chart.series[1].addpoint([x,exchangebuyrate],true,false); }, 1000); });
Comments
Post a Comment