HighChart getting navigator to work with dynamic data - performance

Question

I am trying to have a live graph of bitcoins that can be running long term with two datasets buy and sell using HighStocks the problem is the data is all live so the graph starts with no data and gets an update every 30 seconds and in those conditions HighStocks doesn't always seem to play nice
I have created a demo which is very close to the final code http://jsfiddle.net/v3z6T/2/! the increment is set to 1 second to speed up the demo, also if you change adaptToUpdatedData to true this has significant lag effects until the lowest navigator interval is exceeded (30s) so be careful
I want the navigator area to work but if i leave it updating with adaptToUpdatedData : true
The graph is very laggy after a short time and I can't leave it running for hours without the whole browser starting to not respond and getting script delay errors
This is strange to me as running for example 8 hours at 30second increments is only 960 data points, not enough to use as much processing and memory as it seems to
If adaptToUpdatedData is false the graph is much faster and the updates stream in ok until one of the navigation buttons is used then the graph is no longer 'live' as the new updates are out of scope, also the navigator starts at 1970 rather than the start of the series data
Does anyone know a way to trigger a navigator refresh or something I can call when I add a new data point that will keep the navigator area updated and keep the graph at the latest data entry point and not stop the page from rendering in a timely fashion? or a better way of using the api or data
Hope that makes sense
The whole idea of this graph is to be kept running for days possibly weeks to get a live view of the data as its progressing and I cant use the handling large datasets example code from HighStocks as the data is all live, not to mention I am not really working with large datasets anyway just 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);
});