srividya_sharma

Short Tutorial on FC JSF Tag Library with Facelets and XHTML

By srividya_sharma, in FusionCharts and JSP

Recommended Posts

srividya_sharma   

srividya_sharma
Posted

This is a short tutorial on "How to use FusionCharts JSF Tag Library in xhtml with Facelets"

I assume the jars/configuration required for facelets are already in place. I will just give a small write-up on that here.

Facelet Setup:

  1. Jars in WEB-INF/lib

     

    jsf-facelets.jar

    jsf-api.jar

    jsf-impl.jar

    jstl-1.2.jar

     

    You might also need el jars.

  2. Configure the ViewHandler in faces-config.xml

     

    <faces-config>
  <application>
   <!-- tell JSF to use Facelets -->
   <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
  </application>
</faces-config>

  3. Configure xhtml in web.xml

     

    <context-param>
  <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
  <param-value>.xhtml</param-value>
</context-param>

  4. Configure FacesServlet in web.xml

     

    <servlet-mapping>

    <servlet-name>Faces Servlet</servlet-name>

    <url-pattern>*.jsf</url-pattern>

    </servlet-mapping>

     

Now, facelets is configured.

Let us see how to use the FusionCharts Tag Library with facelets and xhtml. The JSF tag library can be obtained in this topic http://www.fusioncharts.com/forum/Topic14110-33-1.aspx . Steps to use the tag library with facelets:

  1. Place the fusionchartstaglibJSF1-2-java5.jar in WEB-INF/lib ( classpath )
  2. Place fusioncharts.taglib.xml in WEB-INF/lib folder
  3. Modify web.xml and add the context-param as shown:

    
<context-param> 
<param-name>facelets.LIBRARIES</param-name> 
<param-value> /WEB-INF/lib/fusioncharts.taglib.xml </param-value> 
</context-param>

That finishes the setup for using FusionCharts JSF tag library with facelets and xhtml.

Now, lets embed the chart in xhtml.

Following the conventions, lets use a template for our xhtml. Here is a sample template.xhtml :

<?xml version="1.0" encoding="utf-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xml:lang="en" 
lang="en">
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test XHTML</title>
<script type="text/javascript" src="../FusionCharts/FusionCharts.js"></script> 
</head>
<body>
This is from template
<ui:insert name="content"/>
</body>
</f:view>
</html>

 

Now lets create a SimpleUIChart.xhtml as shown:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:fc="http://www.fusioncharts.com"
template="./template.xhtml">
<ui:define name="content">
<f:verbatim>This is JSF example</f:verbatim> <br/>
<fc:render chartId="SimpleChart" filename="FusionCharts/Column3D.swf" width="700" height="300" url="Data/Data.xml"/>
</ui:define>
</ui:composition>

Thats it! We can now view the Column chart with data from Data.xml.

 

Just ensure that the path to the FusionCharts.js file, .swf file and .xml file are correct.

Hope this short tutorial helps everybody.

I hope I did not miss any setting/configuration.

Please feel free to write your comments and suggestions on this topic.

Thanks :D

Srividya

Share this post

Link to post
Share on other sites

sharkfin   

sharkfin
Posted

Dear Srividya,

Your example works perfectly in WAR packages.

However the problem 'No chart display' in EAR packages.

May i ask how do you handle this ? I am using Eclipse with JBoss/Seam2.2

Rgds

David

Share this post

Link to post
Share on other sites

sharkfin   

sharkfin
Posted

Dear Srividya,

 

testfusionchart.ear

-testfusionchar-ejb.jar

-jboss-seam.jar

-lib ->commons-beanutils.jar, richfaces-api.jar, antlr-runtime.jar,

-META-INF ->MANIFEST.MF, application.xml, jboss-app.xml

->testfusionchart.war-->home.xhtml, login.xhtml, index.xhtml,

-->/img

-->/layout

-->/META-INF->MANIFEST.MF

-->/stylesheet

-->/WEB-INF-->/classes

-->/Data/data.xml

-->/FusionCharts/column3d.swf, FusionCharts.js

-->/lib/common-digester.jar, jsf-facelects.jar, fusionchartstaglibjsf1-2java5-version_4_1.jar, .....etc.

-

In war packages, it even works without adding the following ..

"Place fusioncharts.taglib.xml in WEB-INF/lib folder Modify web.xml and add the context-param as shown:

<context-param>

<param-name>facelets.LIBRARIES</param-name>

<param-value> /WEB-INF/lib/fusioncharts.taglib.xml </param-value>

</context-param> "

as the fusionchartstaglib..jar is added to war/web-inf/lib

 

Thank you in advance.

David

Share this post

Link to post
Share on other sites

srividya_sharma   

srividya_sharma
Posted

Hi David,

The jar file location seems to be correct. You could place the taglib jar in the root of the ear file and try once.

Questions:

1. Is FusionCharts custom tag getting interpreted?

2. Can you please attach the html obtained from view source in the page?

3. Is the swf file being shown with some message?

4. If #3 is correct, then if you are using FusionCharts v3, then turn on the debugMode to get more info.

Srividya :D

Share this post

Link to post
Share on other sites

sharkfin   

sharkfin
Posted

Hi Srividya,

I afraid by putting to root ...it runs into errors due to the structure of folder of the jar file.

I did tried to unzip the file and add into the folder according.

Here i attached source view code.

Cheers:)

David

home[1].txt

Share this post

Link to post
Share on other sites

srividya_sharma   

srividya_sharma
Posted

Hi David,

Your original structure is fine with the taglib jar inside the war.

The custom tag has been interpreted correctly. So this is not a problem with the location of the taglib jar or identification of the tag. :D

This could mean:

1. Path to the FusionCharts.js is incorrect

2. Also, I noticed that the name of the swf file is column3d.swf but the filename provided to the fc:render tag is FusionCharts/Column3D.swf. Please specify the filename in correct case, if not already done.

Srividya

Share this post

Link to post
Share on other sites

spikytiger2001   

spikytiger2001
Posted

Hi I am having a bit of a problem and I'm wondering if you can help me out...

 

 

 

I'm using your guys tag library that supports JSF1.2 and Java5, and when I use the fc:render tags and put escaped xml into them it works fine, the chart displays correctly. However when I try to get the xml from my backing bean, it tells me:

 

 

 

java.lang.NoSuchMethodError: com.fusioncharts.jsf.UIChart.getValueExpression(Ljava/lang/String; )Ljavax/el/ValueExpression;

at com.fusioncharts.jsf.UIChart.getXml(UIChart.java:203)

 

 

 

Now when I use the render tags within an .xhtml page:

 


<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"

xmlns:ice="http://www.icesoft.com/icefaces/component" xmlns:fc="http://www.fusioncharts.com">

<script type="text/javascript" src="js/FusionCharts.js"></script>

<fc:render chartId="thisnowhasanid" filename="aacc/fusioncharts/HLinearGauge.swf" width="800" height="200" debugMode="true" registerWithJS="0" WMode="0"

color="CCCCCC" scaleMode="0" lang="en" detectFlashVersion="0" autoInstallRedirect="" xml="#{linearGaugeChartManagedBean.xml}" url="">

</fc:render>

<ice:outputText value="#{linearGaugeChartManagedBean.xml}"/>

</ui:composition>

 

 

 

I followed the information provided earlier in the forum in setting up, and the fact that the chart is at least displaying when I entered dummy escaped xml indicates that it is setup and working mostly. When I just use the ice outputText tag the expression outputs fine, however when I put it as the xml attribute thats when I get the error...

 

Any thoughts?

Share this post

Link to post
Share on other sites

spikytiger2001   

spikytiger2001
Posted 




chart.xhtml:



<ui:composition

xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ice="http://www.icesoft.com/icefaces/component"

xmlns:fc="http://www.fusioncharts.com">

<script type="text/javascript" src="js/FusionCharts.js"></script>

<fc:render 

	chartId="thisnowhasanid" 

	filename="fusioncharts/HLinearGauge.swf" 

	width="800" 

	height="200" 

	debugMode="true" 

	registerWithJS="0" 

	WMode="0" 

	color="CCCCCC" 

	scaleMode="0" 

	lang="en" 

	detectFlashVersion="0" 

	autoInstallRedirect="" 

	xml="data" 

	url="#{linearGaugeChartManagedBean.xml}">

</fc:render>

</ui:composition>



LinearGaugeChartManagedBean.java :



public class LinearGaugeChartManagedBean {



private String fileName = "aacc/fusioncharts/HLinearGauge.swf";

private String xml = "<chart lowerLimit='0' upperLimit='100' palette='1' decimals='0' gaugeRoundRadius='5' baseFontColor='000000' showToolTip='1' chartLeftMargin='100' chartRightMargin='100'><colorRange><color id='colid1' minValue='0' maxValue='10' code='DD0000' label='Not Started (10)'/></colorRange></chart>";





public String getXml() {

	return xml;

}



public void setXml(String xml) {

	this.xml = xml;

}



public String getFileName() {

	return fileName;

}



public void setFileName(String fileName) {

	this.fileName = fileName;

}



}



in another page I call:



<ice:panelGroup style="position: relative; top: 10px; float: left; width: 70%">

<ui:include src="templates/chart.xhtml"/>

</ice:panelGroup>

 

 

 

unfortunately due to confidentiality reasons I can't give more code than this.

 

 

 

For some unknown reason it forces all the attributes within the tag to be there, if some are left out it doesn't work.

Share this post

Link to post
Share on other sites

srividya_sharma   

srividya_sharma
Posted

Hi,

JSF Tag library for JSF 1.1 and 1.2 are currently available.

Can you please tell us how you made it work in JSF 2.0?

This would help all our users, and probably we could release 2.0 version soon.

Thanks :)

Srividya

Share this post

Link to post
Share on other sites

Talamond   

Talamond
Posted (edited)

Hello.

 

 

 

I've been trying to get FusionCharts working with xhtml for a few days now, but i have not had any success. I have followed the tutorial posted on this thread, but I am getting the following error:

 

 

 

Error: uncaught exception: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)" location: "file:///home/FusionCharts/FusionCharts/FusionCharts.js Line: 250"]

 

 

 

I've got it wokring in basic HTML, but unable to get it working in xhtml using javascript. Ideally, I'd like to get the FusionCharts taglib to work, but right now I'm just trying to get it to work in xhtml javascript.

 

 

 

Here is my xhtml code:

 

 

 


<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xml:lang="en"

lang="en">

   <head>

       <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>

       <script type="text/javascript" src="FusionCharts/FusionChartsExportComponent.js"></script>

   </head>

<body bgcolor="#ffffff">

   <div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>

   <script type="text/javascript">

<![CDATA[

       var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "0");

       myChart.setDataXML("<chart numberPrefix='%' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' caption='Title' xAxisName='X Axis' yAxisName='Percentage succeeded' showValues='0' yAxisMaxValue='100' >

<set label='1' value='100' color='00FF00'/>

<set label='2' value='96' color='00FF00'/>

<set label='3' value='70' color='FF0000'/>

<set label='4' value='50' color='FF0000'/>

<set label='5' value='83' color='FF0000'/>

<set label='6' value='52' color='FF0000'/>

<set label='7' value='69' color='FF0000'/>

<set label='8' value='67' color='FF0000'/>

<set label='9' value='97' color='00FF00'/>

<styles>

	<definition>

		<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

	</definition>

	<application>

		<apply toObject='Canvas' styles='CanvasAnim' />

	</application>

</styles>

</chart>");

       myChart.render("chartdiv");

]]>

   </script>

</body>

</html>

 

 

 

Here is the counter .html that works fine:

 


<html>

   <head>

       <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>

       <script type="text/javascript" src="FusionCharts/FusionChartsExportComponent.js"></script>

   </head>

<body bgcolor="#ffffff">

   <div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>

   <script type="text/javascript">

       var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "0");

       myChart.setDataXML("<chart numberPrefix='%' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' caption='Title' xAxisName='X Axis' yAxisName='Percentage succeeded' showValues='0' yAxisMaxValue='100' >

<set label='1' value='100' color='00FF00'/>

<set label='2' value='96' color='00FF00'/>

<set label='3' value='70' color='FF0000'/>

<set label='4' value='50' color='FF0000'/>

<set label='5' value='83' color='FF0000'/>

<set label='6' value='52' color='FF0000'/>

<set label='7' value='69' color='FF0000'/>

<set label='8' value='67' color='FF0000'/>

<set label='9' value='97' color='00FF00'/>

<styles>

	<definition>

		<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

	</definition>

	<application>

		<apply toObject='Canvas' styles='CanvasAnim' />

	</application>

</styles>

</chart>");

       myChart.render("chartdiv");

   </script>

</body>

</html>

 

Any ideas on the problem?

 

 

 

Thanks

 

Talamond

Edited by Guest

Share this post

Link to post
Share on other sites

faraiz   

faraiz
Posted

Hi Talamond,

 

Looks like there is a problem in the xml.

 

The special character % has to be encoded and used numberPrefix='%25'

 

Please see the documentation page: http://www.fusioncharts.com/docs/Contents/SpChar_Percent.html for further information.

 

Hope this solves the problem.

 

Srividya :)

 

 

 

I have problem wmode,

 

 

 

 

 

 

 

<fc:render chartId="SimpleChart" filename="#{application.contextPath}/pages/geral/FusionCharts/FCF_Column2D.swf"

 

width="600" height="300" debugMode=false registerWithJS="true"

 

xml="#{mBeanEstatisticas.gerarChartDepartamento()}">

 

 

 

 

</fc:render>

 

 

 

 

 

 

 

 

 

does not work and overwrites the menu

 

 

Share this post

Link to post
Share on other sites

vinay lakshman   

vinay lakshman
Posted

Vidya Madam,

 

I am Vinay, a novice to FC.

 

I have to first thank you for a clear cut explanation on FC :) It has helped me a lot.

 

 

I want to render a FC, say Column3D.swf, using JSON data object in a facelet.

 

Can you please take me through these steps?

 

 

I am expecting output of Column3D.swf like this :

 

Y axis values are constants

X axis values ( i.e. Counts) should be dynamically fetched from bean

Something like values =#{bean.counts}

Share this post

Link to post
Share on other sites

Haritha   

Haritha
Posted
Hi Vinay,

 

Welcome to FusionCharts Forum.  :)

 

The chart data can be provided in JSON format. You need to use the jsonUrl and jsonData attributes of the fc:render tag or provide the data as part of the body of the tag and also provide the dataFormat attribute. ("jsonurl" or "json") .

 

For information on using JSON data to create chart, please refer our documentation link : http://docs.fusioncharts.com/charts/contents/Code/J2EE/JSP_BasicExample.html#json

 

For dynamically generating JSON data, you may loop through the contents of the bean which contains an array of X-axis values and adding the obtained value to the String which finally contains the JSON data to be used by FusionCharts. Incase you want Y-axis to have constant values like Jan,Feb etc. and X-axis to have numeric values to be plotted on the chart like 20,30,etc, you need to use Bar2D chart. 

 

For information on Bar2D, please refer our documentation link : http://docs.fusioncharts.com/charts/contents/ChartSS/Bar2D.html

 

Hope this helps.

Share this post

Link to post
Share on other sites

maranda   

maranda
Posted

Hello everyone,

 

I need your help. I’m trying to use FusionCharts XT in my project, but I don’t manage to!

The project is a Maven – Web Application, Java 6, JSF 2 and IceFaces 3.2.

I followed the instructions in this web (Documentatio --> Guide for Web Developers --> Using with J2EE). That is what I’ve already done:

  • Place the FusionCharts folder containing all the .swf and .js files within the Web application (Maven uses by default the folder resources, so I made a new folder Charts in resources)
  • Copy the fchelper.jar, fctl.jar, fcexporter.jar, and fcexporthandler.jar to the classpath of my web server (in my WAR structure is in WEB-INF/lib)
  • I didn’t find the right JSF tag library for version 2, I only found this one: fusionchartstaglibJSF1-2.zip (JSF 1.2, Java  6) (the jar is in WEB-INF/lib too)
  • I use FusionCharts.js and FusionChartsExportComponents.js so:
    <h:outputScript name=”FusionCharts.js” library=”Charts” /> 
<h:outputScript name=”FusionChartsExportComponents” library=”Charts” />

    And my test.xhtml looks like this:

  • <?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:ice="http://www.icesoft.com/icefaces/component"
                xmlns:ace="http://www.icefaces.org/icefaces/components"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fc="http://www.fusioncharts.com"
                template="/WEB-INF/template/common-template.xhtml">
    <ui:define name="content">
        <script type="text/javascript" src="Charts/FusionCharts.js" />
        <h:form>

            <div id="chartContainer">FusionCharts XT will load here</div>
                 
            <h:panelGrid id="grid1">
                <fc:render chartId="${chartData.chartId}" filename="Charts/#{chartData.swfFilename}" 
                    width="100%" height="100%" debugMode="true" registerWithJS="1"
                    WMode="0" color="CCCCCC" scaleMode="0" lang="en"
                    detectFlashVersion="0" autoInstallRedirect="" 
                    xml="#{chartData.xml}"  />              
            </h:panelGrid>                
        </h:form> 
    </ui:define>
</ui:composition>

    Here the generated HTML:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
            <link href="/projectName-jsf/resources/css/less/bootstrap.less" rel="stylesheet/less" /> 
            <script src="/projectName-jsf/javax.faces.resource/FusionCharts.js.jsf?ln=Charts" type="text/javascript"></script>
            <script src="/projectName-jsf/javax.faces.resource/FusionChartsExportComponent.js.jsf?ln=Charts" type="text/javascript"></script>
            <title>projectName</title>
	   
	[...]		
</head>

<body>
	[...]		

<div id="content">
       [...]
<form action="/projectName-jsf/pages/secured/report/test.jsf" enctype="application/x-www-form-urlencoded" id="j_idt100" method="post" name="j_idt100">
<input name="j_idt100" type="hidden" value="j_idt100" />
<input name="ice.window" type="hidden" value="qihgdf85bc" />
<input name="ice.view" type="hidden" value="vhk3x06c" />
<script id="j_idt100:j_idt100_captureSubmit" type="text/javascript">ice.captureSubmit('j_idt100',false);ice.captureEnterKey('j_idt100');</script>

<div id="chartContainer">FusionCharts XT will load here</div><table id="j_idt100:grid1">
<tbody>
<tr>
<td>		<!-- START Script Block for Chart basicChart-->
		<div align="center" id="basicChartDiv">
			Chart.
		</div>
<script type="text/javascript">
			var chart_basicChart = new FusionCharts('Charts/Column3D.swf', 'basicChart', '100%', '100%', '1', '0');
			chart_basicChart.setDataXML("<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'> <set label='Jan' value='462' /> <set label='Feb' value='857' /> <set label='Mar' value='671' /> <set label='Apr' value='494' /><set label='May' value='761' /><set label='Jun' value='960' /><set label='Jul' value='629' /><set label='Aug' value='622' /><set label='Sep' value='376' /><set label='Oct' value='494' /><set label='Nov' value='761' /><set label='Dec' value='960' /></chart>");
			chart_basicChart.render('basicChartDiv');
		</script>
<!--END Script Block for Chart basicChart-->
</td>
</tr>
<tr>
[...]

I saw a solution using Primefaces, but that is not possible for me L I have to use IceFaces.

Can anybody help me, please? What am I doing wrong or missing? No error message is shown! Is ther already an update Taglib for JSF 2?

 

Thanks in advance

María

Share this post

Link to post
Share on other sites

maranda   

maranda
Posted

Solved! The problem was the relative path of the chart... Now it works, but only in Chrome! I suppose that is an econding problem, has anybody run into the same problem?

Thanks a lot

Share this post

Link to post
Share on other sites

Haritha   

Haritha
Posted
Hi Maranda,

 

Welcome to FusionCharts Forum  :)

 

The code should work on other browsers like IE and Firefox too. Please clear your browser cache and check it again.

 

Please revert back if this does not resolve your issue.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing FusionCharts and JSP