Geek Answers Handbook

Highcharts graphic diagrams with a common click

I have combined charts with Pie and Bar Graph, now my problem is that I want the pie chart and the histogram to be controlled from the same legend, since the status is the same ... the example source created a script JS any help would be greatly 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 } }] }); });
0
highcharts
source share
1 answer

You can use the legendItemClick event and then hide the element with the series index in the pie chart, as 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(); }
+2
source share

More articles:


All Articles