PrimeFaces pie chart is not displayed in JSF 2.0

Question

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.

your code seems right, that why I would try adding , private static final long serialVersionUID = 1L; and also would check if removing (name = "pieChartBean") will do any good — Daniel, May 05 '12 at 11:33
And do you get any kind of exception, or it is just not displayed ? — Fallup, May 05 '12 at 19:35
It is just not displayed, I have added global messages but any kind of any message is not shown. — Paulius Matulionis, May 05 '12 at 20:09
nothing in the firebug too? also take a look at this thread... http://forum.primefaces.org/viewtopic.php?f=3&t=18336 — Daniel, May 05 '12 at 20:19
I have edited my question, I have copied generated HTML source. — Paulius Matulionis, May 05 '12 at 20:29
take a look at this http://forum.primefaces.org/viewtopic.php?f=3&t=18336#p56852 any good? — Daniel, May 05 '12 at 20:32
Recent versions of Primefaces use the HTML5 canvas object for displaying charts. Maybe your browser is not capable of HTML5? Or do you use an older PF version where flash was used to create charts? — Matt Handy, May 05 '12 at 20:41
@Matt Handy I am using Firefox 12, Chrome 18.0, IE 9 all three browsers does not displays charts so all three is not capable of HTML5? — Paulius Matulionis, May 05 '12 at 20:49
try placing and tag in your page , if no good then at this point I'd recommend to start tearing apart stuff from your project , — Daniel, May 05 '12 at 20:56
try placing and tag in your page AND EVEN TRY wrapping the pie with h:form, if no good then at this point I'd recommend to start tearing apart stuff from your project , — Daniel, May 05 '12 at 21:11
I have tried to wrap chart with h:form, change body to h:body, tried to remove f:view, I also tried to leave only HTML root tag and p:pieChart. No success.. — Paulius Matulionis, May 05 '12 at 21:26
I have found the problem. Somehow the primefaces does not have a "fiendship" with jquery. I do not know why but if I remove jquery from my app charts are displayed successfully. But there is other solution to this: in that page were is primefaces charts I have added a script line: "$.noConflict();". And every works fine. But I do not understand why, so if someone could help me with understanding this issue it would very great :) — Paulius Matulionis, May 06 '12 at 15:03
It is because primefaces has native support for jQuery. So if you import your own jQuery.js file it will get in conflict. There is no need to import jQuery, you can use the one shipped with primefaces. — Fallup, May 06 '12 at 19:17

score 3 · Accepted Answer · edited May 23 '17 at 12:31

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

score 1 · Answer 2 · edited Apr 06 '13 at 10:32

1

I have the same problème and I try to solve it by adding this line in the .xhtlm

<h:head>
    <title>Graphe Prime Faces </title>
</h:head>

and when I see you code you have same erroor like me , just add in you're page .xhml this

code the shart pie will be displayed i you're browser

edited Apr 06 '13 at 10:32

Andrew Barber

39,603
20
94
123

answered Apr 05 '13 at 11:42

user2248863

11
1

score 0 · Answer 3 · answered Mar 26 '14 at 16:12

Try to put the tags "p:pieChart" into a panel tag p:panel

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

Thas work for me.

PrimeFaces pie chart is not displayed in JSF 2.0

3 Answers3