Home > Uncategorized > Implementing Charts in JSF using Jsf-Comp library

Implementing Charts in JSF using Jsf-Comp library

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:


Copy the jar to web-inf/lib directrory.

Edit your web.xml file to include following:









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;


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


}catch(Exception sq){

System.out.println(“exception2 ” +sq);


return null;



Define the bean in the faces-config.xml file as 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.

Categories: Uncategorized Tags:
  1. john
    July 23rd, 2010 at 12:30 | #1

    Hai I done it same as it is mentioned above.But My jsp page is giving error “unable to load class for jsp”.class not found excetion in stack trace.As I am using jsf core,html tags for other
    jsp pages,How should data source object be used in jsp pages with prefix=”h” ,”f” and “c” tags in single jsp file.which urls and which tags should be used ?

  2. samraj
    January 13th, 2010 at 15:54 | #2

    I m working on jsf , now i need jsf charts, i tried this
    but here is not working properly,
    ERROR ON:-
    Can not find the tag library descriptor for “http://sourceforge.net/projects/jsf-comp”

  3. September 9th, 2009 at 20:17 | #3

    @Cagatay Civici
    Thanks Cagatay for your inputs. We will look into PrimeFaces Charts

  4. September 9th, 2009 at 18:09 | #4

    Hi I’m the author JSFChartCreator in jsf-comp. It’s not actively developed at the moment and currently replaced by PrimeFaces. I strongly suggest migrating to PrimeFaces Charts.

  5. Gauri
    September 4th, 2009 at 13:18 | #5

    Very Precise and practical tutorial.
    I am new to JSF and I follow your blogs regularly.
    – Thanks

  1. No trackbacks yet.