Links in pie charts for Highcharts.js

Question

I would like the user to be directed to a specific part of the page when they click on a section of the pie chart. I'm getting an error that reads {"error": "Please use POST request"} on click.

http://jsfiddle.net/alliwagner/Saa4E/10/

Right now the blue section should jump down to "Commodities" on click.

Any help at all would be greatly appreciated.

Answer 1

Here is an update to your jsfiddle.

The changes I had to make were:

• The "click" handler has this bound to a data point as a structure maintained by that library. In order to get the URL, you have to look at the "config" property of the data point and then grab element 2 of that array.
• I had to stash the this in the event handler so that the timeout handler could get it.
• I added a "preventDefault()" call to the event handler, but that might not be necessary.

Answer 2

The solution posted here no longer works as of version 3 of Highcharts

This works better

series: [{
    type: 'pie',
    name: 'overall',
    point: {
        events: {
            click: function(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'}
    ]
}]