PrimeFaces pie chart is not displayed in JSF 2.0
java, jsf-2, primefaces
Solution
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
Problem
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.