Highcharts: Stacked bar chart display categories data, not series - highcharts

Question

I have two JS associative arrays that look like this:
var distroDates = [
{
name: 'exDate',
data: [
'06/25/2013',
'12/17/2012',
'06/20/2012',
'12/19/2011',
'06/21/2011',
'12/20/2010',
'06/21/2010',
'12/21/2009',
'06/22/2009',
'12/22/2008',
'06/23/2008',
'12/24/2007',
'12/21/2006',
'12/23/2005',
'12/23/2004',
'12/22/2003',
'12/23/2002'
]
},
{
name: 'Record Date',
data: [
'06/27/2013',
'12/19/2012',
'06/22/2012',
'12/21/2011',
'06/23/2011',
'12/22/2010',
'06/23/2010',
'12/23/2009',
'06/24/2009',
'12/24/2008',
'06/25/2008',
'12/27/2007',
'12/26/2006',
'12/28/2005',
'12/28/2004',
'12/24/2003',
'12/26/2002'
]
},
{
name: 'Payable Date',
data: [
'07/02/2013',
'12/24/2012',
'06/27/2012',
'12/29/2011',
'06/27/2011',
'12/30/2010',
'06/25/2010',
'12/31/2009',
'06/26/2009',
'12/31/2008',
'06/27/2008',
'01/04/2008',
'12/28/2006',
'12/30/2005',
'12/30/2004',
'01/02/2004',
'01/02/2003'
]
}
]
var distroData = [
{
name: 'Income',
data: [
0.3908,
0.4948,
0.2311,
0.3342,
0.245,
0.2213,
0.19,
0.1404,
0.2014,
0.2266,
0.2131,
0.2328,
0.1288,
0.0044,
0.6248,
0,
0
]
},
{
name: 'S.T. Capital Gains',
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 'L.T. Capital Gains',
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 'Return on Capital',
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.0202,
0,
0,
0
]
}
]
The distroData array is used for the series. The distroDates is used for the categories. I want the categories to display in the tooltip (rather than the usual series data) and I want the tooltip to update with the category values as I hover over each bar along the x-axis.
The following code accomplished this using Highcharts v2.1.4/Highstock v1.2.5 (both are loaded):
tooltip: {
formatter: function() {
var s = '<table class="tooltip distro"><tbody>';
var chart = this.points[0].series.chart; //get the chart object
var categories = chart.xAxis[0].categories; //get the categories array
var index = 0;
var distroDataPoint;
while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays
$.each(distroDates, function(i, categories) { //loop through categories array
s += '<tr><td>'+ categories.name +':</td><td>' + categories.data[index] + '</td></tr>'; //use index to peg categories and distro data to series
distroDataPoint = '<tr><td>Distribution:</td><td>$' + distroData[0].data[index] + '</td></tr>';
});
s += distroDataPoint + '</tbody></table>'
return s;
},
shared: true
},
However, when I upgraded to Highstock 1.3.4 (which includes Highcharts) the while statement locked my browser (FF and Chrome). The browser gave the familiar "Script is non-responsive" alert I assume because it was caught in an expensive loop.
Any ideas how I can rewrite or substitute the while so that performance is acceptable?

Answer 1

Why don't you just use shared tooltip? Just set tooltip.shared = true and everything will work fine. See example how to format shared tooltip here.