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 Weatherbean.java and include following function with appropriate getter and setter methods) :

publicDefaultCategoryDataset getGraphData() {

DefaultCategoryDataset categoryDataSet=null;

try{

categoryDataSet = newDefaultCategoryDataset();

Double currentTemperature= 25.3;

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”);

returncategoryDataSet;

}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>weatherBean</managed-bean-name>

<managed-bean-class>WeatherBean</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

Now in jsp file you can use the chart library as follows:

Include tag library definition:

<%@taglib uri=”http://sourceforge.net/projects/jsf-comp” prefix=”c” %>

<c:chart datasource=”#{weatherBean.graphData}” is3d=”false” title=”Compare the Temperatures” xlabel=”” ylabel=”Temperature” height=”300″ width=”500″></c:chart>

Run the jsf file to see the chart.