Fusion Charts intergration with JSF

[srividya_sharma]

Hi Devika,

Value to the filename parameter in fs:renderHTML seems to be incorrect --> FusionCharts.Column3D.swf

Please verify this.

Srividya

[devika]

Sorry that is also not working.

 

 

 

Here is my complete Seam application project.

Error.doc

[srividya_sharma]

Hi Devika,

Looks like the fs:renderHTML tag is not being recognized.

Have you placed the required .tld file in META-INF folder?

Can you give me a screenshot of the FusionCharts specific files in your .ear?

Srividya

[devika]

Hi ,

 

 

 

Here i am sending complete Folder structure and code.

Complete Files.doc

[srividya_sharma]

Hi Devika,

I am unable to spot any mistake in the files that you have sent.

Could you give me the html obtained from view source in the browser ?

Also, any exceptions in the console/log file?

Srividya

[devika]

Hi Srividya,

 

 

 

no exceptions in console/log file. Just i can only text part of it thats all.

 

This is how it looks in web browser html page.

TestFusion.txt

[srividya_sharma]

Hi Devika,

I am not sure about this... but could you try using html xmlns instead of ui:composition in the xhtml once.

Srividya

[devika]

hi Srividya,

 

 

 

it is not possible write xhtml page without ui:composition in seam.

 

 

 

and same program works absolutely fine in JSF i.e without seam configuration.

[srividya_sharma]

the only problem is the custom tag is not being interpreted.

which means the tag library jar or class files are not found.

can you once try to put the jar file in classpath instead of using the java class files.

[nico_123]

hey Supreme Being

 

 

 

how do you implement your tag lib in a XHTML?

[srividya_sharma]

Hi nico,

Please see http://www.fusioncharts.com/forum/Topic22918-33-1.aspx

Hope this helps.

Srividya

[devika]

hi everybody,

 

 

 

i am trying to work with drill down charts in seam framework. here is the steps that i have followed:

 

 

 

Data.xml

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

MyFile.xhtml

 

/p>

 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

xmlns:s="http://jboss.com/products/seam/taglib"

 

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:fs="myUri"

 

template="layout/template.xhtml">

 

 

 

 

 

function getChartXML(){

 

window.alert("Welcome to Jan")

 

var chart = getChartFromId("MyChart");

 

window.alert(chart.getXML());

 

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I am not getting click event on columns of the chart

 

 

 

anybody can help me....

 

 

 

 

 

Regards

 

Devika.N

[srividya_sharma]

Hi Devika,

Please try to use fc:render in place of fc:renderHTML.

Srividya

[Bill Schneider]

Does anyone have an example of using FusionCharts as a JSF component with an actionListener, such that when you click somewhere on the chart it executes a method server-side on the backing bean?

 

 

 

For example, I'd like to do something like

 

 

 

 

I have some rough ideas on how to do this but I'm curious to see whether anyone else has already come up with a solution. With ICEfaces, the best I've come up so far is to make a separate hidden ice:commandLink tag with the actionListener method binding, and put a Javascript callback function in my FusionCharts data set that explicitly executes similar Javascript as the commandLink would if clicked directly. I feel like there has to be a better way to do this, though.

[srividya_sharma]

Hi Bill,

Welcome to FusionCharts for JSF forum!

Here is a sample code I had developed earlier which uses RichFaces. Please see if this helps.

Please place the chart swf and js files in FusionCharts folder.

This is a non-conventional code, put together from bits and pieces.

Please ignore the crudeness of the UI and the code.

Hope this helps you in what you wanted to achieve.

Srividya

FusionChartsFromRichTreeWithDrillDown.zip

[devika]

hi,

 

i have worked drill down option in Seam framework.

 

 

 

First link certain javascript method for the fusion-chart xml files.

 

 

 

 

and in use seam components to call the java methods.

 

 

 

function getChartXML(){

 

 

 

Seam.Component.getInstance("stationData").javascriptmethod();

 

}

 

 

 

it will perfectly works fine.

[srividya_sharma]

Thanks a lot Devika.

Thanks for posting your experience with Seam and FusionCharts for the benefit of all users.

Like Devika, we would love to see more users participating in the forums and helping other users with their queries

Hip Hip Hurray!

Thank you FusionCharts Users!

Thank you FusionCharts Team!

[chanakya84]

Hi All,

 

I am beginner in FusionChart. I was trying to use your example but I am getting this error while rendering <fc:render> tag.

java.lang.ClassCastException: javax.faces.component.UIViewRoot cannot be cast to com.fusioncharts.jsf.UIChart

 

Can you please help me out, its extremely urgent.

 

Many thanks in advance.

 

Thanks,

Saurav

 

Hi,I have tried it out in my application. To use FusionCharts with JSF, you would need to create a Component. I created a component ChartTag. Let me describe how you have to do it. ( I am assuming that you have a JSF application atleast an empty one)

 

1. Create a charts.tld file in WEB-INF folder with the following contents:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?> </P><P><!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd"> </P><P><taglib> </P><P><tlib-version>1.0</tlib-version> </P><P><jsp-version>1.2</jsp-version> </P><P><short-name>fc</short-name> </P><P><uri>http://localhost/</uri> </P><P><tag> </P><P><name>fusioncharts</name> </P><P><tag-class>charts.ChartTag</tag-class> </P><P><body-content>JSP</body-content> </P><P><attribute></P><P><name>filename</name></P><P></attribute></P><P><attribute></P><P><name>url</name></P><P></attribute></P><P><attribute></P><P><name>xml</name></P><P></attribute> </P><P><attribute></P><P><name>chartId</name></P><P></attribute></P><P><attribute></P><P><name>width</name></P><P></attribute></P><P><attribute></P><P><name>height</name></P><P></attribute></P><P><attribute></P><P><name>debugMode</name></P><P></attribute></P><P><attribute></P><P><name>registerWithJS</name></P><P></attribute></P><P></tag> </P><P></taglib> </FONT></P><P>

 

2. Modify faces-config.xml present in WEB-INF folder to have the following text:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?></P><P><!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"</P><P>"http://java.sun.com/dtd/web-facesconfig_1_1.dtd"></P><P><faces-config></P><P><component></P><P><component-type>chart</component-type></P><P><component-class>charts.UIChart</component-class></P><P></component></P><P><lifecycle/></P><P><application></P><P><locale-config/></P><P></application></P><P><factory/></P><P></faces-config></P></FONT><P>

 

3. Now we need to write the java classes for charts.ChartTag and charts.UIChart. Create a folder called charts and write the following java classes:

 

ChartTag.java

 

<P>package charts;
import javax.faces.component.UIComponent; 
import javax.faces.webapp.UIComponentTag; 
public class ChartTag extends UIComponentTag{ <P>String chartId;
String filename;
String xml;
String url;
String width;
String height;
String debugMode;
String registerWithJS;

public String getChartId() { 
 return chartId;
}<P> public void setChartId(String id) {
 this.chartId= id;
}
public String getFilename() { 
 return filename;
}<P> public void setFilename(String filename){
 this.filename= filename;
}
public String getXml() { 
 return xml;
}<P> public void setXml(String xml){
 this.xml= xml;
}
public String getUrl() { 
 return url;
}<P> public void setUrl(String url) {
 this.url= url;
}
public String getWidth() { 
 return width;
}<P> public void setWidth(String width) {
 this.width= width;
}
public String getHeight() { 
 return height;
}<P> public void setHeight(String height) {
 this.height= height;
}
public String getDebugMode() { 
 return debugMode;
}<P> public void setDebugMode(String debugMode) {
 this.debugMode= debugMode;
}
public String getRegisterWithJS() { 
 return registerWithJS;
}<P> public void setRegisterWithJS(String registerWithJS) {
 this.registerWithJS= registerWithJS;
}<P>public void release() { 
// the super class method should be called 
super.release(); 
chartId=null;
filename=null;
xml=null;
url=null;
width=null;
height=null;
debugMode=null;
registerWithJS=null;
} 
protected void setProperties(UIComponent component) {
// the super class method should be called 
super.setProperties(component); 
if(chartId != null)
component.getAttributes().put("id", chartId);
if(filename != null)
component.getAttributes().put("filename", filename);<P>if(xml!=null)
component.getAttributes().put("xml", xml);
if(url!=null)
component.getAttributes().put("url", url);
if(width!=null)
component.getAttributes().put("width", width);
if(height!=null)
component.getAttributes().put("height", height);
if(debugMode!=null)
component.getAttributes().put("debugMode", debugMode);
if(registerWithJS!=null)
component.getAttributes().put("registerWithJS", registerWithJS);<P>} 
public String getComponentType() { 
return "chart"; 
} 
public String getRendererType() {
// null means the component renders itself 
return null; 
} 
} <P>

 

UIChart.java

 

<P>package charts;
import java.io.IOException;
import javax.faces.component.UIOutput;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
public class UIChart extends UIOutput {
public void encodeBegin(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 String chartId = (String)getAttributes().get("id");</P><P>  writer.startElement("div", this);
 writer.writeAttribute("id", chartId+"Div" , null);</P><P>  writer.writeAttribute("align","center",null); 
 writer.writeText("Chart.",null); <P>  writer.endElement("div");
<P> String chartSWF= (String)getAttributes().get("filename");
String url= (String)getAttributes().get("filename");
String xml= (String)getAttributes().get("xml");
String chartWidth= (String)getAttributes().get("width");
String chartHeight= (String)getAttributes().get("height");</P><P> String debugMode= (String)getAttributes().get("debugMode");
int debugModeInt = boolToNum(new Boolean(debugMode));</P><P> String registerWithJS= (String)getAttributes().get("registerWithJS");
int regWithJSInt = boolToNum(new Boolean(registerWithJS));<P>writer.startElement("script",this);
writer.writeAttribute("type","text/javascript",null);  
writer.writeText("var chart_"+chartId+" = new FusionCharts('"+chartSWF+"', '"+chartId+"', '"+chartWidth +"', '"+chartHeight+"', '"+ debugModeInt+"', '"+regWithJSInt+"');",null);<P>
if (xml==null || xml.equals(""))
writer.writeText("chart_"+chartId+".setDataURL(""+url+"");",null);
else 
writer.writeText("chart_"+chartId+".setDataXML(""+xml+"");",null);<P>// Finally render the chart
writer.writeText("chart_"+chartId+".render('"+chartId+"Div');",null);
}<P> public void encodeEnd(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 writer.endElement("script");
}
/**
    * Converts a Boolean value to int value<br>
    * 
    * @param bool Boolean value which needs to be converted to int value 
    * @return int value correspoding to the boolean : 1 for true and 0 for false
    */
  public int boolToNum(Boolean bool) {
int num = 0;
if (bool.booleanValue()) {
    num = 1;
}
return num;
}
}
<P>

 

4. After writing the java classes, we now have to use the new component in our JSF. Here is how we do that:

 

</P><FONT size=2><P><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> </P><P><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> </P><P><%@ taglib uri="http://localhost/" prefix="fc" %> </P><P><html> </P><P><head> </P><P><title>Show Custom Component</title> </P><P><script type="text/javascript" src="FusionCharts/FusionCharts.js"></P><P></script></P><P></head> </P><P><body> </P><P><f:view> </P><P><f:verbatim>This is JSF example</f:verbatim> </P><P><fc:fusioncharts chartId="MyChart" filename="FusionCharts/Column3D.swf" width="700" height="300" xml="<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>" debugMode="false" registerWithJS="false"> </P><P></fc:fusioncharts> </P><P></f:view> </P><P></body> </P><P></html> </P></FONT><P>

 

Do not forget to include FusionCharts.js present in the FusionCharts folder. This folder will also contain the swf files required to generate the chart. I have used the xml directly here. you could give the url to the xml also.

 

Here I have hard-coded the xml, you could get the xml from the backing bean also.

 

In case you have problems with the above code, please feel free to ask questions.

 

Srividya

 

 

 

 

 

[sonam.srivastava]

Hi,

Your implementation of fusionmaps with jsf without fusioncharts taglib defines the chart component in the faces-config.xml file. If I am using JSF 2 adding the faces-config file invalidates other components. Is there any way around using the taglib and chart package in JSF 2 without the faces-config file?

[Guest Sumedh]

Hi,

Your implementation of fusionmaps with jsf without fusioncharts taglib defines the chart component in the faces-config.xml file. If I am using JSF 2 adding the faces-config file invalidates other components. Is there any way around using the taglib and chart package in JSF 2 without the faces-config file?

 

Hi,

 

We don't have any implementation of FusionMaps with JSF2.

 

Thanks for your time.

[Adi adavi]

Hi,I have tried it out in my application. To use FusionCharts with JSF, you would need to create a Component. I created a component ChartTag. Let me describe how you have to do it. ( I am assuming that you have a JSF application atleast an empty one)

 

1. Create a charts.tld file in WEB-INF folder with the following contents:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?> </P><P><!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd"> </P><P><taglib> </P><P><tlib-version>1.0</tlib-version> </P><P><jsp-version>1.2</jsp-version> </P><P><short-name>fc</short-name> </P><P><uri>http://localhost/</uri> </P><P><tag> </P><P><name>fusioncharts</name> </P><P><tag-class>charts.ChartTag</tag-class> </P><P><body-content>JSP</body-content> </P><P><attribute></P><P><name>filename</name></P><P></attribute></P><P><attribute></P><P><name>url</name></P><P></attribute></P><P><attribute></P><P><name>xml</name></P><P></attribute> </P><P><attribute></P><P><name>chartId</name></P><P></attribute></P><P><attribute></P><P><name>width</name></P><P></attribute></P><P><attribute></P><P><name>height</name></P><P></attribute></P><P><attribute></P><P><name>debugMode</name></P><P></attribute></P><P><attribute></P><P><name>registerWithJS</name></P><P></attribute></P><P></tag> </P><P></taglib> </FONT></P><P>

 

2. Modify faces-config.xml present in WEB-INF folder to have the following text:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?></P><P><!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"</P><P>"http://java.sun.com/dtd/web-facesconfig_1_1.dtd"></P><P><faces-config></P><P><component></P><P><component-type>chart</component-type></P><P><component-class>charts.UIChart</component-class></P><P></component></P><P><lifecycle/></P><P><application></P><P><locale-config/></P><P></application></P><P><factory/></P><P></faces-config></P></FONT><P>

 

3. Now we need to write the java classes for charts.ChartTag and charts.UIChart. Create a folder called charts and write the following java classes:

 

ChartTag.java

 

<P>package charts;
import javax.faces.component.UIComponent; 
import javax.faces.webapp.UIComponentTag; 
public class ChartTag extends UIComponentTag{ <P>String chartId;
String filename;
String xml;
String url;
String width;
String height;
String debugMode;
String registerWithJS;

public String getChartId() { 
 return chartId;
}<P> public void setChartId(String id) {
 this.chartId= id;
}
public String getFilename() { 
 return filename;
}<P> public void setFilename(String filename){
 this.filename= filename;
}
public String getXml() { 
 return xml;
}<P> public void setXml(String xml){
 this.xml= xml;
}
public String getUrl() { 
 return url;
}<P> public void setUrl(String url) {
 this.url= url;
}
public String getWidth() { 
 return width;
}<P> public void setWidth(String width) {
 this.width= width;
}
public String getHeight() { 
 return height;
}<P> public void setHeight(String height) {
 this.height= height;
}
public String getDebugMode() { 
 return debugMode;
}<P> public void setDebugMode(String debugMode) {
 this.debugMode= debugMode;
}
public String getRegisterWithJS() { 
 return registerWithJS;
}<P> public void setRegisterWithJS(String registerWithJS) {
 this.registerWithJS= registerWithJS;
}<P>public void release() { 
// the super class method should be called 
super.release(); 
chartId=null;
filename=null;
xml=null;
url=null;
width=null;
height=null;
debugMode=null;
registerWithJS=null;
} 
protected void setProperties(UIComponent component) {
// the super class method should be called 
super.setProperties(component); 
if(chartId != null)
component.getAttributes().put("id", chartId);
if(filename != null)
component.getAttributes().put("filename", filename);<P>if(xml!=null)
component.getAttributes().put("xml", xml);
if(url!=null)
component.getAttributes().put("url", url);
if(width!=null)
component.getAttributes().put("width", width);
if(height!=null)
component.getAttributes().put("height", height);
if(debugMode!=null)
component.getAttributes().put("debugMode", debugMode);
if(registerWithJS!=null)
component.getAttributes().put("registerWithJS", registerWithJS);<P>} 
public String getComponentType() { 
return "chart"; 
} 
public String getRendererType() {
// null means the component renders itself 
return null; 
} 
} <P>

 

UIChart.java

 

<P>package charts;
import java.io.IOException;
import javax.faces.component.UIOutput;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
public class UIChart extends UIOutput {
public void encodeBegin(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 String chartId = (String)getAttributes().get("id");</P><P>  writer.startElement("div", this);
 writer.writeAttribute("id", chartId+"Div" , null);</P><P>  writer.writeAttribute("align","center",null); 
 writer.writeText("Chart.",null); <P>  writer.endElement("div");
<P> String chartSWF= (String)getAttributes().get("filename");
String url= (String)getAttributes().get("filename");
String xml= (String)getAttributes().get("xml");
String chartWidth= (String)getAttributes().get("width");
String chartHeight= (String)getAttributes().get("height");</P><P> String debugMode= (String)getAttributes().get("debugMode");
int debugModeInt = boolToNum(new Boolean(debugMode));</P><P> String registerWithJS= (String)getAttributes().get("registerWithJS");
int regWithJSInt = boolToNum(new Boolean(registerWithJS));<P>writer.startElement("script",this);
writer.writeAttribute("type","text/javascript",null);  
writer.writeText("var chart_"+chartId+" = new FusionCharts('"+chartSWF+"', '"+chartId+"', '"+chartWidth +"', '"+chartHeight+"', '"+ debugModeInt+"', '"+regWithJSInt+"');",null);<P>
if (xml==null || xml.equals(""))
writer.writeText("chart_"+chartId+".setDataURL(""+url+"");",null);
else 
writer.writeText("chart_"+chartId+".setDataXML(""+xml+"");",null);<P>// Finally render the chart
writer.writeText("chart_"+chartId+".render('"+chartId+"Div');",null);
}<P> public void encodeEnd(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 writer.endElement("script");
}
/**
    * Converts a Boolean value to int value<br>
    * 
    * @param bool Boolean value which needs to be converted to int value 
    * @return int value correspoding to the boolean : 1 for true and 0 for false
    */
  public int boolToNum(Boolean bool) {
int num = 0;
if (bool.booleanValue()) {
    num = 1;
}
return num;
}
}
<P>

 

4. After writing the java classes, we now have to use the new component in our JSF. Here is how we do that:

 

</P><FONT size=2><P><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> </P><P><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> </P><P><%@ taglib uri="http://localhost/" prefix="fc" %> </P><P><html> </P><P><head> </P><P><title>Show Custom Component</title> </P><P><script type="text/javascript" src="FusionCharts/FusionCharts.js"></P><P></script></P><P></head> </P><P><body> </P><P><f:view> </P><P><f:verbatim>This is JSF example</f:verbatim> </P><P><fc:fusioncharts chartId="MyChart" filename="FusionCharts/Column3D.swf" width="700" height="300" xml="<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>" debugMode="false" registerWithJS="false"> </P><P></fc:fusioncharts> </P><P></f:view> </P><P></body> </P><P></html> </P></FONT><P>

 

Do not forget to include FusionCharts.js present in the FusionCharts folder. This folder will also contain the swf files required to generate the chart. I have used the xml directly here. you could give the url to the xml also.

 

Here I have hard-coded the xml, you could get the xml from the backing bean also.

 

In case you have problems with the above code, please feel free to ask questions.

 

Srividya

 

 

 

 

 

[Adi adavi]

Hi,I have tried it out in my application. To use FusionCharts with JSF, you would need to create a Component. I created a component ChartTag. Let me describe how you have to do it. ( I am assuming that you have a JSF application atleast an empty one)

 

1. Create a charts.tld file in WEB-INF folder with the following contents:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?> </P><P><!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd"> </P><P><taglib> </P><P><tlib-version>1.0</tlib-version> </P><P><jsp-version>1.2</jsp-version> </P><P><short-name>fc</short-name> </P><P><uri>http://localhost/</uri> </P><P><tag> </P><P><name>fusioncharts</name> </P><P><tag-class>charts.ChartTag</tag-class> </P><P><body-content>JSP</body-content> </P><P><attribute></P><P><name>filename</name></P><P></attribute></P><P><attribute></P><P><name>url</name></P><P></attribute></P><P><attribute></P><P><name>xml</name></P><P></attribute> </P><P><attribute></P><P><name>chartId</name></P><P></attribute></P><P><attribute></P><P><name>width</name></P><P></attribute></P><P><attribute></P><P><name>height</name></P><P></attribute></P><P><attribute></P><P><name>debugMode</name></P><P></attribute></P><P><attribute></P><P><name>registerWithJS</name></P><P></attribute></P><P></tag> </P><P></taglib> </FONT></P><P>

 

2. Modify faces-config.xml present in WEB-INF folder to have the following text:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?></P><P><!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"</P><P>"http://java.sun.com/dtd/web-facesconfig_1_1.dtd"></P><P><faces-config></P><P><component></P><P><component-type>chart</component-type></P><P><component-class>charts.UIChart</component-class></P><P></component></P><P><lifecycle/></P><P><application></P><P><locale-config/></P><P></application></P><P><factory/></P><P></faces-config></P></FONT><P>

 

3. Now we need to write the java classes for charts.ChartTag and charts.UIChart. Create a folder called charts and write the following java classes:

 

ChartTag.java

 

<P>package charts;
import javax.faces.component.UIComponent; 
import javax.faces.webapp.UIComponentTag; 
public class ChartTag extends UIComponentTag{ <P>String chartId;
String filename;
String xml;
String url;
String width;
String height;
String debugMode;
String registerWithJS;

public String getChartId() { 
 return chartId;
}<P> public void setChartId(String id) {
 this.chartId= id;
}
public String getFilename() { 
 return filename;
}<P> public void setFilename(String filename){
 this.filename= filename;
}
public String getXml() { 
 return xml;
}<P> public void setXml(String xml){
 this.xml= xml;
}
public String getUrl() { 
 return url;
}<P> public void setUrl(String url) {
 this.url= url;
}
public String getWidth() { 
 return width;
}<P> public void setWidth(String width) {
 this.width= width;
}
public String getHeight() { 
 return height;
}<P> public void setHeight(String height) {
 this.height= height;
}
public String getDebugMode() { 
 return debugMode;
}<P> public void setDebugMode(String debugMode) {
 this.debugMode= debugMode;
}
public String getRegisterWithJS() { 
 return registerWithJS;
}<P> public void setRegisterWithJS(String registerWithJS) {
 this.registerWithJS= registerWithJS;
}<P>public void release() { 
// the super class method should be called 
super.release(); 
chartId=null;
filename=null;
xml=null;
url=null;
width=null;
height=null;
debugMode=null;
registerWithJS=null;
} 
protected void setProperties(UIComponent component) {
// the super class method should be called 
super.setProperties(component); 
if(chartId != null)
component.getAttributes().put("id", chartId);
if(filename != null)
component.getAttributes().put("filename", filename);<P>if(xml!=null)
component.getAttributes().put("xml", xml);
if(url!=null)
component.getAttributes().put("url", url);
if(width!=null)
component.getAttributes().put("width", width);
if(height!=null)
component.getAttributes().put("height", height);
if(debugMode!=null)
component.getAttributes().put("debugMode", debugMode);
if(registerWithJS!=null)
component.getAttributes().put("registerWithJS", registerWithJS);<P>} 
public String getComponentType() { 
return "chart"; 
} 
public String getRendererType() {
// null means the component renders itself 
return null; 
} 
} <P>

 

UIChart.java

 

<P>package charts;
import java.io.IOException;
import javax.faces.component.UIOutput;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
public class UIChart extends UIOutput {
public void encodeBegin(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 String chartId = (String)getAttributes().get("id");</P><P>  writer.startElement("div", this);
 writer.writeAttribute("id", chartId+"Div" , null);</P><P>  writer.writeAttribute("align","center",null); 
 writer.writeText("Chart.",null); <P>  writer.endElement("div");
<P> String chartSWF= (String)getAttributes().get("filename");
String url= (String)getAttributes().get("filename");
String xml= (String)getAttributes().get("xml");
String chartWidth= (String)getAttributes().get("width");
String chartHeight= (String)getAttributes().get("height");</P><P> String debugMode= (String)getAttributes().get("debugMode");
int debugModeInt = boolToNum(new Boolean(debugMode));</P><P> String registerWithJS= (String)getAttributes().get("registerWithJS");
int regWithJSInt = boolToNum(new Boolean(registerWithJS));<P>writer.startElement("script",this);
writer.writeAttribute("type","text/javascript",null);  
writer.writeText("var chart_"+chartId+" = new FusionCharts('"+chartSWF+"', '"+chartId+"', '"+chartWidth +"', '"+chartHeight+"', '"+ debugModeInt+"', '"+regWithJSInt+"');",null);<P>
if (xml==null || xml.equals(""))
writer.writeText("chart_"+chartId+".setDataURL(""+url+"");",null);
else 
writer.writeText("chart_"+chartId+".setDataXML(""+xml+"");",null);<P>// Finally render the chart
writer.writeText("chart_"+chartId+".render('"+chartId+"Div');",null);
}<P> public void encodeEnd(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 writer.endElement("script");
}
/**
    * Converts a Boolean value to int value<br>
    * 
    * @param bool Boolean value which needs to be converted to int value 
    * @return int value correspoding to the boolean : 1 for true and 0 for false
    */
  public int boolToNum(Boolean bool) {
int num = 0;
if (bool.booleanValue()) {
    num = 1;
}
return num;
}
}
<P>

 

4. After writing the java classes, we now have to use the new component in our JSF. Here is how we do that:

 

</P><FONT size=2><P><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> </P><P><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> </P><P><%@ taglib uri="http://localhost/" prefix="fc" %> </P><P><html> </P><P><head> </P><P><title>Show Custom Component</title> </P><P><script type="text/javascript" src="FusionCharts/FusionCharts.js"></P><P></script></P><P></head> </P><P><body> </P><P><f:view> </P><P><f:verbatim>This is JSF example</f:verbatim> </P><P><fc:fusioncharts chartId="MyChart" filename="FusionCharts/Column3D.swf" width="700" height="300" xml="<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>" debugMode="false" registerWithJS="false"> </P><P></fc:fusioncharts> </P><P></f:view> </P><P></body> </P><P></html> </P></FONT><P>

 

Do not forget to include FusionCharts.js present in the FusionCharts folder. This folder will also contain the swf files required to generate the chart. I have used the xml directly here. you could give the url to the xml also.

 

Here I have hard-coded the xml, you could get the xml from the backing bean also.

 

In case you have problems with the above code, please feel free to ask questions.

 

Srividya

 

 

 

 

 

 

 

 

I am using JSF 2.0, tried to run the above example, I am not getting the fusion chart displayed in the browser. there is a browser error that says "FusionCharts is not defined". The browser displays "This is fusion Chart" on Left top and "Chart" in the middle of the browser but does'nt display the fusion chart. I have copied fusionChart.js and all Swf files into Fusioncharts folder.

 

Please advice

 

 

Thanks,

 

Adi.

 

 

 

[Guest Bindhu]

Hi,

 

Can you please verify the path to the FusionCharts.js file?

 

Seems like either the path is wrong or there is no FusionCharts.js file at the mentioned path.

 

Hope this helps!

[Adi adavi]

Thanks for the tip and solution. I have now added support for ValueBinding from Backing bean in the tag library.

 

Changes made:

 

1. xml now is no longer an attribute. You can provide the xml as part of the body of the tag.

 

2. fc:render and fc:renderHTML are the tags to be used.

 

3. Binding value can be used for any attribute or the body value.

 

Attached you can find: fusionchartstaglib.zip containing the fusionchartstaglib.jar

 

Srividya

 

 

Hi,

 

 

Can you please attach complete code including jsp files and source files for ValueBinding from Backing bean example. Please help me out

 

 

 

 

Thanks,