With flot, how can I create a linked pie chart that takes you to other web pages?

Question

In flot, how can I create a pie chart where each wedge is a link to a different web-page?

Answer 1

I gave it a shot, but I wasn't able to do it. I started with this example, then added:

grid: { clickable: true },

right above the "pie: {" line. Then I added a plotclick function at the end:

$("#placeholder").bind("plotclick", function (event, pos, item) {
    alert('click!');
    for(var i in item){
        alert('my '+i+' = '+ item[i]);
    }
});

You'll see the "click!" message, but "item" has no properties.

I was thinking you'd just add URLs to the data ojects, then forward the browser to the appropriate URL from within the plotclick function. If you figure it out, I'd be interested to know!

Update: Here's something that might work -- it just turns the labels into links. Put the URLs in your data like this:

$.plot($("#placeholder"), [
    { label: "Serie1",  data: 10, url: "http://stackoverflow.com"},
    { label: "Serie2",  data: 30, url: "http://serverfault.com"},
    { label: "Serie3",  data: 90, url: "http://superuser.com"},
    { label: "Serie4",  data: 70, url: "http://www.google.com"},
    { label: "Serie5",  data: 80, url: "http://www.oprah.com"},
    { label: "Serie6",  data: 110, url: "http://www.realultimatepower.net/"}
],

Then set the labelFormatter to something like:

return '<a href="'+serie.url+'">'+serie.label+'</a><br/>'+Math.round(serie.percent)+'%';

Clicking in the pie wedges themselves still does nothing special, though.

Answer 2

I know this is an old thread but I have discovered another way of doing this.

Make sure grid is set to clickable

var data = [{
  "label" : "series1",
  "data"  : 24,
  "url"   : "http://stackoverflow.com"
},
{
 // etc etc
}];

$.plot($('.chart'), data, function() {

      // Your options

      grid:  {
        clickable:true
      }

 });

Bind a click function to the element and use javascript to redirect to the url.

$('.chart').bind("plotclick", function(event,pos,obj) {
  window.location.replace(data[obj.seriesIndex].url);
});