Using the fleet, how can I create a linked pie chart that will lead 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 did it, but I could not do it. I started with this example and then added:

grid: { clickable: true },

right above the line pie: {". Then I added the 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 will see a "click!" message, but "item" has no properties.

, URL- , URL- plotclick. , !

: - - . URL- :

$.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/"}
],

labelMormatter - :

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

- .

Answer 2

, , .

, grid clickable

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

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

      // Your options

      grid:  {
        clickable:true
      }

 });

javascript URL.

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

Answer 3

-...

, , JSON. ,

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

it worked without any problems, and I was able to access the data from the event handler, for example

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

I am new to this fleet library and don't really like JavaScript. So this is probably the wrong way to do something, but it works. I always felt that embedding additional information in user interface elements in HTML is a pain :(