CODEWITHSUNDEEP
javascriptjqueryflotpie-chart
user1371896
user1371896

Reputation: 2230

hiding individual slices of a flot pie chart based on corresponding names

I ve drawn a pie chart graph using pie chart flot library.. I ve my own custom legend box. So I was trying to know if it is possible to hide the a particular slice based on user input. Like here Ive added a similar example for jsfiddle.

Here at the bottom of chart Ive made a legend box and added hover function using jquery. so what I am trying to when I hover over those legends.. the corresponding slices should get hidden.

http://jsfiddle.net/mHJm5/18/

var data = [
   {
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/"}
  ];

var options = {
   series: { pie: { show: true, label: false, } },
   grid: { clickable: true},
   legend: {
            show: false
        }

 };

  var testHTML = '';
  for(var k=0; k<data.length; k++){
    testHTML += "<span class = 'hoverableSpace' id='"+ data[k].label+"'>"+  data[k].label +"</span>";
  }

$(".mapper").html(testHTML);

var plot = $.plot($("#graphLoaderDiv"), data, options);


$(".hoverableSpace").on("mouseover", function(){
   alert($(this).attr('id'));
});

Upvotes: 2

Views: 526

Answers (1)

DNS
DNS

Reputation: 38189

Listen for clicks on the legend elements. When you get one, match it to the corresponding series (there are many ways to do this) and set the series color to 'transparent' or 'rgba(0, 0, 0, 0)', then redraw.

Upvotes: 0

Related Questions