Unable to show data in pie chart over mouseOn

Question

I was going through the pie charts example on the http://www.flotcharts.org/flot/examples/series-pie/index.html where I was looking at the Interactivity pie chart but on mouse over on a slice I was not able to see the percent depiction of the slice which should have come as in the case of click event where an alert pop up comes.

So could you suggest the method to fix this problem so that I can show the percentage on MouseOver. Thanks in Advance :-)

< script >
  var dataSet = [{
    label: "Approved/In Planning",
    data: $ {
      pstats.taskCountByStatusMap.WeApproved!'0' + pstats.taskCountByStatusMap.WeInPlanning!'0'
    },
    color: "#777"
  }, {
    label: "In Progress",
    data: $ {
      pstats.taskCountByStatusMap.WeInProgress!'0'
    },
    color: "#5cb85c"
  }, {
    label: "On Hold",
    data: $ {
      pstats.taskCountByStatusMap.WeOnHold!'0'
    },
    color: "#f0ad4e"
  }, {
    label: "Cancelled",
    data: $ {
      pstats.taskCountByStatusMap.WeCancelled!'0'
    },
    color: "#d9534f"
  }, {
    label: "Complete",
    data: $ {
      pstats.taskCountByStatusMap.WeComplete!'0'
    },
    color: "#5bc0de"
  }, {
    label: "Closed",
    data: $ {
      pstats.taskCountByStatusMap.WeClosed!'0'
    },
    color: "#428bca"
  }];
jQuery(flotplaceholder).unbind();

function labelFormatter(label, series) {
  return "<div style='font-size:8pt; text-align:center; padding-left:-12px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
var options = {
  series: {
    pie: {
      show: 'auto',
      radius: 1,
      label: {
        show: false,
      }
    }
  },
  legend: {
    show: false,
  },
  grid: {
    hoverable: true,
    clickable: true
  },
};
$(document).ready(function() {
  $.plot("#flotplaceholder", dataSet, options);
});
$('#flotplaceholder').bind("plothover", function(event, pos, obj) {
  alert(obj);
  var percent = parseFloat(obj.series.percent).toFixed(2);
  $("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
});

Your JavaScript looks right after a quick read-through. You may need to double check and make sure your html is correct (id's match the jQuery selectors, etc...) — Wet Noodles
Also, flotplaceholder about halfway through is not defined. (see: jQuery(flotplaceholder).unbind();) Unless it's defined in some other script tag not included. — Wet Noodles

Mark Mark · Accepted Answer · 2014-12-08T17:05:40

Your plothover event is incomplete.

$(flotplaceholder).bind("plothover", function(event, pos, obj) {
  if(obj){ // am I hover on anything?
    var percent = parseFloat(obj.series.percent).toFixed(2);
    $("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>"); // set the contents
    $('#hover').css({'position':'absolute','display':'block','left':pos.pageX,'top':pos.pageY}); // set the css to show and position it
  }
  else {
    $('#hover').css('display','none'); // I am not hovering on anything, hide the tooltip
  }
});

Working example.

Unable to show data in pie chart over mouseOn

1 Answers