Highstock navigator freezing with jquery slider tabs - jquery-ui

Question

Hi I am facing problem of making navigator on Highstock charts to work as they freeze when I use jQuery ui slider tabs with it. I am not able to debug it as I can't find any error. Any help on debugging or error that might be causing it would be greatly appreciated.My code looks like this:
"<link rel="stylesheet" href="/sites/all/libraries/InterestHighcharts/jquery_slider/styles/jquery.sliderTabs.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js'></script>
<?php
print '<div id="mySliderTabs">
<ul>';
for ($i=1;$i<=5;$i++)
{ $j=$i-1;
$tab_title=$tab_titles_arr[$j];
$tab_title_len=strlen($tab_title);
if($tab_title_len > 7)
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.substr($tab_title,0,6).'</li>';
}
else
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.$tab_title.'</li>';
}
}
print '</ul>';
for($i=1;$i<=5;$i++)
{
print '<div id="container'.$i.'" style="height:375px !important; width:540px !important; margin-left:-10px !important;">Problem reading the charts</div>';
}
print '</div>';
?>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
(function($) {
for (i=1;i<=tabs_count;i++)
{ var j=i-1;
var flag_test=flagAr[i];
$('#container'+i).highcharts('StockChart', {
chart: {
borderColor: '#000000',
height:390,
width:550,
marginLeft:-3,
marginTop:13,
events: {
load: function() {
this.renderer.image('http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/Interest_logo.gif', 170, 75, 200, 100).add(); // add image(url, x, y, w, h)
},
}
},
credits: {
enabled: true,
itemStyle: {
cursor: 'pointer',
color: '#000000',
fontSize: '11px',
fontWeight:'bold'
},
position: {
align: 'right',
x:-60,
verticalAlign: 'bottom',
y:-100
},
text: 'Source:'+source_arr[j],
href: source_hyperlink_arr[j]
},
rangeSelector : {
selected : 1,
inputEnabled : false,
buttonTheme: {
display: 'none',
},
labelStyle: {
color: 'transparent',
},
buttons: [{
type: 'day',
count: 12,
text: '1d'
}, {
type: 'week',
count: 3,
text: '3w'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : chart_title_arr[j],
x:-220,
style: {
fontFamily:'Arial,Helvetica,sans-serif',
fontWeight:'bold'
}
},
subtitle : {
text : chart_subtitles_arr[j],
floating:true,
x:-120,
y:15,
style: {
fontFamily:'Arial,Helvetica,sans-serif'
}
},
tooltip : {
valueDecimals : 2,
headerFormat:'<span style="font-size: 10px; margin-left:20px;">{point.key}</span><br/>',
pointFormat: '<span style="color:#FF0000; font-weight:bold">{point.y}</span><br/>'
},
xAxis: {
type: 'datetime',
lineWidth: 20,
gridLineColor:'#FAFFFF',
gridLineDashStyle:'Dot',
dateTimeLabelFormats: {
day: '%e-%b',
week: '%e-%b',
month: '%b-%y',
year: '%Y'
},
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
max:xpad[i],
labels: {
style: {
color: 'black',
fontSize: '10px',
fontWeight:'bold',
fontFamily:'Arial,Helvetica,sans-serif',
},
y:3, //to pull x-axis label down
},
//showLastLabel:false,
},
yAxis: {
opposite: true,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value,setdecimalpoints(this.value));
},
style: {
color: 'black',
fontSize: '10px',
fontWeight:'normal'
},
y:-12,
}
},
series : [{
data : finalAr[i],
id: 'dataseries',
lineWidth:3,
zIndex:9999,
shadow:{
width:3,
color:'#000000',
opacity:.7
},
lineColor:'#FF0000',
type : 'area',
dataGrouping:{
dateTimeLabelFormats: {
day: ['%b-%e,%Y'],
week: ['%e-%b'],
month:['%b-%y'],
year: ['%Y']
}
},
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[8]],
[1, 'rgba(255,255,255,0)']
]
}
},
{
type: 'flags',
useHTML: true,
name: 'Flags on series',
data: JSON.parse("["+flag_test+"]"),
onSeries: 'dataseries',
shape: "url(http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/balloon.jpg)",
width : 5,
y: -33
}],
navigator : {
adaptToUpdatedData: true,
enabled:true,
xAxis: {
labels:
{
enabled: false,
}
},
height: 50,
margin:-2,
series: {
lineColor:'#FF0000',
type : 'area',
fillColor : '#FFFFFF'
}
},
scrollbar: {
liveRedraw: false,
},
});
}
})(jQuery);
</script>
<script src="/sites/all/libraries/InterestHighcharts/jquery_slider/jquery.sliderTabs.min.js"></script>
<script type="text/javascript">
jQuery("#mySliderTabs").sliderTabs();
//jQuery("div#mySliderTabs").sliderTabs();
</script>
</div>"