Problem rendering small percentage in PieChartModel on Primefaces;

Question

Problem rendering small percentage in PieChartModel on Primefaces;

Navigation

#1 by (1 votes)

2

I am generating a graph usually without problems, only occurs with smaller percentages, showing the 'slice' correctly, but the value of that percentage is not displayed. I tried to make the change of the diameter of the piechart, as I saw that it is possible in xhtml (in the showcase it is done in Java, however the parameter property does not appear to be set for me). Has anyone gone through this, or could you help me? Note: I use Primefaces 3.5.

Here is the code I use and the graphic image:

Java:

this.graficoAteste = new PieChartModel();
...
graficoAteste.set("Sim", 33);
graficoAteste.set("Não", 2);
graficoAteste.set("Parcial", 1);
graficoAteste.set("Não Atestado", 0);

xhtml:

<p:pieChart id="graficoAteste" widgetVar="grafico_pizza"
value="#{graficoAtestePeriodoBean.graficoAteste}"
legendPosition="e" fill="true" showDataLabels="true"
title="#{msg.grafico_ateste_por_periodo}"
style="width:450px;height:350px" sliceMargin="6" diameter="200"
rendered="#{graficoAtestePeriodoBean.graficoAteste != null}" />

java primefaces-3.5

asked by anonymous 31.03.2015 / 14:18

1 answer

Format tabs of an HTML menu Error Signing XML, Invalid URI VB.NET

score 1 · Accepted Answer

Oops, I found the solution for my case. The issue is that PieChart of Primefaces uses a JQuery library called JQPlot which, by default, does not render percentages below 3%. Seeing this, I had to overwrite some parameters via Javascript and use the extender parameter in my Piechart to get this Javascript . Staying like this:

Piechart:

<p:pieChart id="graficoAteste" widgetVar="grafico_pizza"
                    value="#{graficoAtestePeriodoBean.graficoAteste}"
                    legendPosition="e" fill="true" showDataLabels="true"
                    title="#{msg.grafico_ateste_por_periodo}"
                    style="width:450px;height:350px" sliceMargin="6" diameter="200"
                    rendered="#{graficoAtestePeriodoBean.graficoAteste != null}" extender="ext" />

Javascript:

<script type="text/javascript">
    function ext() {
        this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 1;
        this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.6;
    }
</script>

Where dataLabelThreshold is the minimum percentage to be rendered and dataLabelPositionFactor is the distance from the center of the graph that the number should be (0 to 1).