HighChart: Donut Pie with URL

Question

I have a pie chart in Highcharts. Clicking on a slice of the pie should load the URL associated with that data series. For example, if there is a 25% slice with a url to yahoo.com and a 35% slice to google.com, then clicking on the 35% slice should take the user to google.com.

This is what I added in the series:

// ...
point: {
    events: {
        click: function(e) {
            location.href = e.point.url;
            e.preventDefault();
        }
    }
}
// ...

data = [{
      y: 55.11,
      color: colors[0],
      url: 'www.google.com', 
      drilldown: {
         name: 'MSIE versions',
         categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
         data: [10.85, 7.35, 33.06, 2.81],
         url: 'www.google.com',
         color: colors[0]
      }
}, { .......many more dataset ...

I have one example JS fiddle as above, but it is not working.

In the same example somebody suggested to add url in the series, but that would make all the slices to point to the same URL.

This example is similar but also does not work.

Answer 1

After debugging the broken examples, the problem is that the url is not included in the data passed in to the chart:

// add browser data
browserData.push({
    name: categories[i],
    y: data[i].y,
    color: data[i].color,

    // missing this line!
    url: data[i].url
 });

Once that is done, it is as easy as the docs describe:

point: {
    events: {
        click: function(e) {
            location.href = this.options.url;
        }
    }
}