Highcharts pie charts can have url links

For some reasons the default highcharts pie chart has no url links. Or at least that feature is not being demo’ed. See their example here: http://www.highcharts.com/demo/pie-basic.

After tweaking the code for a while, here is the code that enables URL links in a pie chart.

var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'my_chart_id',
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: 'my_title'
		},
		tooltip: {
			formatter: function() {
				var y = this.y;
				var p = Math.round(this.percentage*100)/100;
				return ''+ this.point.name +': ' + y + ' (' + p + '%)';
			}
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: false
				},
				showInLegend: true
			}
		},
		series: [{
			type: 'pie',
			name: 'overall',
			point: {
				events: {
					click: function(e) {
						//this.slice();
						//console.log(e);
						location.href = e.point.url;
						e.preventDefault();
					}
				}
			},
			data: [
				{name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'},
				{name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'},
				{name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'}
			]
		}]
	});
});

The part that enables the clicking is the new url key in data, and the event handling.

series: [{
	type: 'pie',
	name: 'overall',
	point: {
		events: {
			click: function(e) {
				//this.slice();
				//console.log(e);
				location.href = e.point.url;
				e.preventDefault();
			}
		}
	},
	data: [
		{name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'},
		{name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'},
		{name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'}
	]
}]