Show percentage in jqplot piechart tooltip

Question

I'm using primefaces with jqplot library.

In my piechart i have the extender property and in the javascript function i have this:

this.cfg.highlighter = {
     show:true,
     tooltipLocation: 'n',
     tooltipAxes: 'y',
     useAxesFormatters: false,
     tooltipFormatString: '%s'
}

The tooltip shows section value, but not section percentage.

Anybody knows how to show percentage value in tooltip?

Thanks.

Answer 1

You can bind the highlight event in order to modify the tooltip :

$("#chart1").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
 var highlightToolTip = $(".jqplot-highlighter-tooltip");   
 var pct = Math.round(data[1]/total*100);
 highlightToolTip.html(data[0]+", "+pct+"%");  
});

Where :

• data1 is the value of the highlighted slice,
• data[0] is the label of the highlighted slice,

• total is a variable containing the total value of your plot built here :

   data = [
      ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
      ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  
  var total = 0;
  $(data).map(function(){total += this[1];})
  

Please see a working example on fiddle here