Problem when rendering small percentage in Piechartmodel in Primefaces;

Asked

Viewed 339 times

2

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

Below 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}" />

imagem

1 answer

1


Oops, I found the solution to my case. The point is that the PieChart of Primefaces uses a library JQuery calling for JQPlot which by default does not render percentages below 3%. Seeing that, I had to override some parameters via Javascript and use the parameter extender in my Piechart receiving this Javascript. Thus remaining:

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).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.