Search code examples
primefacestooltipbar-chartjqplot

Primefaces jqplot bar chart custom tool tip - percent value

What's the best way to customize the tooltip on a primefaces jqplot bar chart to show the percentage value, not the actual value. I.e. if there were 3 bars, with values 10, 20, 20 I want the tool tip to show 20% 40% 40%.

I am using a js extender, and I'm getting the value (not percentage out) using:

enter   this.cfg.highlighter = {
tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {
  return plot.data[seriesIndex][pointIndex];
},
show: true

};

Is it possible iterate the points, calculate the total, then work out the percent (and format this string)?

I've also though that I could calculate in the Java layer - and add as an invisible series, and get it via the series index?

Thanks in advance

Solution

  • Just iterate over plot.data[seriesIndex], count, devide, multiply

    var series = plot.data[seriesIndex];
var total = 0;
series.forEach(function(entry) {
    total = total + entry;
});
var percent = Math.round((plot.data[seriesIndex][pointIndex] / total)*100)+"%";
return percent;