Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Links in pie charts for Highcharts.js

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.

like image 494
Allison Avatar asked Jul 13 '11 17:07

Allison


People also ask

Is it possible to pass multiple series in a chart in Highcharts?

Yes, you can.

Is Highcharts a JavaScript library?

Highcharts® JS Highcharts, the core library of our product suite, is a pure JavaScript charting library based on SVG that makes it easy for developers to create responsive, interactive and accessible charts.

What is legend in Highcharts?

The legend displays the series in a chart with a predefined symbol and the name of the series. Series can be disabled and enabled from the legend.


Video Answer


2 Answers

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.
like image 164
Pointy Avatar answered Oct 10 '22 18:10

Pointy


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'}
    ]
}]
like image 5
user2218399 Avatar answered Oct 10 '22 18:10

user2218399