Home/ Questions/Q 7916195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T14:43:05+00:00

I want to display primefaces pie chart in my JSF application. Here is my

  • 0

I want to display primefaces pie chart in my JSF application.

Here is my xhtml page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
    <ui:include src="blocks/head.xhtml"/>

    <body>
    <ui:include src="blocks/header.xhtml"/>

        <p:pieChart id="sample"
                    value="#{pieChartBean.pieModel}"
                    legendPosition="w"
                    title="Sample Pie Chart"
                    style="width:400px;height:300px"/>

    <ui:include src="blocks/footer.xhtml"/>
    </body>
</f:view>
</HTML>

And here is my bean:

@ManagedBean(name = "pieChartBean")
@ViewScoped
public class PieChartBean implements Serializable {

   private PieChartModel pieModel;

    public PieChartBean() {
        createPieModel();
    }

    public PieChartModel getPieModel() {
        return pieModel;
    }

    private void createPieModel() {
        pieModel = new PieChartModel();

        pieModel.set("Brand 1", 540);
        pieModel.set("Brand 2", 325);
        pieModel.set("Brand 3", 702);
        pieModel.set("Brand 4", 421);
    }

}

I put the bean in the ViewScope, I also tried Session and Request scopes. Problem is that the chart is not displayed in the page. Any ideas where is the problem?

EDITED:
Strange is this that I tried to add some other component in the same xhmtl page, I added <p:spinner/> and it works. It is showed in my JSF page but chart is not.

EDITED 2:

Firebug:

<div id="sample" style="width:400px;height:300px"></div>
<script id="sample_s" type="text/javascript">
$(function(){PrimeFaces.cw('PieChart','widget_sample',{id:'sample',data:[[["Brand 1",540],["Brand 2",325],["Brand 3",702],["Brand 4",421]]],title:'Sample Pie Chart',legend:{show:true,renderer: $.jqplot.EnhancedLegendRenderer,location:'w'},axes:{xaxis:{},yaxis:{}}},'charts');});
</script>

If I look through the generated HTML source with firebug the code shown above is generated but in browser nothing is displayed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ve already told in comments that you’ve solved the problem, just to summarize it in answer so this can get closed :

    The problem was that you’ve imported external jQuery.js file.

    • Don’t import your own library of jQuery, it will get in conflict with the one bundled with primefaces. Use jQuery instead of $ then.
    • If you are using older version of primefaces (like 2.2.1) look at this answer : jQuery conflict with primefaces
    • 0