Appfuse+Richfaces 3.3.0.GA+Primefaces 1.0 -> charts not show

Black1 · 28 Mar 2010, 22:55

Hi,

I developed a small application (Appfuse, Spring, Hibernate, Richfaces, Primefaces) that analyzes user CDRs (Asterisk PBX server) and I have problems to renderer Charts with Safari, Chrome and IE. I made a search on this forum and on google, modified code function of solutions found by the other users (like adding <f:view contentType="text/html"> ...) but not solve my problem.

Any suggestion or recommendation will be welcome.

I used:

JSF 1.2
Richfaces 3.3.0.GA
Primefaces 1.0
Facelets 1.1.14

Thank.

29 Mar 2010, 02:47

Hi,

Welcome to the forum.

Can you see the showcase charts with your safari, chrome or ie? Test link;

http://www.primefaces.org:8080/prime-sh ... eChart.jsf

Most of the time, setting contentType="text/html" fixes this issue.

Black1 · 29 Mar 2010, 20:39

Hi,

Thank you for you reply.

Yes I confirm that I can see the charts in your showcases web page with Chrome and Safari. But on my own application, charts are not rendered. No problem with Firefox.

Below is my *.xhtml code page:
---------------------------------------

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
 
<f:view contentType="text/html">
<head>
	<title>Right side column</title>      
		<script type="text/javascript">
	    	var chartStyle = {
	        padding:0,
	        legend: {
	            display:"top",
	            spacing:0
	        }
	    	};
	</script>
	<p:resources />
</head>
	<body>
		<h:form>
    	        <h2>Your outgoing calls chart for the current month</h2>
	  	<p:stackedColumnChart value="#{cdrList.drawChartDM}"  var="chartContentBean" xfield="#{chartContentBean.monthDay}" style="chartStyle" 
	  			width="148px" height="200px">
			<p:chartSeries label="Day/Call" value="#{chartContentBean.numberOfCallPerDay}" />	
		</p:stackedColumnChart >
		 <p:stackedColumnChart value="#{cdrList.drawChartDM}"  var="chartContentBean" xfield="#{chartContentBean.monthDay}" style="chartStyle"
				width="148px" height="200px">		
			<p:chartSeries label="Day/Min used" value="#{chartContentBean.numberOfMinuteUsedPerDay}" />
		</p:stackedColumnChart>
		</h:form> 
	</body>
</f:view>
</html>

NOTE:

This page is called by the 'default.jsp' page and it should be rendered on the right, 3rd column.

The 'default.jsp' code generated by Appfuse (see: appfuse.org) is :
-------------------------------------------------------------------------------

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ include file="/common/taglibs.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
        <%@ include file="/common/meta.jsp" %>
        <title><decorator:title/> | <fmt:message key="webapp.name"/></title>

        <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/${appConfig["csstheme"]}/theme.css'/>" />
        <link rel="stylesheet" type="text/css" media="print" href="<c:url value='/styles/${appConfig["csstheme"]}/print.css'/>" />

        <script type="text/javascript" src="<c:url value='/scripts/prototype.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/scriptaculous.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/global.js'/>"></script>
        <decorator:head/>
    </head>
    
	<body<decorator:getProperty property="body.id" writeEntireProperty="true"/><decorator:getProperty property="body.class" writeEntireProperty="true"/>>

    <div id="page">
        <div id="header" class="clearfix">
            <jsp:include page="/common/header.jsp"/>
        </div>		
        <div id="content" class="clearfix">
            <div id="main">
                <%@ include file="/common/messages.jsp" %>
                <h1><decorator:getProperty property="meta.heading"/></h1>
                <decorator:body/>
            </div>            
	
        <!-- HERE IS WHERE I CALLED MY PAGE THAT SHOULD RENDERER 2 SIMPLE CHARTS -->
         <div id="sub">
            	<!-- <p>MY 3RD COLUMN</p> -->
            	<c:if test="${!empty pageContext.request.remoteUser}">
            	<c:if test="${userForm.noEdit == true}">
            		<jsp:include page="/rightcol.html"/><!-- my chart page using primefaces -->
            	</c:if>  
            	<c:if test="${userForm.noEdit == null}">
            		<jsp:include page="/rightcol.html"/><!-- my chart page using primefaces -->
            	</c:if>          	
            	</c:if>
	</div>	
.....................................
..................................

     </body>
</html>

Thanks.

29 Mar 2010, 21:30

I can only suggest comparing the showcase code with yours;

Demo: http://www.primefaces.org:8080/prime-sh ... omplex.jsf
Code: http://code.google.com/p/primefaces/sou ... plex.xhtml

Doctypes seem to be different, that is what I see at a first glance.

Black1 · 29 Mar 2010, 22:25

Thanks for the suggestion. I changed the Doctype like yours but issue is not solved. I think the code should be correct but something can be incompatible between Sitemesh decorators + RichFaces + Primefaces.

If anyone has a recommandation, I will appreciate.

04 Apr 2010, 14:46

I know there are users having RichFaces and PrimeFaces charts working together so problem might be sitemesh. I don't know anyone using sitemesh so can't comment.

Appfuse+Richfaces 3.3.0.GA+Primefaces 1.0 -> charts not show

Who is online