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

Answer 3

Adding to the answer by Derek Kurth...

It looks like flot is ignoring any additional objects that we include in the JSON. For example when I used

data: [10, 0, "http://stackoverflow.com"] 
// 0 is used as an intercept value for y-axis

it worked without any trouble and I was able to access the data from the event handler like

$("#placeholder").bind("plotclick", function (event, pos, item) {
    alert(item.series.data);
});

I am new to this flot library and not great at JavaScript. So probably this is not the right way to do things but it works. I have always felt that embedding additional information in UI elements in HTML is a pain :(