Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I gave it a shot, but I wasn't able to do it. I started with <a href="http://javascript.cooldev.com/flot-pie/" rel="nofollow noreferrer">this example</a>, then added:</p> <pre><code>grid: { clickable: true }, </code></pre> <p>right above the "pie: {" line. Then I added a plotclick function at the end:</p> <pre><code>$("#placeholder").bind("plotclick", function (event, pos, item) { alert('click!'); for(var i in item){ alert('my '+i+' = '+ item[i]); } }); </code></pre> <p>You'll see the "click!" message, but "item" has no properties.</p> <p>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!</p> <p><strong>Update:</strong> Here's something that might work -- it just turns the labels into links. Put the URLs in your data like this:</p> <pre><code>$.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/"} ], </code></pre> <p>Then set the labelFormatter to something like:</p> <pre><code>return '&lt;a href="'+serie.url+'"&gt;'+serie.label+'&lt;/a&gt;&lt;br/&gt;'+Math.round(serie.percent)+'%'; </code></pre> <p>Clicking in the pie wedges themselves still does nothing special, though.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload