Using JFreeChart with JSP/Servlet

Require JFreeChart http://www.jfree.org/jfreechart/

Concept to use JFreeChart in JSP.

1. Create a servlet to view the chart.

Code:

/**
 * Created on Feb 3, 2011
 */
package org.jfree.chart.servlet;

import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.keypoint.PngEncoder;

/**
 * Title: ChartViewer.java</p>
 * Description: Controller class to display chart image</p>
 * Author: [email protected]
 */
public class ChartViewer extends HttpServlet {

  private static final long serialVersionUID = 1L;
 
  //Process the HTTP Get request
  public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
    String imageName = request.getParameter("ImageName");
    // get the chart from session
    HttpSession session = request.getSession();
    BufferedImage chartImage = (BufferedImage) session.getAttribute(imageName);
   
    // set the content type so the browser can see this as a picture
    response.setContentType("image/png");
   
    // send the picture
    PngEncoder encoder = new PngEncoder(chartImage, false, 0, 9);
    response.getOutputStream().write(encoder.pngEncode());
 
  }
 
  //Process the HTTP Post request
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
  }
}

2. Create a model class to produce the chart and image map.

Code:

/**
 * Created on Feb 3, 2011
 */
package org.jfree.chart.util;

import java.awt.image.BufferedImage;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.jfree.chart.ChartRenderingInfo;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.entity.StandardEntityCollection;

/**
 * Title: ChartProducer.java
 * Description: Model class to produce chart and image map
 * Author: [email protected]
 * Version 1.0.0 New release
 * Version 1.1.0 Update 21-Feb-11, Get a new chart when user call getChartViewer()
 */
public abstract class ChartProducer {

  /** Variables declaration */
  public JFreeChart chart;
  private String imageName;
  private String imageMap;
  public abstract JFreeChart getChart();
  public abstract JFreeChart getChart(String title);
 
  /**
  * Get the chart viewer information
  * @param request
  * @param response
  */
  public String getChartViewer(HttpServletRequest request, HttpServletResponse response) {
    // Create the chart...
    chart = getChart();
    return getChartViewer(chart, request, response);
  }
 
  /**
  * Get the chart viewer information
  * @param request
  * @param response
  */
  public String getChartViewer(String title, HttpServletRequest request, HttpServletResponse response) {
    // Create the chart...
    chart = getChart(title);
    return getChartViewer(chart, request, response);
  }
 
  /**
  * Get the chart viewer information
  * @param chart
  * @param request
  * @param response
  */
  private String getChartViewer(JFreeChart chart, HttpServletRequest request, HttpServletResponse response) {
 
    ChartRenderingInfo info = null;
    HttpSession session = request.getSession();
    try {
   
      // Create the RenderingInfo object
      response.setContentType("text/html");
      info = new ChartRenderingInfo(new StandardEntityCollection());
      BufferedImage chartImage = chart.createBufferedImage(640, 400, info);
     
      // Putting chart as BufferedImage in the session, 
      // thus making it available for the image reading action.
      session.setAttribute(imageName, chartImage);
     
      // Create the image map support tool tip and drill down capability
      PrintWriter writer = new PrintWriter(response.getWriter());
      ChartUtilities.writeImageMap(writer, imageMap, info, true);
     
      writer.flush();
   
    }
    catch (Exception e) {
      System.out.println(e);
    }
   
    // Refer to chart viewer servlet declared in web.xml deployment descriptor
    String url = request.getRequestURL().toString();
    String urlInfo = url.substring(0, url.lastIndexOf(':'));
    int port = request.getServerPort();
    urlInfo += ":"+String.valueOf(port);
    urlInfo += request.getContextPath();
    String chartViewer = urlInfo + "/chartViewer?ImageName="+imageName;
    return chartViewer;
  }
 
  /**
  * Constructor
  * @param vImageName
  * @param vImageMap
  */
  public ChartProducer(String vImageName, String vImageMap) {
    imageName = vImageName;
    imageMap = vImageMap;
  }
 
  /**
  * Constructor
  */
  public ChartProducer() {
  }
 
}


3. Create a child model class to create the chart.

Code:

/*
 * Created on Feb 3, 2011
 */
package org.jfree.chart.demo;

import java.awt.Color;
import java.awt.GridLayout;
import java.awt.image.BufferedImage;
import java.text.NumberFormat;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.labels.StandardPieSectionLabelGenerator;
import org.jfree.chart.plot.PiePlot;
import org.jfree.chart.urls.StandardPieURLGenerator;
import org.jfree.chart.util.ChartProducer;
import org.jfree.data.general.DefaultPieDataset;

/**
 * Title: Pie3DChart.java</p>
 * Description: Model class to create chart</p>
 * Author: [email protected]
 * Engine: JFreeChart 1.0.13
 * Caller: Pie3DDemo.jsp
 * Version 1.0.0 New release
 * Version 1.1.0 Update 21-Feb-11, Remove getChart() from constructor, but get it when user call getChartViever()
 */
public class Pie3DChart extends ChartProducer {

  private static final String IMAGE_NAME = "pieImage";
  private static final String IMAGE_MAP = "pieImageMap";
 
  // constructor
  public Pie3DChart() {
    super(IMAGE_NAME, IMAGE_MAP);
  }
 
  /**
  * Produce pie chart 3D.
  * @return chart.
  */
  public JFreeChart getChart() {
    // create the dataset...
    DefaultPieDataset dataset = getDataset();
    // create the chart...
    JFreeChart chart = ChartFactory.createPieChart3D(
          "Pie3DChart",        // chart title
          dataset,            // data
          true,                // include legend
          true,       // tool tips
          false       // url
    );
    return getChart(chart);
  }
 
  /**
  * Produce pie chart 3D.
  * @param title
  * @return chart.
  */
  public JFreeChart getChart(String title) {
    // create the dataset...
    DefaultPieDataset dataset = getDataset();
    // create the chart...
    JFreeChart chart = ChartFactory.createPieChart3D(
          title,              // chart title
          dataset,          // data
          true,              // include legend
          true,           // tool tips
          false           // url
    );
    return getChart(chart);
  }
 
  /**
  * Produce pie chart 3D.
  * @param chart
  * @return chart.
  */
  private JFreeChart getChart(JFreeChart chart) {
    // set the background color for the chart...
    chart.setBackgroundPaint(new Color(222, 222, 255));
   
    PiePlot plot = (PiePlot) chart.getPlot();
    plot.setBackgroundPaint(Color.white);
    plot.setLabelGenerator(
    new StandardPieSectionLabelGenerator(
      "{0} = {2}", NumberFormat.getNumberInstance(), NumberFormat.getPercentInstance()
    ));
    plot.setNoDataMessage("No data available");
   
    // set color transparency...
    plot.setForegroundAlpha(0.6f);
   
    // set drilldown capability...
    plot.setURLGenerator(new StandardPieURLGenerator("Bar3DDemo.jsp","section"));
   
    // OPTIONAL CUSTOMISATION COMPLETED.
    return chart;
  }
 
  /**
  * Create a pie dataset.
  * @return dataset.
  */
  private static DefaultPieDataset getDataset() {
    // period keys...
    String[] section = new String[] {
    "Jan","Feb","Mar","Apr","May","Jun",
    "Jul","Aug","Sep","Oct","Nov","Dec"
    };
   
    // data...
    double[] data = new double[section.length];
    for (int i = 0; i < data.length; i++) {
      data[i] = 10 + (Math.random() * 10);
    }
   
    // create the dataset...
    DefaultPieDataset dataset = new DefaultPieDataset();
    for (int i = 0; i < data.length; i++) {
      dataset.setValue(section[i], data[i]);
    }
    return dataset;
  }
 
  /**
  * For testing only, display chart for Java application
  * @param args
  * @throws Exception
  */
  public static void main(String[] args) throws Exception {
    JPanel p = new JPanel(new GridLayout(1,1,1,1));
    BufferedImage bimg = Pie3DChart.getChart().createBufferedImage(480, 300);
    ImageIcon icon = new ImageIcon(bimg);
    p.add(new JLabel(icon));
    JFrame f = new JFrame("Pie3DChart");
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    f.getContentPane().add(new JScrollPane(p));
    f.pack();
    f.setLocationRelativeTo(null);
    f.setVisible(true);
  }
 
}

4. Create a servlet mapping in web.xml

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
    "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">

<web-app>
  <servlet>
    <servlet-name>ChartViewer</servlet-name>
    <servlet-class>org.jfree.chart.servlet.ChartViewer</servlet-class>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>ChartViewer</servlet-name>
    <url-pattern>/chartViewer</url-pattern>
  </servlet-mapping>

</web-app>

5. Create Pie3DDemo.jsp file. (require overlib javascript)

Code:

<html>
<head>
<script type="text/javascript" src="./scripts/overlib_mini.js"></script>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000"></div>
<title>Pie3DChart Demo</title>
</head>

<jsp:useBean id="myChart" class="org.jfree.chart.demo.Pie3DChart"/>
<%
  String productName = request.getParameter("ProductName");
  String chartImage = null;
  if (productName != null) {
    chartImage = myChart.getChartViewer(productName, request, response);
  }
%>

<body>
<table border=0>
<tr>
  <td width=170 valign="top">
  <form id="form1" name="form1" action="Pie3DDemo.jsp">
  <table border=0>
  <tr>
    <td>
      Fruit:<br>
      <select name="ProductName">
        <option value="APPLE">APPLE</option>
        <option value="BANANA">BANANA</option>
        <option value="ORANGE">ORANGE</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit" name="Submit" value="Submit">
    </td>
  </tr>
  </table>
  </form>
  </td>
  <td>
  <h2>Pie3DChart Demo</h2>
 
  <%if (chartImage != null) {%>
    <img src="<%=chartImage%>" border=0 usemap="#pieImageMap">
  <%}%>
 
  <p>
  The chart shown above has tooltips and drilldown enabled.<br>
  Chart image save to output stream instead of filesystem.<br>
  <a href="MultiChartDemo.jsp">Multi Chart Demo</a>
  </p>
 
  </td>
</tr>
</table>

</body>
</html>

6. Build togather war file
7. Deploy and test

To display multiple chart in the same page just create another child class

Code:

/*
 * Created on Feb 3, 2011
 */
package org.jfree.chart.demo;

import java.awt.Color;
import java.awt.GridLayout;
import java.awt.image.BufferedImage;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.axis.ValueAxis;
import org.jfree.chart.labels.StandardCategoryItemLabelGenerator;
import org.jfree.chart.labels.StandardCategoryToolTipGenerator;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer3D;
import org.jfree.chart.renderer.category.CategoryItemRenderer;
import org.jfree.chart.urls.StandardCategoryURLGenerator;
import org.jfree.chart.util.ChartProducer;
import org.jfree.data.category.DefaultCategoryDataset;

/**
 * Title: Bar3DChart.java</p>
 * Description: Model class to create a bar chart</p>
 * Author: [email protected]
 * Engine: JFreeChart 1.0.13
 * Caller: Bar3DDemo.jsp
 */
public class Bar3DChart extends ChartProducer {
   
  private static final String IMAGE_NAME = "barImage";
  private static final String IMAGE_MAP = "barImageMap";
 
  /**
  * Constructor.
  */
  public Bar3DChart() {
    super(IMAGE_NAME, IMAGE_MAP);
  }
 
  /**
  * Produce single bar chart 3D.
  * @return chart.
  */
  public JFreeChart getChart() {
    // create the dataset...
    DefaultCategoryDataset dataset = getDataset();
   
    // create the chart...
    chart = ChartFactory.createBarChart3D(
      "Bar3DChart", // chart title
      "Category",  // domain axis label
      "Value",      // range axis label
      dataset,      // data
      PlotOrientation.VERTICAL,
      false,        // include legend
      false,        // tooltips
      false        // urls
    );
    return getChart(chart);
  }
 
  /**
  * Produce single bar chart 3D.
  * @param title
  * @return chart.
  */
  public JFreeChart getChart(String title) {
    // create the dataset...
    DefaultCategoryDataset dataset = getDataset();
   
    // create the chart...
    chart = ChartFactory.createBarChart3D(
      title,        // chart title
      "Category",  // domain axis label
      "Value",      // range axis label
      dataset,      // data
      PlotOrientation.VERTICAL,
      false,        // include legend
      false,        // tooltips
      false        // urls
    );
    return getChart(chart);
  }
 
  /**
  * Produce single bar chart 3D.
  * @param chart
  * @return chart.
  */
  private JFreeChart getChart(JFreeChart chart) {
    // DO SOME OPTIONAL CUSTOMIZATION OF THE CHART...
   
    // set the background color for the chart...
    chart.setBackgroundPaint(new Color(222, 222, 255));
   
    // get a reference to the plot for further customization...
    CategoryPlot plot = chart.getCategoryPlot();
    plot.setNoDataMessage("NO DATA!");
   
    // display a chart label
    final CategoryItemRenderer renderer = new BarRenderer3D();
    renderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
    renderer.setBaseItemLabelsVisible(true);
   
    // set URL link for drilldrown capability...
    renderer.setBaseItemURLGenerator(new StandardCategoryURLGenerator("Pie3DDemo.jsp","series","categories"));
    renderer.setBaseToolTipGenerator(new StandardCategoryToolTipGenerator());
    renderer.setBaseItemLabelsVisible(true);
    plot.setRenderer(renderer);
   
    // change the margin at the top of the range axis...
    ValueAxis rangeAxis = plot.getRangeAxis();
    rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
    rangeAxis.setLowerMargin(0.15);
    rangeAxis.setUpperMargin(0.15);
   
    // OPTIONAL CUSTOMISATION COMPLETED.
    return chart;
  }
 
  /**
  * Create a single bar dataset.
  * @return dataset.
  */
  private DefaultCategoryDataset getDataset() {
    // create group...
    String[] series = new String[] {"Series1"};
   
    // create peroid...
    String[] categories = new String[] {
      "Jan","Feb","Mar","Apr","May","Jun",
      "Jul","Aug","Sep","Oct","Nov","Dec"
    };
   
    // create data...
    double mod = 0;
    double[][] data = new double[series.length][categories.length];
    for (int i = 0; i < data.length; i++) {
    for (int j = 0; j < data[0].length; j++) {
      mod = (Math.random() * 10) - 2;
      mod /= Math.abs(mod);
      data[i][j] = mod * (Math.random() * 10);
    }
    }
   
    // create the dataset...
    DefaultCategoryDataset dataset = new DefaultCategoryDataset();
    for (int i = 0; i < series.length; i++)
    for (int j = 0; j < categories.length; j++)
    dataset.addValue(data[i][j], series[i], categories[j]);
   
    return dataset;
  }
 
  /**
  * For testing only, display chart for Java application
  * @param args
  * @throws Exception
  */
  public static void main(String[] args) throws Exception {
    Bar3DChart barChart = new Bar3DChart();
    JPanel p = new JPanel(new GridLayout(1,1,1,1));
    BufferedImage bimg = barChart.getChart().createBufferedImage(640, 400);
    ImageIcon icon = new ImageIcon(bimg);
    p.add(new JLabel(icon));
    JFrame f = new JFrame("Bar3DChart");
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    f.getContentPane().add(new JScrollPane(p));
    f.pack();
    f.setLocationRelativeTo(null);
    f.setVisible(true);
  }
 
}

Create another jsp: MultiChartDemo.jsp

Code:

<html>
<head>
<script type="text/javascript" src="./scripts/overlib_mini.js"></script>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000"></div>
<title>Multi Chart Demo</title>
</head>

<%
  String productName = request.getParameter("ProductName");
  String chart1 = null;
  String chart2 = null;
%>
<jsp:useBean id="myChart1" class="org.jfree.chart.demo.Pie3DChart"/>
<%
  if (productName != null) {
    chart1 = myChart1.getChartViewer(productName, request, response);
  }
%>
<jsp:useBean id="myChart2" class="org.jfree.chart.demo.Bar3DChart"/>
<%
  if (productName != null) {
    chart2 = myChart2.getChartViewer(productName, request, response);
  }
%>

<body>
<table border=0>
<tr>
  <td width=170 valign="top">
  <form id="form1" name="form1" action="MultiChartDemo.jsp">
  <table border=0>
  <tr>
    <td>
      Fruit:<br>
      <select name="ProductName">
        <option value="APPLE">APPLE</option>
        <option value="BANANA">BANANA</option>
        <option value="ORANGE">ORANGE</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit" name="Submit" value="Submit">
    </td>
  </tr>
  </table>
  </form>
  </td>
  <td>
  <h2>Multi Chart Demo</h2>
 
  <%if (chart2 != null) {%>
    <img src="<%=chart2%>" border=0 usemap="#barImageMap">
  <%}%>
  <%if (chart1 != null) {%>
    <img src="<%=chart1%>" border=0 usemap="#pieImageMap">
  <%}%>
 
  <p>
  The chart shown above has tooltips and drilldown enabled.<br>
  Chart image save to output stream instead of filesystem.<br>
  </p>
 
  </td>
</tr>
</table>

</body>
</html>

Or you can read this topic in my forum http://redtag.thai-forum.net/t3-topic