JavaScript
window.donut = [];
var colors = ['#20cbca', '#0097dc', '#738087', '#c1c1c1', '#ff325b', '#af026c', '#ffbc00', '#ffff00', '#5b9e1b', '#83d344'],
brandsData = [
{name: 'Brand 1', y: 100, color: colors[0]},
{name: 'Brand 2', y: 90, color: colors[1]},
{name: 'Brand 3', y: 80, color: colors[2]},
{name: 'Brand 4', y: 70, color: colors[3]},
{name: 'Brand 5', y: 60, color: colors[4]},
{name: 'Brand 6', y: 50, color: colors[5]},
{name: 'Brand 7', y: 40, color: colors[6]},
{name: 'Brand 8', y: 30, color: colors[7]},
{name: 'Brand 9', y: 20, color: colors[8]},
{name: 'Brand 10', y: 10, color: colors[9]}
];
marketData = [
{name: 'Brand 1', y: 100, color: colors[0]},
{name: 'Brand 2', y: 90, color: colors[1]},
{name: 'Brand 3', y: 80, color: colors[2]},
{name: 'Brand 4', y: 70, color: colors[3]},
{name: 'Brand 5', y: 60, color: colors[4]},
{name: 'Brand 6', y: 50, color: colors[5]},
{name: 'Brand 7', y: 40, color: colors[6]},
{name: 'Brand 8', y: 30, color: colors[7]},
{name: 'Brand 9', y: 20, color: colors[8]},
{name: 'Brand 10', y: 10, color: colors[9]}
];
function hideAll(e) {
var x = this.x,
visible = this.visible = !this.visible;
$.each(donut, function(i, pie){
pie.series[0].data[x].graphic[visible ? 'show' : 'hide']();
});
return false;
}
donut[0] = new Highcharts.Chart(
{
chart: {
renderTo: 'donut1_1',
type: 'pie'
},
title: {text: null},
legend: {
enabled: true,
verticalAlign: 'top'
},
plotOptions: {
pie: {
showInLegend: true,
point: {
events: {
legendItemClick: hideAll
}
}
}
},
series: [{data: brandsData}]
}
);
donut[1] = new Highcharts.Chart(
{
chart: {
renderTo:...