Center Highstock chart scrollbar handle - charts

Question

I have a bunch of stock charts rendered with Highstock charting API.
In an attempt to center the scrollbar handle for each chart, I use the following piece of code:
/* ============ Position chart scroll BEGIN ============ */
$(".highcharts-container").each(function () {
var scrollBar = $(this).find('.highcharts-scrollbar');
var scrollBarElms = scrollBar.find('rect');
var scrollBarTrackWidth = $(scrollBarElms[0]).attr("width");
var scrollBarHandleWidth = $(scrollBarElms[1]).attr("width");
var xPos = (scrollBarTrackWidth / 2) - (scrollBarHandleWidth / 2);
$(scrollBarElms[1]).attr("x", xPos);
});
/* ============ Position chart scroll END ============ */
The problem is that the handle and the 3 vertical lines that should 'decorate' it are separated. (You can see the entire thing HERE.)
Any suggestions on how to keep them together?

Answer 1

function getData() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i = i + 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)]);
}
return data;
}
function getRange(data) {
var l = data.length,
range = l * 0.1, // number of points -> 10%
min = data[Math.round(l / 2 - range / 2)][0],
max = data[Math.round(l / 2 + range / 2)][0];
return {
min: min,
max: max
};
}
/* ============ CHARTS OPTIONS BEGIN ============ */
var options = {
chart: {
zoomType: 'x',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime();
var y = Math.round(Math.random() * 100);
series.addPoint([x, y]);
}, 1000);
}
}
},
xAxis: {
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: null
},
exporting: {
enabled: false
},
// Disable navigator
navigator: {
enabled: false
},
series: [{
name: ''
}]
}
/* ============ CHARTS OPTIONS END ============ */
/* ============ DRAW CHARTS BEGIN ============ */
function renderCharts() {
$('div.chart-container').each(function () {
var chartId = $(this).attr('id');
var chartIdParts = chartId.split('-');
var chartIdentifier = chartIdParts[1];
//Set chart options dinamically
var chartId = "chart" + chartIdentifier;
var chart = $('#' + chartId);
var renderTo = "chartcontainer-" + chartIdentifier;
//Render Charts for each aech container
options.chart.renderTo = renderTo;
options.chart.type = 'line';
options.series[0].data = getData();
var range = getRange(options.series[0].data);
options.xAxis.min = range.min;
options.xAxis.max = range.max;
var chart = new Highcharts.StockChart($.extend(true, {}, options));
});
}
function setChatType() {
// Show types list (piker)
$('.current-type').on('click', function () {
$(this).parents('div.chart-options').find('ul.type ul').addClass('clicked');
});
$('.chart-options ul ul li a').on('click', function () {
//Get piked chart type
var type = $(this).parent('li').attr('data-chart-type');
// For text and Title Capitalization
var textAndTitle = type.replace(/^[a-z]/, function (m) {
return m.toUpperCase()
});
// Show piked type in picker
var currSetClass = 'current-type ' + type;
$(this).parents('.chart-options').find('.current-type')
.text(textAndTitle)
.attr({
class: currSetClass,
title: textAndTitle
});
// Then Hide the types list
$('.chart-options ul ul').removeClass('clicked');
//Identify current chart container by ID
var chartCtnId = $(this).parents('div.chart').find('.chart-container').attr('id');
// Render chart again with new type
options.chart.renderTo = chartCtnId;
options.chart.type = type;
var chart = new Highcharts.StockChart($.extend(true, {}, options));
});
}
/* ============ DRAW CHARTS END ============ */
$(document).ready(function () {
$("article.grid:even").addClass('left')
$("article.grid:odd").addClass('right');
// Draw charts
renderCharts();
// Set/change chart type
setChatType();
});
The entire solution can be found HERE.
Thanks to Paweł Fus for help!