Primefaces jqplot bar chart custom tool tip - percent value

0
votes

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

2
primefacestooltipbar-chartjqplot
Start by searching for 'how do I get all values of a series in jqplot'. And if you look very, very closely to what you currently do, you already have all that available. - Kukeltje

2 Answers

0
votes

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;
0
votes

You can also customize it on the Java class, by doing:

If you have a horizontal bar chart:

horizontalBarChartModel.setDatatipFormat("%1$.2f %");

If you have a vertical bar chart:

verticalBarChartModel.setDatatipFormat("%2$.2f %");

The difference between the two values of the format label (1 and 2) is that, by default, PrimeFaces generates a default tooltip with two labels, one for the bar index on the chart (ex: first bar, second bar) and other for the actual value setted for that bar (values setted on your Managed Bean for rendering that chart). When you are using vertical bar chart model, the first label of the tooltip becomes the index value, and when you are using horizontal bar chart model, the first label becomes the actual value for that bar on the chart.

If you also need to display bar charts with all the bars in 100%, remember that you have to calculate your percentages in your controller layer (a lot easier at least).