Highcharts Combo graphs with common legend click - highcharts

Question

I have a combo graphs, with Pie and Bar Graph, now my problem is that I want pie chart and bar graph both controlled from the same legend, as status are the same... source example created a JS fiddle any help would be much appreciated.
http://jsfiddle.net/TV8f4/
$(document).ready(function () {
var Loveralldata = [0,1,1,0,0,5];
var LDNOKdata = [['1032',11],['1040',0]];
var LDOKONOKdata = [['1032',1],['1040',0]];
var LDOKOOKdata = [['1032',1],['1040',0]];
var LTBDdata = [['1032',1],['1040',0]];
var LNAdata = [['1032',1],['1040',0]];
var LNUAdata = [['1032',4],['1040',8]];
var LCatData = ['Delhi HO','Regional Offices'];
$('#location').highcharts({
chart: {
//events: {
// click: function (event) {
// alert('hide');
// }
//}
},
credits: {
enabled: false
},
title: {
text: 'Location chart'
},
xAxis: {
categories: LCatData
},
yAxis: {
maxPadding: 1.5
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert(this.options.name);
}
}
}
}
},
tooltip: {
formatter: function () {
var s;
if (this.point.name) { // the pie chart
s = '' +
this.series.name + ': ' + this.y ;
} else {
s = '' +
this.category + ' ' + this.x + ': ' + this.y;
}
return s;
}
},
colors: ['#367A01', '#00D700', '#FFD700', '#D9D9D9', '#F4FA58', '#757873'],
labels: {
items: [{
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Adequate and Effective',
data: LDOKOOKdata
}
, {
type: 'column',
name: 'New Remediation Plans',
data: LDOKONOKdata
}, {
type: 'column',
name: 'New Controls',
data: LDNOKdata
},
{
type: 'column',
name: 'Not Updated/Approved ',
data: LNUAdata
},
{
type: 'column',
name: 'NA',
data: LNAdata
}
, {
type: 'column',
name: 'To Be Deleted',
data: LTBDdata
}
, {
type: 'pie',
name: 'Overall Status',
data: [['Adequate and Effective', Loveralldata[2]], ['New Remediation Plans', Loveralldata[1]], ['New Controls', Loveralldata[0]], ['Not Updated/Approved', Loveralldata[5]], ['NA', Loveralldata[3]], ['To Be Deleted', Loveralldata[4]]],
center: [100, 50],
size: 150,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});

Answer 1

You can use legendItemClick event and then hide element with series index in pie chart like here http://jsfiddle.net/TV8f4/3/
legendItemClick:function(){
var index = this.index,
chart = this.chart,
series = chart.series,
len = series.length,
pieSerie = series[len-1];
pieSerie.data[index].setVisible();
}