Overview
Each graph style is available as a Java Servlet. The ./ServletFiles/ directory of the downloaded
package contains the class files for each graph style.
The Servlet Graphs operate on the Web Server within a Servlet Engine (eg. Tomcat, WebSphere,
WebLogic, JRun etc). A graph is added to a page via the standard HTML IMG tag where SRC element
is set to the URL of the graphing servlets. When the page is viewed the browser will send the
request for the graph to the web server which, in turn, will pass the request to the Servlet Engine
and the graphing servlet. The graphing servlet will then dynamically construct the graph image
which is then returned back to the browser where it is displayed to the user.
This procedure may vary slightly between different Servlet Engines and as such you may also need to refer to your Serv
Engine's documentation.
With most modern Servlet Engines the Graphing Servlet class files will need to be installed as a web application. The
graphing servlets have been built within the package jpowered.graphs which can be found in the ./ServletFiles/ director
The following describes how the JPowered Graphing package would be added to Tomcat 5.5.
a) Under the ./webapps/ directory of the Tomcat installation create this directory structure:-
./webapps/jpowered/WEBINF/classes/
b) From the ./ServletFiles/ directory of the downloaded package copy the ./jpowered/ directory and all it's contents to th
./webapps/jpowered/WEB-INF/classes/ created in the previous step.
c) From the ./ServletFiles/ directory of the downloaded package copy the web.xml file and place this in the
./webapps/jpowered/WEB-INF/ directory of Tomcat.
d) Restart Tomcat
The graphing servlets provide the following two options for inputting the configuration data.
Click on the following to view an example property file for each chart style:-
lineproperties.txt
areaproperties.txt
pieproperties.txt
vbarproperties.txt
svbarproperties.txt
hbarproperties.txt
shbarproperties.txt
As you will see from the example file each property is specified on a name, value basis. Adjust the property values to
specify the characteristics of the graph and then place this file in the same directory as your web page.
A full description of each property can be found in the appropriate parameter reference:-
Line Graph Parameters
Area Graph Parameters
Pie Chart Parameters
Vertical Bar Graph Parameters
Stacked Vertical Bar Graph Parameters
Horizontal Bar Graph Parameters
Stacked Horizontal Bar Graph Parameters
This option allows the graph servlets to obtain all the configuration data from another server side application. The serve
side script should be designed to output the configuration data in the same format as the file in option a) above.
For example scripts see the ./ServerTemplateScripts/ directory of the downloaded package.
For a more in depth look at this process also see the Tutorials
With most implementations supplying the configuration data either from a data file will be the most efficient, however
supplying this data via a server side script is useful where the graph properties need to be dynamically calculated. eg.
dynamic axis labelling.
As with the configuration data there are two options for supplying the data values to the servlet
The servlet will read all the data from a specified file. To use this option incorporate the URL of the data file into the IMG
tag (see Step 4). Click on the following to view an example data file:-
datafile.txt
As you will see from the example file each piece of data is specified on a name, value basis. The first element of each lin
represents the data name (specifying the series and data order) and then the value.
For more information on the data format see Supplying the Graph with Data
This option is the most powerful and gives the servlet the ability to retrieve data from databases. This method involves
specifying a server side script in the IMG tag of the html page (see Step 4) which in turn returns the data to the graph
servlet. This provides enormous flexibility for data acquisition. The server side script can be constructed in the language
your choice (eg. PHP, JSP, ASP etc) and as such can be written to acquire data from the widest variety of sources, multip
databases etc.
To instruct the servlet to retrieve data from a server side script simply add the URL of your server side script into the IM
tag of the HTML page (see Step 4). The server side script should be designed to output the data in the same format as t
file in option a) above.
For example scripts see the ./ServerTemplateScripts/ directory of the downloaded package.
For a more in depth look at this process also see the Tutorials
Step 4 - Incorporate the Servlet IMG tag into the HTML page
The final step is to incorporate the graph into the HTML page. This is done via the standard html IMG tag.
<img src="[ServletEngineURL]/jpowered/servlet/jpowered.graphs.[GRAPHSERVLETNAME]?
config=[URLconfigFile]&
data=[URLdataFile]"
width="500" height="420">
Where,
• LineGraphServlet
• AreaGraphServlet
• PiechartServlet
• SVbarchartServlet
• VbarchartServlet
• HbarchartServlet
• SHbarchartServlet
[ServletEngineURL] - should be replaced with the URL of the servlet engine. This can vary depending upon the servle
engine's configuration. For example with the standard install of Tomcat this may be:-
http://localhost:8080/jpowered/servlet/
( the port number may also vary )
[URLconfigFile] - should be replaced with the URL to either a Configuration file or server side process.
[URLdataFile] - should be replaced with he URL to either a Data file or server side process.
producing a graph image of 400 pixels by 300 pixels, the following IMG tag would be incorporated into the html page,
<img src="http://www.yourdomain.com/jpowered/servlet/jpowered.graphs.LineGraphServlet?
config=http://www.yourdomain.com/config.txt&
data=http://www.yourdomain.com/servlet/dataservlet" width="400" height="300">
<STONGServlet 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);
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";
}
}
Back to top
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.
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):
<MAP Name="mymap">
<%@ include file="example_2.jsp" %>
</MAP>
<IMG SRC='example_2.jsp?type=img' Alt="Image Map" Usemap="#mymap" border=0>
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@, XValue: @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):
Back to top
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):
<Hello this is a mixed image and text example
<IMG SRC='example_2.jsp' border=0>
Script 2 (example_2):
<html>
<body>
<%@ page session="false"%>
<%@ page contentType="image/jpeg"
import="com.sun.image.codec.jpeg.*,swiftchart.swiftchart_app.*" %>
<%
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");
ServletOutputStream sos = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(sos);
encoder.encode(mychart.getChart());
%>
</body>
</html>
It is possible to pass parameters to the script generating the actual image as followed:
<IMG SRC='example_2.jsp?var1=1&var2=xyz' border=0>
Back to top
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:
<html>
<body>
<%@ page session="false"%>
<%@ page contentType="image/jpeg"
import="com.sun.image.codec.jpeg.*,swiftchart.swiftchart_app.*" %>
<%
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");
FileOutputStream fos = new FileOutputStream("out.jpg");
JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(fos);
jpeg.encode(mychart.getChart());
fos.close();
</body>
</html>
Back to top