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.


Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more