Wednesday, September 4, 2013

Add a JFreeChart Pie Chart to a JSF Page

JFreeChart is an open-source java library which can be used to create interactive charts of various types. It is widely used in java swing applications. It has the capability to export the generated chart as an image. We can use this ability to use this to display the chart as an image in a JSF page.

☞ JFreeChart is distributed under the LGPL license and so you can use it in your own project without
    publishing your source code.

In this example you will learn to add a JFreeChart chart to your JSF page. You need RichFaces added to your JSF project.

☯ Go to the download page of JFreeChart website to download JFreeChart libraries.

☯ Extract the zip file and open the lib folder. You will see several libraries inside the folder. Just 
    add jcommon-1.0.18.jar and jfreechart-1.0.15.jar to your project.

☯ Now you are ready to use JFreeChart with your project.

☯ Create your JSF managed bean as below.
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Locale;
import javax.faces.bean.ManagedBean;
import javax.imageio.ImageIO;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.data.general.DefaultPieDataset;

@ManagedBean(name = "chartDemo")
public class ChartDemo {
  public void drawChart(OutputStream out, Object data) throws IOException {
    DefaultPieDataset dataset = new DefaultPieDataset();
    dataset.setValue("Item1", 10);
    dataset.setValue("Item2", 15);
    dataset.setValue("Item3", 8);
    dataset.setValue("Item4", 12.5);
    dataset.setValue("Item5", 30);
    JFreeChart chart = ChartFactory.createPieChart("Sales", dataset, true, true, Locale.ENGLISH);
    BufferedImage bufferedImage = chart.createBufferedImage(300, 300);
    ImageIO.write(bufferedImage, "gif", out);
  }
}

☯ We are going to use the Richfaces <a4j:mediaOutput> tag to show the output. So your xhtml
     page will looks like this.

<!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:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

<h:head></h:head>
<body>
    <rich:panel>
        <a4j:mediaOutput style="width:200px;height:200px;" element="img"
  cacheable="false" session="true" createContent="#{chartDemo.drawChart}"
     mimeType="image/gif" />
    </rich:panel>
</body>
</html>

That is all. Run the project and you will see an output like below.


















Note:-
This note is not relative to JFreeChart. But if you are using eclipse and if you got an error like below when you try to run your project it means your JFreeChart libraries are not added to your war file.
java.lang.ClassNotFoundException: org.jfree.data.general.PieDataset from [Module "deployment.RF1.war:main" from Service Module Loader]

To include these files in final deployment do following.
Right click the project ⇨ Properties ⇨ Deployment Assembly ⇨ Add ⇨ Java build path entries
Now select the  jcommon-1.0.18.jar and jfreechart-1.0.15.jar and click Finish. Then click Ok  to close the properties window. Now your deployment will work.

1 comment: