graph demo

Graph Documentation - Implementing Graphing Applets

graph demo[ Home ] [ Products ] [ Downloads ] [ Purchase ]
[ Support ] [ About Us ]

Implementing Graphing Applets

Overview
Each graph style is available as a Java Applet. Within the ./AppletFiles/ directory of the downloaded package there is one .jar file for each graph style. The .jar file contains all the compiled Java Code of that graphing function in one small file.

(Download the package here)

The graph applets are added to a web page via the standard HTML APPLET tags (see below). When a browser encounters a page with the APPLET tag it will download the jar file from the web server and begin execution of that code. ie. with the graphing applets the graphs are rendered in real-time by the client browser.

Web Server Requirements
For the graphing applets there are no special requirements on the web server. The .jar files are simply placed in a web directory in the same way that an image file would be placed on the web server. Upon request by the client browser the web server will serve up the .jar file, again in much the same way as an image file is served up to the client.
Set Up and Implementing Procedure
A graph applet can be added to a web page with the following steps:-

Step 1 - Add the applet html code to your web page

Add the appropriate APPLET tag for the graph style required to your web page from the list below:-
Line Graph
(The width and height should be adjusted for the graph size required.)
Area Graph
(The width and height should be adjusted for the graph size required.)
Pie Chart
(The width and height should be adjusted for the graph size required.)
Vertical Bar Graph
(The width and height should be adjusted for the graph size required.)
Stacked Vertical Bar Graph
(The width and height should be adjusted for the graph size required.)
Horizontal Bar Graph
(The width and height should be adjusted for the graph size required.)
Stacked Horizontal Bar Graph
(The width and height should be adjusted for the graph size required.)

Step 2 - Set up the Configuration data

The graph applets provide the following three options for inputting the configuration data.
a) with a Configuration File.

The applet will read all the configuration parameters from a specified file. To use this option add the following PARAM tag to your html code between the <applet> and </applet> tags of Step 1,

where "propertyfile.txt" is the name of the file containing the configuration data. Click on the following to view and 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

b) HTML PARAM tags.

Using this option the applet will read all the configuration information from the standard applet <PARAM> tags. Simply add the <PARAM> tags, contained in the appropriate file (below), to your html between the <APPLET> and </APPLET> tag of Step 1, adjusting the values to specify the characteristics of the graph.

Graph Applet Param Tags:-
Line Graph PARAM tags
Area Graph PARAM tags
Pie Chart PARAM tags
Vertical Bar Graph PARAM tags
Stacked Vertical Bar Graph PARAM tags
Horizontal Bar Graph PARAM tags
Stacked Horizontal Bar Graph PARAM tags

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

c) Server Side process

This option allows the graph applets to obtain all the configuration data from a server side application. The server side script should be designed to output the configuration data in the same format as the file in option a) above.

The following PARAM tag should be added to your html between the <APPLET> and </APPLET> tags of Step 1.

inserting the URL of your server side application in the value element of this tag.

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 or HTML parameters 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.

Step 3 - Set up the Graph data

As with the configuration data there are three options for supplying the data to the applet,
a) with a Data File.

The applet will read all the data from a specified file. To use this option add the following PARAM tag to your html code between the <applet> and </applet> tags of Step 1,

where "datafile.txt" is the name of the file containing the graph data.

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 line 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
b) HTML PARAM tags.

Using this option the applet will read all the data from the standard applet <PARAM> tags.

Any number of data items may be supplied with the PARAM tags. There should be one PARAM tag for each data item/value. The NAME element of each PARAM tag should be of the following format:-

dataMseriesM
where N is an integer number representing the order of the data within the series and M is an integer which specifies the series.

The VALUE element of the PARAM tag should contain the data item value

For example if there are 2 series of data each with 4 data items then the following PARAM tags would be added:-


For more information on the data format see Supplying the Graph with Data
c) Server Side process

This option is the most powerful and gives the applet the ability to retrieve data from databases without compromising database security. This method involves specifying a server side script in the html page which in turn returns the data to the graph applet, providing enormous flexibility for data acquisition.

The server side script can be constructed in the language of your choice (eg. PHP, JSP, ASP etc) and as such can be written to acquire data from the widest variety of sources, multiple databases etc.

To instruct the applet to retrieve data from a server side script simply insert the following PARAM tag between the <APPLET> and </APPLET> tags of Step 1.


inserting the URL of your server side application in the value element of this tag.

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 - Upload the jar file to the web server

The final step is to simply to place the appropriate .jar file (from the list below) in the same directory as your web page. The jar files have been made as small and as efficient as possible and therefore are very fast to load and run.

If data or configuration files/scripts have been created in Steps 2 and 3 then these should also be uploaded to the web server.

Copies of all the .jar files may be found in the ./AppletFiles/ directory of the downloaded package

Download the package here

Graph StyleJar File
Line Graph Linegraph.jar
Area Graph AreaGraph.jar
Pie Chart Piechart.jar
Vertical Bar Graph Vbarchart.jar
Stacked Vertical Bar Graph SVbarchart.jar
Stacked Horizontal Bar Graph Hbargraph.jar
Horizontal Bar Graph SHbarchart.jar
Custom Solutions
If would like us to perform the set-up process, create custom built data scripts or help with any other part of your web application then we are pleased to offer you the following services:-
Set-Up, Installation and Configuration Service
Web Site Components Development Service
Web Application Development Service
Custom Software Development
JavaScript CSS Image Gallery