How to Implementation JSF Chart in JSF
Many times we have requirement of displaying data using charts in our web application. Jsf-comp is a opensource library which I have used in my JSF application. I have used this for simple bar charts and using it is very simple. Below I have explained steps to use it in your application to create a bar chart.
Here I assume you have already had a jsf application running. If you are new to JSF, please read the earlier post JSF tutorial For Beginner .
For the bar chart demo we’ll create a request scoped bean, and a simple jsf view. The data displayed in charts will be some predefined values.
Step 1: Configuration.
Before starting the code download jsf-comp jar file ( jfreechart-1.0.5.jar) from url:
http://sourceforge.net/projects/jfreechart/files/
Copy the jar to web-inf/lib directrory.
Edit your web.xml file to include following:
<servlet>
<servlet-name>Chartlet</servlet-name>
<servlet-class>net.sf.jsfcomp.chartcreator.Chartlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Chartlet</servlet-name>
<url-pattern>*.chart</url-pattern>
</servlet-mapping>
Step 2: Backing bean part.
To create any chart we need object of DefaultCategoryDataset (org.jfree.data.category.DefaultCategoryDataset)
DefaultCategoryDataset categoryDataSet=new DefaultCategoryDataset();
We set graph values in this object using addValue function. The functions is shown below (create a Weather.java and include following function with appropriate getter and setter methods) :
package com.sa.medisys.banamco.chart;
import org.jfree.data.category.DefaultCategoryDataset;
public class Weather {
public Weather(){
}
public DefaultCategoryDataset getGraphData() {
DefaultCategoryDataset categoryDataSet=null;
try{
categoryDataSet = new DefaultCategoryDataset();
Double currentTemperature= 25.3;
//Easy AdSense by Unreal
Double minTemperature=10.2;
Double maxTemperature=45.0;
Double avgTemperature=30.0;
categoryDataSet.addValue(maxTemperature,"","Highest Temperature");
categoryDataSet.addValue(minTemperature,"","Lowest Temperature");
categoryDataSet.addValue(avgTemperature,"","Average Temperature");
categoryDataSet.addValue(currentTemperature,"","current Temperature");
return categoryDataSet;
}catch(Exception sq){
System.out.println("exception2 " +sq);
sq.printStackTrace();
return null;
}
}
}
Define the bean in the faces-config.xml file as Managed Bean:
<managed-bean>
<managed-bean-name>weather</managed-bean-name>
<managed-bean-class> com.sa.medisys.banamco.chart.Weather</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
Now in xhtml file you can use the chart library as follows:
Include tag library definition:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:ch="http://sourceforge.net/projects/jsf-comp">
<ui:composition >
<h:outputText value="chart Display" />
<ch:chart id="pichart" datasource="#{weather.graphData}" type="bar" background="orange" orientation="vertical" is3d="false" title="Compare the Temperatures" xlabel="" ylabel="Temperature" height="300" width="500"></ch:chart>
</ui:composition>
</html>
Run the jsf file to see the chart.
Tuesday, January 26, 2010
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment