RCHART TUTORIAL, Chapter 10

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


RChart Applet

 

Applets are small Java[TM] programs that run inside your browser, this means they must be first downloaded from the server so that they can be executed by your browser.

In order to run applets your browser must be Java[TM] enabled. RChart will run in old browsers also since it also runs with Java[TM] platform version 1.1 or later.

Applet are downloaded and executed when the brower finds the <APPLET> tag inside the HTML code. The tag has the following structure:

<APPLET
CODE=...
CODEBASE=..
NAME=...
WIDTH=...
HEIGHT
>

<PARAM NAME = "appletParameter1" VALUE = "value1">
<PARAM NAME = "appletParameter2" VALUE = "value2">
<PARAM NAME = "appletParameter3" VALUE = "value3">

.....
< /APPLET>

The green code is used to configurate the applet (size, name, class to be executed), and the blue code is used to pass parameters to the applet. These are the parameters you use to define a chart. As you see the chart definition is part of the <Applet> tag contained in the HTML page, however it is also possible to read the chart definition from a separate file.

You can of course dinamically create this HTML code using a server side script (ASP, Php, Jsp), you can see some examples in this chapter.

 

My first applet

RChartApplet can be executed with so litte code as:

<HTML>
<BODY>
<APPLET
CODEBASE = "./"
CODE = "com.java4less.rchart.ChartApplet.class"
NAME = "TestApplet"
ARCHIVE = "rchart.jar"
WIDTH = 500
HEIGHT = 500
ALIGN = middle
>
<PARAM NAME = "TITLECHART" VALUE = "Sales 1999">
<PARAM NAME = "XLABEL" VALUE = "Month">
<PARAM NAME = "YLABEL" VALUE = "Million $">
<PARAM NAME = "SERIE_1" VALUE = "Products">
<PARAM NAME = "SERIE_DATA_1" VALUE = "12|43|50|45|30|32|42">
</APPLET>
</BODY>
</HTML>

In order to run this applet you must:

  1. copy this code to a file: Applet.html
  2. copy rchart.jar to the same directory
  3. Open Applet.html with your browser

Of course this is a very simple and ugly chart, you should now add new parameters to get a nicer chart.

It is also possible to have the chart parameters in a separate file, this is done like this:

  1. Copy the following code to applet.html

    <HTML>
    <BODY>
    <APPLET
    CODEBASE = "./"
    CODE = "com.java4less.rchart.ChartApplet.class"
    NAME = "TestApplet"
    ARCHIVE = "rchart.jar"
    WIDTH = 500
    HEIGHT = 500
    HSPACE = 0
    VSPACE = 0
    ALIGN = middle
    >
    <PARAM NAME = "DATAFILE" VALUE = "data.html">

    </APPLET>
    </BODY>
    </HTML>


  2. Copy the following code to data.html

    XLABEL=Month
    YLABEL=Million $
    SERIE_1=Products
    SERIE_DATA_1=12|43|50|45|30|32|42

  3. copy rchart.jar to the same directory
  4. Open Applet.html with your browser

As you can see the result is the same, but the chart parameters are read from a external file (which could be a JSP[TM] , ASP , cgi ...). Format of the external file is:

PARAMETERNAME=VALUE

Note: make sure there are not trailing spaces after VALUE.

 

Deploying the applet

 

When you deploy the applet to your server you will need to copy the following 2 files:

The following parameters are used to configurate the applet:

Parameters
Description

<APPLET
CODEBASE = "./"
CODE = "com.java4less.rchart.ChartApplet.class"
NAME = "TestApplet"
ARCHIVE = "rchart.jar"
WIDTH = 500
HEIGHT = 500
ALIGN = middle
MAYSCRIPT
>

Definition of the scale
This is the directory where rchart.jar should be located.
This is the name of the applet, you cannot change it.
Name you want to give to your applet.
This is the file where the applet is located.
Size of the applet (in pixels), can also be defined as % of the page's size, for example WIDTH=50% and Height=%50
Alignment
You need to include this keyword if you are going to use the OnClickRChart() javascript function.

 

 

Realtime applets

If you want to update the chart (the applet) every X seconds with new data from your server you must configure the applet like this:

where the program "updateData.asp" (can also be php, jsp ...) must return the parameters in the usual format (PARAMETERNAME=VALUE). For example it might return this information: "SERIE_DATA_1= 12|34|46|56" in order to update the values for serie 1.


RChart will also trigger a Javascript function called "OnRChart()" if you set REALTIME_JS=true.

This is an example of a bar chart being updated every 2 seconds (default value for REALTIME_MSECS):

  1. Copy this code to a file named realtime.html:

    </HEAD>
    <BODY>
    <BR>
    <APPLET
    CODEBASE = "."
    CODE = "com.java4less.rchart.ChartApplet.class"
    ARCHIVE=rchart.jar
    NAME = "TestApplet"
    WIDTH = 300
    HEIGHT = 300
    HSPACE = 0
    VSPACE = 0
    ALIGN = middle
    >
    <PARAM NAME = "TITLECHART" VALUE = "Sales 1999">
    <PARAM NAME = "LEGEND" VALUE = "TRUE">
    <PARAM NAME = "XLABEL" VALUE = "Month">
    <PARAM NAME = "YLABEL" VALUE = "Million $">
    <PARAM NAME = "XAXIS_LABELS" VALUE = "June|July|Aug.|Sept.|Oct.|Nov.|Dec.">
    <PARAM NAME = "SERIE_1" VALUE = "Products">
    <PARAM NAME = "SERIE_2" VALUE = "Services">
    <PARAM NAME = "SERIE_TYPE_1" VALUE = "BAR">
    <PARAM NAME = "SERIE_TYPE_2" VALUE = "BAR">
    <PARAM NAME = "SERIE_STYLE_1" VALUE = "RED">
    <PARAM NAME = "SERIE_BARS_COLORS_1" VALUE = "WHITE|YELLOW">
    <PARAM NAME = "SERIE_STYLE_2" VALUE = "BLUE">
    <PARAM NAME = "SERIE_FONT_1" VALUE = "Arial|PLAIN|8">
    <PARAM NAME = "SERIE_FONT_2" VALUE = "Arial|PLAIN|8">
    <PARAM NAME = "SERIE_DATA_1" VALUE = "10|43|50|45|30|32|42">

    <PARAM NAME = "REALTIME_DATAFILE" VALUE = "data.html">

    <PARAM NAME = "SERIE_DATA_2" VALUE = "-10|41|48|39|36|34|50">
    <PARAM NAME = "CHART_BORDER" VALUE = "0.2|BLACK|LINE">
    <PARAM NAME = "CHART_FILL" VALUE = "0xffcc00">
    <PARAM NAME = "BIG_TICK_INTERVALX" VALUE = "1">
    <PARAM NAME = "BIG_TICK_INTERVALY" VALUE = "1">
    <PARAM NAME = "YSCALE_MIN" VALUE = "-15">
    <PARAM NAME = "XSCALE_MIN" VALUE = "0">
    <PARAM NAME = "XSCALE_MAX" VALUE = "7">
    <PARAM NAME = "YAXIS_AUTO_TICKS" VALUE = "7">
    <PARAM NAME = "LEGEND_BORDER" VALUE = "0.2|BLACK|LINE">
    <PARAM NAME = "LEGEND_FILL" VALUE = "WHITE">
    <PARAM NAME = "SERIE_BORDER_TYPE_1" VALUE = "RAISED">
    <PARAM NAME = "SERIE_BORDER_TYPE_2" VALUE = "RAISED">
    <PARAM NAME = "BARCHART_BARSPACE" VALUE = "1">

    </APPLET>
    </BODY>
    </HTML>

  2. Copy rchart.jar to the same directory as realtime.html
  3. Create a file called "data.html" that contains: SERIE_DATA_1=10|16|5|4|30|2|4
  4. Open now realtime.html with your browser, the result will be:



  5. Change now the content of data.html like this: SERIE_DATA_1=25|16|5|4|30|2|4
  6. After a maximum of 2 seconds the result will be:


Javascript integration

You may also use javascript to change the chart displayed in the applet. The applet has the following methods:


For example, to change the line's style of the second serie of a chart you can use the following JavaScript function:

function changeStyle() {
document.TestApplet.setParameter('SERIE_STYLE_2','2|GREEN|DASHED');
document.TestApplet.rebuild('N','N');
}

See file chart1.hml in the evaluation version for a complete example.

RChart (only the applet) will trigger the OnClickRChart event when the user clicks on bar (barchart), point (linechart) or item (piechart). In order to activate this feature you must set the parameter

CHART_JAVASCRIPT_EVENTS=True

This event will receive two parameters:

  1. name of the serie the user clicked on.
  2. secuence of the point/bar/item the user cliked on (starting at 0).

For example:

<SCRIPT>
function OnClickRChart(serieName, valuePosition) {

}
</SCRIPT>

Note that you must also include the word MAYSCRIPT in the applet parameters.

 

ASP

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 the applet. Most of the parameters of the applet are constant, however the date labels and the sales data is retrieved from the DB.

<%@ LANGUAGE="VBSCRIPT" %>
<%
' variables used to store the data used as parameter for the applet
dim labels, values1,values2
%>

<HTML>
<HEAD> </HEAD>
<BODY>
<APPLET
CODEBASE = "."
CODE = "com.java4less.rchart.ChartApplet.class"
NAME = "TestApplet"
WIDTH = 500 HEIGHT = 500
>

<!-- **** VARIABLE DATA, use VBScript to retrieve series data values from database **** -->
<% ' get data from last 6 months
set Connect=Server.CreateObject("ADODB.Connection")

' open db using a System ODBC data source called "Data"
Connect.ConnectionString="DSN=data;"
Connect.Open

' get sales data, execute SQL
set rs=Connect.Execute("Select * from SalesMonth Order by salesMonth DESC")

i=1
values1=""
values2=""
labels=""

' loop, plot only last 6 months
while (not rs.eof) and (i<=6)
if (i>1) then
' add separators to create list of values
values1= "|" & values1
values2= "|" & values2
labels= "|" & labels
end if

' get month name
labels= "" & MonthName(DatePart("m",rs("salesMonth")),1) & labels
' get sales of products
values1= "" & rs("Product") & values1
' get sales of services
values2= "" & rs("Services") & values2

i=i+1
rs.movenext
wend

rs.close
Connect.close
set Connect=nothing
%>

<!-- **** output of calculated variables**** -->
<PARAM NAME = "XAXIS_LABELS" VALUE = "<%=labels%>">
<PARAM NAME = "SERIE_DATA_2" VALUE = "<%=values1%>">
<PARAM NAME = "SERIE_DATA_1" VALUE = "<%=values2%>">


<!-- **** CONSTANT DATA **** -->
<PARAM NAME = "TITLECHART" VALUE = "Sales 1999">
<PARAM NAME = "LEGEND" VALUE = "TRUE">
<PARAM NAME = "XLABEL" VALUE = "Month">
<PARAM NAME = "YLABEL" VALUE = "Million $">
<PARAM NAME = "SERIE_1" VALUE = "Products">
<PARAM NAME = "SERIE_2" VALUE = "Services">
<PARAM NAME = "SERIE_STYLE_1" VALUE = "0.2|0x663300|LINE">
<PARAM NAME = "SERIE_STYLE_2" VALUE = "0.2|0x99|LINE">
<PARAM NAME = "SERIE_FILL_1" VALUE = "RED">
<PARAM NAME = "SERIE_FILL_2" VALUE = "0x99cc">
<PARAM NAME = "SERIE_FONT_1" VALUE = "Arial|PLAIN|8">
<PARAM NAME = "SERIE_FONT_2" VALUE = "Arial|PLAIN|8">
<PARAM NAME = "SERIE_POINT_1" VALUE = "true">
<PARAM NAME = "SERIE_POINT_2" VALUE = "true">
<PARAM NAME = "SERIE_TYPE_1" VALUE = "LINE">
<PARAM NAME = "SERIE_TYPE_2" VALUE = "LINE">
<PARAM NAME = "CHART_BORDER" VALUE = "0.2|BLACK|LINE">
<PARAM NAME = "CHART_FILL" VALUE = "LIGHTGRAY">
<PARAM NAME = "BIG_TICK_INTERVALX" VALUE = "1">
<PARAM NAME = "BIG_TICK_INTERVALY" VALUE = "1">
<PARAM NAME = "YSCALE_MIN" VALUE = "0">
<PARAM NAME = "TICK_INTERVALY" VALUE = "100">
<PARAM NAME = "LEGEND_BORDER" VALUE = "0.2|BLACK|LINE">
<PARAM NAME = "LEGEND_FILL" VALUE = "WHITE">
<PARAM NAME = "XAXIS_TICKATBASE" VALUE = "true">
<PARAM NAME = "XAXIS_TICKATBASE" VALUE = "true">
<PARAM NAME = "BACK_IMAGE" VALUE = "back13.gif">
</APPLET>
</BODY>
</HTML>

 

JSP[TM]

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 the applet. Most of the parameters of the applet are constant, however the date labels and the sales data is retrieved from the DB.

<HTML>
<HEAD></HEAD>
<BODY>
<APPLET
CODEBASE = "."
CODE = "com.java4less.rchart.ChartApplet.class"
NAME = "TestApplet"
ARCHIVE = "rchartClasses.zip"
WIDTH = 500 HEIGHT = 500>

<!-- **** VARIABLE DATA, use Java[TM] code 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());}

/* echo values for serie 1 */
out.println("<PARAM NAME = \"SERIE_DATA_1\" VALUE = \"" + values1 + "\">");

/* echo values for serie 2 */
out.println("<PARAM NAME = \"SERIE_DATA_2\" VALUE = \""+ values2 + "\">");

/* echo values for labels */
out.println("<PARAM NAME = \"XAXIS_LABELS\" VALUE = \""+ labels + "\">");
%>

<!-- **** CONSTANT DATA **** -->
<PARAM NAME = "TITLECHART" VALUE = "Sales 1999">
<PARAM NAME = "LEGEND" VALUE = "TRUE">
<PARAM NAME = "XLABEL" VALUE = "Month">
<PARAM NAME = "YLABEL" VALUE = "Million $">
<PARAM NAME = "SERIE_1" VALUE = "Services">
<PARAM NAME = "SERIE_2" VALUE = "Products">
<PARAM NAME = "SERIE_STYLE_1" VALUE = "0.2|0x663300|LINE">
<PARAM NAME = "SERIE_STYLE_2" VALUE = "0.2|0x99|LINE">
<PARAM NAME = "SERIE_FILL_1" VALUE = "RED">
<PARAM NAME = "SERIE_FILL_2" VALUE = "0x99cc">
<PARAM NAME = "SERIE_FONT_1" VALUE = "Arial|PLAIN|8">
<PARAM NAME = "SERIE_FONT_2" VALUE = "Arial|PLAIN|8">
<PARAM NAME = "SERIE_POINT_1" VALUE = "true">
<PARAM NAME = "SERIE_POINT_2" VALUE = "true">
<PARAM NAME = "SERIE_TYPE_1" VALUE = "LINE">
<PARAM NAME = "SERIE_TYPE_2" VALUE = "LINE">
<PARAM NAME = "CHART_BORDER" VALUE = "0.2|BLACK|LINE">
<PARAM NAME = "CHART_FILL" VALUE = "LIGHTGRAY">
<PARAM NAME = "BIG_TICK_INTERVALX" VALUE = "1">
<PARAM NAME = "BIG_TICK_INTERVALY" VALUE = "1">
<PARAM NAME = "YSCALE_MIN" VALUE = "0">
<PARAM NAME = "TICK_INTERVALY" VALUE = "100">
<PARAM NAME = "LEGEND_BORDER" VALUE = "0.2|BLACK|LINE">
<PARAM NAME = "LEGEND_FILL" VALUE = "WHITE">
<PARAM NAME = "XAXIS_TICKATBASE" VALUE = "true">
<PARAM NAME = "XAXIS_TICKATBASE" VALUE = "true">
<PARAM NAME = "BACK_IMAGE" VALUE = "back13.gif">
</APPLET>
</BODY>
</HTML>

 

Php

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 the applet. Most of the parameters of the applet are constant, however the date labels and the sales data is retrieved from the DB.

<HTML>
<HEAD></HEAD>
<BODY>
<APPLET
CODEBASE = "."
CODE = "com.java4less.rchart.ChartApplet.class"
NAME = "TestApplet"
WIDTH = 500 HEIGHT = 500 ALIGN = middle
>

<!-- **** VARIABLE DATA, use Php to retrieve series data values from database ****
-->

<?
$labels="";
$values2="";
$values1="";
$i=1;

/* connect to database
open db using a System ODBC data source called "Data"
*/
$odbcid = odbc_connect ("data", "", "", "");
/* get sales data, execute SQL*/
$resultid = odbc_exec ($odbcid, "Select * from SalesMonth Order by salesMonth DESC") ;


/* iterate on sales data, up to 6 rows */
while (($i <= 6) and (odbc_fetch_row($resultid))) {
/* concatenate | separator */
if ($i>1) {
$values1= "|" . $values1;
$values2= "|" . $values2;
$labels= "|" . $labels;
}

/* concatenate value */
$values1= odbc_result ($resultid, "Services") . $values1;
$values2= odbc_result ($resultid, "Product") . $values2;
$labels= odbc_result ($resultid, "salesMonth") . $labels;

$i=$i+1;
/* next record */
odbc_fetch_row($resultid);
}


/* echo values for serie 1 */
echo "<PARAM NAME = \"SERIE_DATA_1\" VALUE = \"";
echo $values1;
echo "\">";

/* echo values for serie 2 */
echo "<PARAM NAME = \"SERIE_DATA_2\" VALUE = \"";
echo $values2;
echo "\">";

/* echo values for labels */
echo "<PARAM NAME = \"XAXIS_LABELS\" VALUE = \"";
echo $labels;
echo "\">";

/* close result */
odbc_free_result($resultid);
/* close connection */
odbc_close($odbcid);

?>


<!-- **** CONSTANT DATA **** -->
<PARAM NAME = "TITLECHART" VALUE = "Sales 1999">
<PARAM NAME = "LEGEND" VALUE = "TRUE">
<PARAM NAME = "XLABEL" VALUE = "Month">
<PARAM NAME = "YLABEL" VALUE = "Million $">
<PARAM NAME = "SERIE_1" VALUE = "Services">
<PARAM NAME = "SERIE_2" VALUE = "Products">
<PARAM NAME = "SERIE_STYLE_1" VALUE = "0.2|0x663300|LINE">
<PARAM NAME = "SERIE_STYLE_2" VALUE = "0.2|0x99|LINE">
<PARAM NAME = "SERIE_FILL_1" VALUE = "RED">
<PARAM NAME = "SERIE_FILL_2" VALUE = "0x99cc">
<PARAM NAME = "SERIE_FONT_1" VALUE = "Arial|PLAIN|8">
<PARAM NAME = "SERIE_FONT_2" VALUE = "Arial|PLAIN|8">
<PARAM NAME = "SERIE_POINT_1" VALUE = "true">
<PARAM NAME = "SERIE_POINT_2" VALUE = "true">
<PARAM NAME = "SERIE_TYPE_1" VALUE = "LINE">
<PARAM NAME = "SERIE_TYPE_2" VALUE = "LINE">
<PARAM NAME = "CHART_BORDER" VALUE = "0.2|BLACK|LINE">
<PARAM NAME = "CHART_FILL" VALUE = "LIGHTGRAY">
<PARAM NAME = "BIG_TICK_INTERVALX" VALUE = "1">
<PARAM NAME = "BIG_TICK_INTERVALY" VALUE = "1">
<PARAM NAME = "YSCALE_MIN" VALUE = "0">
<PARAM NAME = "TICK_INTERVALY" VALUE = "100">
<PARAM NAME = "LEGEND_BORDER" VALUE = "0.2|BLACK|LINE">
<PARAM NAME = "LEGEND_FILL" VALUE = "WHITE">
<PARAM NAME = "XAXIS_TICKATBASE" VALUE = "true">
<PARAM NAME = "XAXIS_TICKATBASE" VALUE = "true">
<PARAM NAME = "BACK_IMAGE" VALUE = "back13.gif">
</APPLET>
</BODY>
</HTML>