I plan to put the data in y-axis in a mouseover event of my x-axis labels, so that when a user hovers on an x-axis label, it will display a summary text of the values in my stack chart.
Question is how do I access y-axis data inside my x-axis:{...} code
here's my code http://jsfiddle.net/BkxhA/3/
$(function () {
var categoryImgs = {
'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> '
};
var totals = new Array();
var stackTotals = new Array();
var i = 5, j = 0;
//totals = HighchartsAdapter
function reverse() {
totals.reverse();
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Premium Summary'
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
xAxis: {
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function () {
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>This should be the series y-axis data (this.series.data...something)<p>');
},
mouseout: function () {
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Policy Fee',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120]
}, {
name: 'WOP',
data: [150, 210.23, 150, 200, 100]
}, {
name: 'Income Protection',
data: [89, 400, 258.13, 212, 152]
}, {
name: 'Life Cover',
data: [150, 210.23, 150, 200, 100]
} ]
});
});
Looks like plugin has limitations - in event callback this is pointed to DOM element, instead of something in Highcharts.
To achieve what you need, you can add some custom attribute for created HTML tag in formatter, with info you need. For example passing index:
formatter: function () {
var axis = this.axis,
index = axis.categories.indexOf(this.value);
var n = totals.shift();
return '<div class="stacktotal" data-index="' + index + '">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
Then you can get that value in events:
mouseover: function () {
var chart = $("#container").highcharts(),
index = $(this).find('.stacktotal').attr("data-index");
console.log('Index', index); //index is index of category
var point = chart.series[0].data[index];
console.log('Point', point); // point for specific category in first series
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>' + point.total + '<p>');
},
Demo with all: http://jsfiddle.net/BkxhA/4/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments