Chart won't be rendered

UI Components for JSF
Post Reply
JasDA
Posts: 15
Joined: 10 Jul 2012, 10:40

28 Aug 2014, 14:28

I've got this xhtml-File:

Code: Select all

<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
     
    <h:head>

    </h:head>
     
    <h:body>    
        <pm:page id="mainMenu">
            <pm:content>            
            	<h:form id="mainForm">            	
					<p:menu>
					    <p:submenu label="Test">
					        <p:menuitem value="Show chart" action="#{replenishmentBean.showChartTest}" />
					    </p:submenu>				    
					</p:menu> 
            	</h:form>            
            </pm:content> 
        </pm:page>
        
        
        <pm:page id="chart">
            <pm:content>            
			<p:barChart rendered="#{replenishmentBean.salesChartModel != null}" id="basic" value="#{replenishmentBean.salesChartModel}" legendPosition="ne" title="Sales Chart" animate="true" style="height:75vh"/>
            </pm:content>
        </pm:page>             
    </h:body>
     
</html>
As you can see there is a menu on page 1 and a chart on page 2. The backing bean looks like this:

Code: Select all

...
...
	public String showChartTest()
	{
    	salesChartModel = new BarChartModel	();
    	ChartSeries chartLine = new ChartSeries();  
    	chartLine.setLabel("Sales");
    	chartLine.set("28.08.", 13);
    	chartLine.set("27.08.", 7);
    	chartLine.set("26.08.", 5);
    	chartLine.set("25.08.", 25);
    	chartLine.set("24.08.", 28);
    	chartLine.set("23.08.", 13);
    	salesChartModel.addSeries(chartLine);     
    	
		return "pm:chart";
	}
...
...
If I click on the menu item, the showChartTest-Method gets called. But the chart won't be rendered. If I remove the first page the chart gets rendered corretly:

Code: Select all

<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
     
    <h:head>

    </h:head>
     
    <h:body>    
        <pm:page id="chart">
            <pm:content>            
			<p:barChart rendered="#{replenishmentBean.salesChartModel != null}" id="basic" value="#{replenishmentBean.salesChartModel}" legendPosition="ne" title="Sales Chart" animate="true" style="height:75vh"/>
            </pm:content>
        </pm:page>             
    </h:body>
     
</html>
Any suggestions? Seems that there is a problem JSF --> Action call --> Render chart.
Top
kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

28 Aug 2014, 14:47

JasDA wrote:Any suggestions? Seems that there is a problem JSF --> Action call --> Render chart.
Hidden container issue. Try giving the chart an explicit width or do an 'init' again : PF('chartWidget').init() on the showPage event

And do some debugging winth e.g. a mobile emulator or FireFox remote debugging... https://developer.mozilla.org/en-US/doc ... _Debugging
Top
JasDA
Posts: 15
Joined: 10 Jul 2012, 10:40

28 Aug 2014, 14:54

Setting a width doesn't make any difference. But how could a remote debugger help? Perhaps this helps? It's the rendered output:

Including page 1:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width, initial-scale=1"><link type="text/css" rel="stylesheet" href="/de.test/javax.faces.resource/mobile/jquery-mobile.css.jsf?ln=primefaces&v=5.0" /><link type="text/css" rel="stylesheet" href="/de.test/javax.faces.resource/mobile/primefaces-mobile.css.jsf?ln=primefaces&v=5.0" /><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.0"></script><script type="text/javascript">$(document).on('mobileinit', function(){$.mobile.ajaxEnabled = false;$.mobile.pushStateEnabled = false;$.mobile.page.prototype.options.domCache = true;});</script><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/mobile/jquery-mobile.js.jsf?ln=primefaces&v=5.0"></script><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/primefaces-mobile.js.jsf?ln=primefaces&v=5.0"></script><link type="text/css" rel="stylesheet" href="/de.test.testMobile/javax.faces.resource/charts/charts.css.jsf?ln=primefaces&v=5.0" /><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/charts/charts.js.jsf?ln=primefaces&v=5.0"></script></head><body><div id="mainMenu" data-role="page"><div role="main" class="ui-content">
<form id="mainMenu:mainForm" name="mainMenu:mainForm" method="post" action="/de.test.testMobile/secure/main2.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="mainMenu:mainForm" value="mainMenu:mainForm" />
<ul id="mainMenu:mainForm:j_idt110" class="ui-menu ui-listview"><li class="ui-li-divider ui-bar-inherit">Test</li><li><a tabindex="-1" class="ui-link ui-btn ui-icon-carat-r ui-btn-icon-right" href="#" onclick="PrimeFaces.ab({s:'mainMenu:mainForm:j_idt105',f:'mainMenu:mainForm'});return false;">Show chart</a></li></ul><script id="mainMenu:mainForm:j_idt110_s" type="text/javascript">$(function(){PrimeFaces.cw("PlainMenu","widget_mainMenu_mainForm_j_idt110",{id:"mainMenu:mainForm:j_idt110",widgetVar:"widget_mainMenu_mainForm_j_idt110"});});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7570226193805477758:4717989858619232064" autocomplete="off" /><input type="hidden" name="javax.faces.RenderKitId" value="PRIMEFACES_MOBILE" />
</form></div></div><div id="chart" data-role="page"><div role="main" class="ui-content"><div id="chart:basic" style="width:500px;height:75vh"></div><script id="chart:basic_s" type="text/javascript">$(function(){PrimeFaces.cw('BarChart','widget_chart_basic',{id:'chart:basic',data:[[13,7,5,25,28,13]],categories:['28.08.','27.08.','26.08.','25.08.','24.08.','23.08.'],title:'Sales Chart',legendPosition:'ne',axes:{xaxis:{label:'',angle:0},yaxis:{label:'',angle:0}},series:[{label:'Sales'}],orientation:'vertical',barPadding:8,barMargin:10,animate:true,datatip:true},'charts');});</script></div></div></body>
     
</html>
Without page 1:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width, initial-scale=1"><link type="text/css" rel="stylesheet" href="/de.test.testMobile/javax.faces.resource/mobile/jquery-mobile.css.jsf?ln=primefaces&v=5.0" /><link type="text/css" rel="stylesheet" href="/de.test.testMobile/javax.faces.resource/mobile/primefaces-mobile.css.jsf?ln=primefaces&v=5.0" /><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.0"></script><script type="text/javascript">$(document).on('mobileinit', function(){$.mobile.ajaxEnabled = false;$.mobile.pushStateEnabled = false;$.mobile.page.prototype.options.domCache = true;});</script><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/mobile/jquery-mobile.js.jsf?ln=primefaces&v=5.0"></script><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/primefaces-mobile.js.jsf?ln=primefaces&v=5.0"></script><link type="text/css" rel="stylesheet" href="/de.test.testMobile/javax.faces.resource/charts/charts.css.jsf?ln=primefaces&v=5.0" /><script type="text/javascript" src="/de.test.testMobile/javax.faces.resource/charts/charts.js.jsf?ln=primefaces&v=5.0"></script></head><body><div id="chart" data-role="page"><div role="main" class="ui-content"><div id="chart:basic" style="width:500px;height:75vh"></div><script id="chart:basic_s" type="text/javascript">$(function(){PrimeFaces.cw('BarChart','widget_chart_basic',{id:'chart:basic',data:[[13,7,5,25,28,13]],categories:['28.08.','27.08.','26.08.','25.08.','24.08.','23.08.'],title:'Sales Chart',legendPosition:'ne',axes:{xaxis:{label:'',angle:0},yaxis:{label:'',angle:0}},series:[{label:'Sales'}],orientation:'vertical',barPadding:8,barMargin:10,animate:true,datatip:true},'charts');});</script></div></div></body>
     
</html>
Top
JasDA
Posts: 15
Joined: 10 Jul 2012, 10:40

28 Aug 2014, 15:19

kukeltje wrote:or do an 'init' again : PF('chartWidget').init() on the showPage event
Can you please explain how to do that?
Top
smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

28 Aug 2014, 20:55

kukeltje wrote:And do some debugging winth e.g. a mobile emulator or FireFox remote debugging... https://developer.mozilla.org/en-US/doc ... _Debugging
I'm loving mobile emulator in Google Chrome console. Now, I don't need to test PrimeFaces mobile xhtml pages with my mobile device. I can use google Chrome on my desktop and test those mobile xhtml pages. :)
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache
Top
kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

28 Aug 2014, 21:10

JasDA wrote:
kukeltje wrote:or do an 'init' again : PF('chartWidget').init() on the showPage event
Can you please explain how to do that?

http://jqmtricks.wordpress.com/2014/03/ ... ge-events/
Top
kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

28 Aug 2014, 21:15

JasDA wrote:Setting a width doesn't make any difference. But how could a remote debugger help?
Well, you'd see javascript errors, network errors can try css etc... Works great
JasDA wrote:Perhaps this helps? It's the rendered output:
Please format the code
Top
JasDA
Posts: 15
Joined: 10 Jul 2012, 10:40

29 Aug 2014, 07:52

The are no network or javascript errors shown in the debugger. If I simply put the following code to the pagecontainershow function it works:

Code: Select all

			<script>
				$( document ).on( "pagecontainershow", function ( event, ui ) {				  
					PrimeFaces.cw('BarChart','widget_chart_j_idt10_basic',{id:'chart:j_idt10:basic',data:[[13,7,5,25,28,13]],categories:['28.08.','27.08.','26.08.','25.08.','24.08.','23.08.'],title:'Sales Chart',legendPosition:'ne',axes:{xaxis:{label:'',angle:0},yaxis:{label:'',angle:0}},series:[{label:'Sales'}],orientation:'vertical',barPadding:8,barMargin:10,animate:true,datatip:true},'charts');
				});
			</script>
So I guess this cw-function doesn't get called within the normal workflow. I've tried to re-init the widget:

Code: Select all

			<script>
				$( document ).on( "pagecontainershow", function ( event, ui ) {				  
					PF('widget_chart_j_idt10_basic').init();
				});
			</script>
Error: Uncaught TypeError: Cannot read property 'id' of undefined
Uncaught TypeError: Cannot read property 'init' of undefined
PrimeFaces.widget.BaseWidget.Class.extend.init
PrimeFaces.widget.Chart.PrimeFaces.widget.DeferredWidget.extend.init
e.(anonymous function)
bI.event.dispatch
ce.handle
bI.event.trigger
(anonymous function)
bI.extend.each
bI.fn.bI.each
bI.fn.extend.trigger
f.widget._triggerWithDeprecated
(anonymous function)
f.widget._triggerCssTransitionEvents
(anonymous function)
(anonymous function)
b6
i
cd.fireWith
e.(anonymous function)
f.extend.doneIn
(anonymous function)
b6
(anonymous function)
b8
bI.event.dispatch
ce.handle

Another try:

Code: Select all

<p:barChart width="300px" widgetVar="chart" rendered="#{replenishmentBean.salesChartModel != null}" id="basic" value="#{replenishmentBean.salesChartModel}" legendPosition="ne" title="Sales Chart" animate="true" style="width:500px;height:75vh"/>

			<script>
				$( document ).on( "pagecontainershow", function ( event, ui ) {				  
					PF('chart').init();
				});
			</script>
Error: Uncaught TypeError: Cannot read property 'id' of undefined
Top
jQMTricks
Posts: 1
Joined: 29 Aug 2014, 11:51

29 Aug 2014, 11:58

As @kukeltje has said, use pagecontainershow event. However, note that event will fire on each and every page being shown. Hence, you need to be specific.

Code: Select all

$(document).on("pagecontainershow", function ( e, ui ) {
var page   = $(ui.toPage),
    pageID = page[0].id;

     if(pageID = "mainMenu") {
        /* initialization code here */
    }
});
Top
kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

29 Aug 2014, 12:11

ok, then I'm currently out of options to suggest without me digging deep into the PF js code (for which I don't have time, sorry)
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 30 guests