p:chart is not visible - jsf

Question

I want to display two charts in PrimeFaces.
I am using Bootstrap 1.0.10, PrimeFaces 5.3 and Tomcat 7.
The strange thing is, that the chart is rendered, but the user isn't able to see it.
stats.xhtml
<ui:define name="content">
<div>
<p:panel id="panel" header="Statistik"
style="margin: 20px;">
<p:chart type="pie" model="#{statistikBean.chartModel1}"
style="width:400px; height:300px" />
<p:chart type="metergauge"
model="#{statistikBean.chartModel2}"
style="width:400px; height:250px" />
</p:panel>
</div>
</ui:define>
StatistikBean.java
....
private PieChartModel chartModel1;
private MeterGaugeChartModel chartModel2;
#PostConstruct
public void init() {
doModels();
}
private void doModels() {
this.chartModel1 = new PieChartModel();
// chartModel1
this.chartModel1.set("Fach 1", 10);
this.chartModel1.set("Fach 2", 20);
this.chartModel1.set("Fach 3", 30);
this.chartModel1.set("Fach 4", 40);
this.chartModel1.setTitle("Verteilung der Facher");
this.chartModel1.setLegendPosition("w");
// chartModel2
List<Number> intervall = new ArrayList<Number>(){{
add(50);
add(75);
add(85);
add(95);
}};
this.chartModel2 = new MeterGaugeChartModel(75, intervall);
this.chartModel2.setTitle("Fortschritt");
this.chartModel2.setSeriesColors("cc6666,E7E658,93b75f,66cc66");
this.chartModel2.setGaugeLabel("%");
}
.....
Rendered Output :
<div>
<div id="panel"
class="ui-panel ui-widget ui-widget-content ui-corner-all"
style="margin: 20px;"
data-widget="widget_panel">
<div id="panel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Statistik</span>
</div>
<div id="panel_content" class="ui-panel-content ui-widget-content">
<div id="j_idt17" style="width:400px; height:300px"></div>
<script id="j_idt17_s" type="text/javascript">
$(function () {
PrimeFaces.cw('Chart', 'widget_j_idt17', {
id: 'j_idt17',
type: 'pie',
data: [[["Fach 1", 10], ["Fach 2", 20], ["Fach 3", 30], ["Fach 4", 40]]],
title: "Verteilung der Facher",
legendPosition: "w",
datatip: true,
datatipFormat: "%s - %d"}, 'charts');
});
</script>
<div id="j_idt18" style="width:400px; height:250px"></div>
<script id="j_idt18_s" type="text/javascript">
$(function () {
PrimeFaces.cw('Chart', 'widget_j_idt18', {
id: 'j_idt18',
type: 'metergauge',
data: [[75]],
title: "Fortschritt",
seriesColors: ["#cc6666", "#E7E658", "#93b75f", "#66cc66"],
intervals: [50, 75, 85, 95],
gaugeLabel: "%",
gaugeLabelPosition: "inside",
showTickLabels: true,
labelHeightAdjust: -25}, 'charts');
});
</script>
</div>
</div>
<script id="panel_s" type="text/javascript">
PrimeFaces.cw("Panel", "widget_panel", {id: "panel"});
</script>
</div>
Tested it in Chrome and FireFox. The area where the chart(s) should be is just white.

Answer 1

Ok, I found the problem. I accidentally included jQuery two times.
One time in the JSF-template (with bootstrap), the second time with Primefaces.
I removed it from the JSF-template and it now works.