RCHART TUTORIAL, Chapter 13

Copyright 2003, J4L Components (http://www.java4less.com)
Go bak to contents


RChart , Servlet

 

RChartServlet will allow you to use RChart as Servlet without any Java[TM] programming. The servlet has the advantage that the Java[TM] classes must not be downloaded to the client's browser. This means your chart will be displayed faster. It has however the disadvantage that you need to have a web server able to execute servlets.

In the case of servlets, the charts are created in the server and the output in GIF, PNG or JPEG format is sent to the browser. This also means that you can use RChart to display charts in browser that do not support Java[TM] applets.

 

Installing the servlet

You can very easily use RChartServlet. The parameters are the same as those for the applet. You can send the parameters to the Servlet using the POST or GET methods. Furthermore there are some additional parameters:

The in order to run RChart as servlet you must follow these steps:

1. If you want to create a PNG or GIF image you will need to download the encoder:

The JPG encoder is already in Java[TM] Platform 1.2 or later included.

2. Install the encoder class and the rchart classes in the servlet engine.

3. Copy the data file (which contains the parameters of the chart) to any directory in the server.

The files of RChart that must be included in the classpath are:

Please check your servlet engine documentation to know where to copy these files.

Tomcat 4.1 example


For example, in Tomcat 4.1 you must create the following directory:

TOMCAT\webapps\rchart

which can just be copied from TOMCAT\webapps\examples.

You can then install the following files:

and the data file (created with RChart Visual Builder) can be copied to

As final step, copy this file to TOMCAT\webapps\rchart\WEB-INF\web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

<!-- General description of your web application -->
<display-name>My Web Application</display-name>
<description>
RChart test
</description>

<context-param>
<param-name>webmaster</param-name>
<param-value>myaddress@mycompany.com</param-value>
<description>
The EMAIL address of the administrator to whom questions
and comments about this application should be addressed.
</description>
</context-param>

<servlet>
<servlet-name>RChartServlet</servlet-name>
<description> RChart servlet
</description>
<servlet-class>RChartServlet</servlet-class>
<!-- Load this servlet at server startup time -->
<load-on-startup>5</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>invoker</servlet-name>
<url-pattern>/servlet/*</url-pattern>
</servlet-mapping>

<session-config>
<session-timeout>30</session-timeout> <!-- 30 minutes -->
</session-config>

</web-app>

 

Now you can test your servlet like this:

http://localhost:8080/rchart/servlet/RChartServlet?DATAFILE=http://localhost:8080/rchart/data/data.html&DEBUG=ON

If this does not work check that:

 

Unix and Linux servers

If you run RChart on a Unix or Linux server you must take into account the following. Java[TM] graphic classes require a X11 server to be running. This is a well known problem.

If you are not running a X11 server you will get errors like:

Exception java.lang.NoClassDefFoundError
at java.lang.Class.forName0(Native Method) at java.lang.Class.forName(Class.java:120)
at java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment (GraphicsEnvironment.java:58)
....

or

java.lang.InternalError: Can't connect to X11 window server using ':0.0' as the value of the DISPLAY variable. at sun.awt.X11GraphicsEnvironment.initDisplay(Native Method)
.

or similar.

The most common solutions to this problem are:

 

JSP[TM] Examples

Servlet Example

The following example will create an area chart (it is very similar to the example Chart2.htm).

It will retrieve the data from an MSAccess database that contains a table called "salesMonth". This table has three fields: "Products" (integer), "Services" (integer) and "salesMonth" (date), which contains the sales for several months.

The example will display the sales of the last 6 months. It will create a HTML page that contains a reference to the Servlet. The JSP[TM] page will first create a data file for the servlet. Most of the parameters in this data file are constant, however the date labels and the sales data is retrieved from the DB.

<HTML>
<HEAD>
<%
/* this is the file where we write the donfiguration for the servlet, we should use another file name, not constant */
String filename="dataFile.html";
%>
</HEAD>
<BODY>
<BR>
This is the output of the servlet. The data for the servlet has been calculated in a JSP[TM] file.
<BR>
<!-- **** VARIABLE DATA, use Java to retrieve series data values from database **** -->
<%

java.sql.Statement st;
java.sql.ResultSet rs;
java.sql.Connection db=null;
int i=1;
String labels="";
String values1="";
String values2="";

// connect to database
// open db using a System ODBC data source called "Data"

try {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
db = java.sql.DriverManager.getConnection("jdbc:odbc:data", "", "");
}
catch(Exception e) {
System.err.println("Error eonnecting to DB:" + e.getMessage()); }

try {
st = db.createStatement();
/*get sales data, execute SQL*/
rs = st.executeQuery("Select * from SalesMonth Order by salesMonth DESC");


/* iterate on sales data, up to 6 rows */
while ((i <= 6) && (rs.next())) {
/* concatenate | separator */
if (i>1) {
values1= "|" + values1;
values2= "|" + values2;
labels= "|" + labels;
}

/* concatenate value */
values1= "" + rs.getString("Services") + values1;
values2= "" + rs.getString( "Product") + values2;
java.text.SimpleDateFormat df= new java.text.SimpleDateFormat("MMM");
labels= "" + df.format(rs.getDate("salesMonth")) + labels;

i++;
}

rs.close();
db.close();
}
catch(Exception e) {
System.err.println("Error:" + e.getMessage());}

try {
/* open output data file */
java.io.File fi=new java.io.File("..\\webapps\\rchart\\data\\" + filename);
java.io.FileWriter fw=new java.io.FileWriter(fi);

/* write values for serie 1 */
fw.write("SERIE_DATA_1=" +values1 + "\n");

/* write values for serie 2 */
fw.write("SERIE_DATA_2=" +values2+ "\n");

/* write values for labels */
fw.write("XAXIS_LABELS=" +labels+ "\n");


/* write constant data to configuration file*/
fw.write("TITLECHART=Sales 1999\n");
fw.write("LEGEND=TRUE\n");
fw.write("XLABEL=Month\n");
fw.write("YLABEL=Million $\n");
fw.write("SERIE_1=Services\n");
fw.write("SERIE_2=Products\n");
fw.write("SERIE_STYLE_1=0.2|0x663300|LINE\n");
fw.write("SERIE_STYLE_2=0.2|0x99|LINE\n");
fw.write("SERIE_FILL_1=RED\n");
fw.write("SERIE_FILL_2=0x99cc\n");
fw.write("SERIE_FONT_1=Arial|PLAIN|8\n");
fw.write("SERIE_FONT_2=Arial|PLAIN|8\n");
fw.write("SERIE_POINT_1=true\n");
fw.write("SERIE_POINT_2=true\n");
fw.write("SERIE_TYPE_1=LINE\n");
fw.write("SERIE_TYPE_2=LINE\n");
fw.write("CHART_BORDER=0.2|BLACK|LINE\n");
fw.write("CHART_FILL=LIGHTGRAY\n");
fw.write("BIG_TICK_INTERVALX=1\n");
fw.write("BIG_TICK_INTERVALY=1\n");
fw.write("YSCALE_MIN=0\n");
fw.write("TICK_INTERVALY=100\n");
fw.write("LEGEND_BORDER=0.2|BLACK|LINE\n");
fw.write("LEGEND_FILL=WHITE\n");
fw.write("XAXIS_TICKATBASE=true\n");
fw.write("XAXIS_TICKATBASE=true\n");
fw.write("BACK_IMAGE=back13.gif\n");

fw.close();
}
catch(Exception e) {
System.err.println("Error writing data file:" + e.getMessage()); }

%>
<!-- **** LINK to the servlet that will use the data file we just created **** -->
<img src="http://localhost:8080/rchart/servlet/RChartServlet?DATAFILE=http://localhost:8080/rchart/data/<%=filename%>">

</BODY>
</HTML>

 

Bean Example

The following example will create an areachart (it is very similar to the example Chart2.htm).

It will retrieve the data from an MSAccess database that contains a table called "salesMonth". This table has three fields: "Products" (integer), "Services" (integer) and "salesMonth" (date), which contains the sales for several months.

The example will display the sales of the last 6 months. It will create a HTML page that contains a reference to the a jpg file that has been created by the Bean. Most of the parameters are constant, however the date labels and the sales data is retrieved from the DB.

 

<HTML>
<HEAD>
</HEAD>
<BODY>
<BR>
This is the output of the BEAN.
<BR>
<BR> <!-- **** VARIABLE DATA, use Java[TM] code to retrieve series data values from database ****
-->

<jsp:useBean id="cha" scope="session" class="com.java4less.rchart.JChartBean" />
<%java.sql.Statement st;
java.sql.ResultSet rs;
java.sql.Connection db=null;
int i=1;
String labels="";
String values1="";
String values2="";// connect to database
// open db using a System ODBC entry called "Data"
try {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
db = java.sql.DriverManager.getConnection("jdbc:odbc:data", "", "");
}
catch(Exception e) {
System.err.println("Error eonnecting to DB:" + e.getMessage());
}try {st = db.createStatement();
rs = st.executeQuery("Select * from SalesMonth Order by salesMonth DESC");

/* iterate on sales data, up to 6 rows */
while ((i <= 6) && (rs.next())) {
/* concatenate | separator */
if (i>1) {
values1= "|" + values1;
values2= "|" + values2;
labels= "|" + labels;
}

/* concatenate value */
values1= "" + rs.getString("Services") + values1;
values2= "" + rs.getString( "Product") + values2;
java.text.SimpleDateFormat df= new java.text.SimpleDateFormat("MMM");
labels= "" + df.format(rs.getDate("salesMonth")) + labels; i++; }rs.close();
db.close();}

catch(Exception e) {
System.err.println("Error:" + e.getMessage());
}
try {

/* set parameters *//* write values for serie 1 */
cha.setParameter("SERIE_DATA_1",""+values1);/* write values for serie 2 */
cha.setParameter("SERIE_DATA_2",""+values2);/* write values for labels */
cha.setParameter("XAXIS_LABELS",""+labels);


/* write constant data to configuration file*/
cha.setParameter("TITLECHART","Sales 1999");
cha.setParameter("LEGEND","TRUE");
cha.setParameter("XLABEL","Month");
cha.setParameter("YLABEL","Million $");
cha.setParameter("SERIE_1","Services");
cha.setParameter("SERIE_2","Products");
cha.setParameter("SERIE_STYLE_1","0.2|0x663300|LINE");
cha.setParameter("SERIE_STYLE_2","0.2|0x99|LINE");
cha.setParameter("SERIE_FILL_1","RED");
cha.setParameter("SERIE_FILL_2","0x99cc");
cha.setParameter("SERIE_FONT_1","Arial|PLAIN|8");
cha.setParameter("SERIE_FONT_2","Arial|PLAIN|8");
cha.setParameter("SERIE_POINT_1","true");
cha.setParameter("SERIE_POINT_2","true");
cha.setParameter("SERIE_TYPE_1","LINE");
cha.setParameter("SERIE_TYPE_2","LINE");
cha.setParameter("CHART_BORDER","0.2|BLACK|LINE");
cha.setParameter("CHART_FILL","LIGHTGRAY");
cha.setParameter("BIG_TICK_INTERVALX","1");
cha.setParameter("BIG_TICK_INTERVALY","1");
cha.setParameter("YSCALE_MIN","0");
cha.setParameter("TICK_INTERVALY","100");
cha.setParameter("LEGEND_BORDER","0.2|BLACK|LINE");
cha.setParameter("LEGEND_FILL","WHITE");
cha.setParameter("XAXIS_TICKATBASE","true");
cha.setParameter("XAXIS_TICKATBASE","true");
cha.setParameter("BACK_IMAGE","back13.gif");

}

catch(Exception e) {
System.err.println("Error: " + e.getMessage());
}
/* create jpg file */
cha.buildChart();
cha.setChartSize(300,300);
cha.saveToFile("..\\webapps\\rchart\\chart.jpg","JPEG");

%>
<!-- **** LINK to the jpg file we just created **** -->
<img src="chart.jpg">

</BODY>
</HTML>