Geek asks and answers

PrimeFaces Pie Chart Does Not Display in JSF 2.0

I want to display a 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 ViewScope, I also tried the session and request areas. The problem is that the chart does not appear on the page. Any ideas what the problem is?

Editorial: The strange thing is that I tried to add some other component to the same xhmtl page, I added <p:spinner/>, and it works. This is shown on my JSF page, but the diagram is missing.

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 at the generated HTML source with firebug, the code shown above is generated, but nothing is displayed in the browser.

+3
source share
3 answers

, , , :

, jQuery.js.

  • jQuery, , . $ jQuery.
  • (, 2.2.1), : jQuery
+3

, , .xhtlm

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

, , erroor, , .xhml this

, ,

+1

"p: pieChart" p: panel

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

.

0

More articles:


All Articles