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.

I don`t think thats a rule. I thought JFiddle contains code and that should satisfy the requirement?? — java_dude
No, no it is not... those links die. And then this question becomes useless. Please post some code. — Naftali

NT3RP NT3RP · Accepted Answer · 2013-07-27T00:38:55

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;
        }
    }
}

HighChart: Donut Pie with URL

1 Answers