jsf - p:chart is not visible -

i want display 2 charts in primefaces.

i using bootstrap 1.0.10, primefaces 5.3 , tomcat 7.

the strange thing is, chart rendered, user isn't able 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 in chrome , firefox. area chart(s) should white.

ok, found problem. accidentally included jquery 2 times.
1 time in jsf-template (with bootstrap), second time primefaces.

removed jsf-template , works.