Chart and graph JSP / Servlet examples

Swiftchart to create your own chart and graph

New! Swiftbarcodes! Barcodes by Swiftchart
EAN, UPC and many more ...

Quick links : Get evaluation | Order

Bar Graph | Line Graph

JSP, Servlet examples and image maps (data drill down and data popup)

JSP example (JPG)

JSP example (PNG)

Servlet example

Image map example (data drill down and data popup)

Displaying text and chart images on the same page

Saving an image as a file

JSP example (JPG)

Please find further details on how to install the swiftchart_app class on our products page.

[1] Set the content type of the output. This will depend on the graphic format you choose.

contentType="image/jpeg"

[2] Import Swiftchart application and the graphic encoder. In this example we use the widely available Sun jpeg encoder.

import="swiftchart.swiftchart_app.*,com.sun.image.codec.jpeg.*"

[2] Make a new instance of swiftchart_app. The chart width and chart height are required when creating a new instance (eg 400,300).

swiftchart.swiftchart_app mychart= new swiftchart.swiftchart_app(400,300);

[3] Set the chart parameters.

mychart.setParam("chart_type","bar");

[5] Output the chart. This part will depend on the type of encoder you are using.

ServletOutputStream sos = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(sos);
encoder.encode(mychart.getChart());

Putting all together the JSP code will look like this:

JSP example (PNG)

This example shows how to generate PNG images, using Sun's Java Advanced Imaging (JAI) API. We suggest to use PNG rather than JPG since JPG is ideal for photographic images while PNG is ideal for charts and text. all modern browsers do support PNG, but some older browser versions might not.

Servlet example

Please find further details on how to install the swiftchart_app class on our products page.

[1] Import Swiftchart application and the graphic encoder. In this example we use the widely available Sun jpeg encoder.

import swiftchart.swiftchart_app.*;
import com.sun.image.codec.jpeg.*;

[2] Make a new instance of swiftchart_app. The chart width and chart height are required when creating a new instance (eg 400,300).

swiftchart.swiftchart_app mychart= new swiftchart.swiftchart_app(400,300);

[3] Set the chart parameters.

mychart.setParam("chart_type","bar");

[4] Set the content type of the output. This will depend on the graphic format you choose.

sos.setContentType("image/jpeg");

[5] Output the chart. This part will depend on the type of encoder you are using.

JPEGImageEncoder encoder =
JPEGCodec.createJPEGEncoder(sos.getOutputStream());
encoder.encode(mychart.getChart());

Putting all together the Servlet code will look like this:

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import com.sun.image.codec.jpeg.*;
import swiftchart.swiftchart_app.*;

public class mychart extends HttpServlet {
public void doGet (HttpServletRequest req, HttpServletResponse sos)
throws ServletException, IOException
{
swiftchart.swiftchart_app mychart= new swiftchart.swiftchart_app(400,300);
mychart.setParam("x_axis_font_orientation","HORIZONTAL");
mychart.setParam("chart_type","bar");
mychart.setParam("applet_bg","EEEEEE");
mychart.setParam("chart_bg","FFFFFF");
mychart.setParam("title_text","Bar chart");
mychart.setParam("title_font_color","000000");
mychart.setParam("title_font_size","18");
mychart.setParam("x_axis_font_color","000000");
mychart.setParam("x_axis_font_size","12");
mychart.setParam("y_axis_font_color","000000");
mychart.setParam("y_axis_font_size","12");
mychart.setParam("legend_position","RIGHT");
mychart.setParam("legend_font_color","000000");
mychart.setParam("legend_font_size","12");
mychart.setParam("data_value","NONE");
mychart.setParam("data_value_font_color","000000");
mychart.setParam("data_value_font_size","12");
mychart.setParam("grid_line","Y");
mychart.setParam("grid_line_color","999999");
mychart.setParam("x_value","Jan,Feb,Mar,Apr,May,Jun");
mychart.setParam("s1_value","22,34,38,29,32,28");
mychart.setParam("s1_label","Serie 1");
mychart.setParam("s1_color","6699CC");
sos.setContentType("image/jpeg");
JPEGImageEncoder encoder=
JPEGCodec.createJPEGEncoder(sos.getOutputStream());
encoder.encode(mychart.getChart());
}
public String getServletInfo() {
return "Swiftchart demo";
}
}

Image map example (data drill down and data popup)

Image maps allow to make static images fulfil dynamic actions. The Swiftchart application allows to generate image maps enabling data drill down and displaying popup values.

The actual function to get an image map is:

getImageMap()

Since the image map and the actual image has to be created the Swiftchart application has to be called twice. Once for the actual image and once for the image map data.

The following example shows how to implement image maps for JSP. The first JSP script calls the second script twice, once to generate the image map and the second time to generate the image. A variable is passed to the second script to tell the second scripts if an image map or an image should be generated.

Script 1 (example_1):

Script 2 (example_2):

<%@ page session="false"%> <%@
page import="java.awt.*,java.awt.image.*,
com.sun.image.codec.jpeg.*,java.util.*,swiftchart.swiftchart_app.*"
%>

<%
swiftchart.swiftchart_app x1= new swiftchart.swiftchart_app(400,300);

x1.setParam("popup","Y");
x1.setParam("popup_bg_color","FFFFCC");
x1.setParam("popup_border_color","000000");
x1.setParam("popup_font_color","000000");
x1.setParam("popup_font_size","12");
x1.setParam("popup_font_type","Courier");
x1.setParam("popup_text","Serie: @se@, X-Value: @xv@, Value: @da@");
x1.setParam("chart_type","bar3d");
x1.setParam("grid_line_hor","Y");
x1.setParam("grid_line_hor_color","999999");
x1.setParam("grid_line_hor_type","0");
x1.setParam("grid_line_ver","Y");
x1.setParam("grid_line_ver_color","999999");
x1.setParam("grid_line_ver_type","0");
x1.setParam("applet_bg","FFFFFF");
x1.setParam("chart_bg","FFFFFF");
x1.setParam("title_text","Popup labels example");
x1.setParam("title_font_color","000000");
x1.setParam("title_font_size","16");
x1.setParam("title_font_style","BOLD");
x1.setParam("legend_position","right");
x1.setParam("legend_font_size","12");
x1.setParam("data_value","NONE");
x1.setParam("x_value","Indonesia,China,India,Brazil");
x1.setParam("s1_value","10,52,14,17");
x1.setParam("s1_label","Rice");
x1.setParam("s1_line_marker","n");
x1.setParam("s1_line_WEIGHT","2");
x1.setParam("s2_value","20,5,22,26");
x1.setParam("s2_label","Potatoes");
x1.setParam("s2_line_marker_type","8");
x1.setParam("s2_line_WEIGHT","2");
x1.setParam("s3_value","39,36,18,35");
x1.setParam("s3_label","Wheat");
x1.setParam("s3_line_WEIGHT","2");

String type=request.getParameter("type");

if (type != null)
{
if (type.equalsIgnoreCase("img"))
{
response.setContentType("image/jpeg");
ServletOutputStream sos = response.getOutputStream();
JPEGImageEncoder encoder =
JPEGCodec.createJPEGEncoder(sos);
encoder.encode(x1.getChart());
}
}
else
{
response.setContentType("text/html");
x1.getChart();
String img_map=x1.getImageMap();
out.println(img_map);
}
%>

The above code will generate the following image (move the cursor above the chart bars to see the popup label effect):

Displaying text and chart images on the same page

In many cases chart images are to be displayed on web pages together with text and HTML. It can be difficult to generate jSP pages with mixed types. The following example suggests to use the HTML image tag.

The following example shows how to implement mixed types on one page. The first JSP script or HTML document calls the second script using the HTML image tag.

Script 1 (example_1):

Script 2 (example_2):

It is possible to pass parameters to the script generating the actual image as followed:

Saving an image as a file

Sometimes the image needs to be saved rather than directly being displayed. This can be the case if the generated image needs to be integrated into other documents or is part of a bigger process.

Saving images is very similar to displaying images, but we use the FileOutputStream instead.

FileOutputStream fos = new FileOutputStream("out.jpg");
JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(fos);
jpeg.encode(mychart.getChart());
fos.close();

Putting all together the JSP code will look like this: