Highcharts: Stacked bar chart display categories data, not series -
i have 2 js associative arrays 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 used series. distrodates used categories. want categories display in tooltip (rather usual series data) , want tooltip update category values hover on each bar along x-axis.
the following code accomplished using highcharts v2.1.4/highstock v1.2.5 (both loaded):
tooltip: { formatter: function() { var s = '<table class="tooltip distro"><tbody>'; var chart = this.points[0].series.chart; //get chart object var categories = chart.xaxis[0].categories; //get categories array var index = 0; var distrodatapoint; while(this.x !== categories[index]){index++;} //compute 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 peg categories , distro data series distrodatapoint = '<tr><td>distribution:</td><td>$' + distrodata[0].data[index] + '</td></tr>'; }); s += distrodatapoint + '</tbody></table>' return s; }, shared: true },
however, when upgraded highstock 1.3.4 (which includes highcharts) while statement locked browser (ff , chrome). browser gave familiar "script non-responsive" alert assume because caught in expensive loop.
any ideas how can rewrite or substitute while performance acceptable?
why don't use shared tooltip? set tooltip.shared = true
, work fine. see example how format shared tooltip here.
Comments
Post a Comment