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'}
	]
}]

5 thoughts on “Highcharts pie charts can have url links

  1. Anonymous says:

    Can you help me open the url in a frame, not the iframe?
    My code does not work.
    top.[‘Aframe’].location.href = e.point.options.url;

    Like

  2. Rogerio Costa says:

    Hello, very good your solution, but I need some help yet.
    How would I do for this data list is dynamic and receive a variable amount of data?
    I get random data from the database to plot.
    Sometimes 3 data
    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’}
    ]
    Sometimes 5 data
    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: ‘Fail’, color: ‘#FF2929’, y: 2, url: ‘http://my_site2.com’},
    {name: ‘Fail’, color: ‘#FF2929’, y: 2, url: ‘http://my_site2.com’},
    {name: ‘Pass’, color: ‘#31FF4F’, y: 32, url: ‘http://my_site3.com’}
    ]

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s