Supplying Graph Data to the Line Graph Applet via HTML Param Tags

	Graphs and Charts Applet Tutorial
	[ Home ] [ Products ] [ Downloads ] [ Purchase ] [ Support ] [ About Us ]

Supplying Graph Data to the Line Graph Applet via HTML Param Tags

Prerequisites

Graphs and Charts Package - For this tutorial you will need the Advanced Graph and Chart package. If you haven't already done so then you should first download the software here.

Overview

This method adds the graphing applet to a web page with the data supplied via HTML PARAM tags. When a visitor views the page the graph will read the data from the HTML PARAM tags and dynamically produce the graph image.

Method

The graph is added to the page with standard HTML <APPLET> and <PARAM> tags.

Step 1 - Add the applet HTML code to your web page
Copy & Past the following HTML into your Web Page,
Adjust the "width" and "height" element of the applet tag to specify the size (in pixels) of the desired graph display.

Step 2 - Set up the Configuration data.
Add the following <PARAM> tags to your HTML between the <APPLET> and </APPLET> tag added in step 1.


<!-- Start Up Parameters -->
<PARAM name="LOADINGMESSAGE" value="Creating Chart - Please Wait.">
<PARAM name="STEXTCOLOR"     value="0,0,100">
<PARAM name="STARTUPCOLOR"   value="255,255,255">

<!-- Line Graph parameters, example values -->

<!-- General Properties -->
<PARAM name="BackgroundColor"      value="#FFFFFF">
<PARAM name="linkcursor"           value="hand">
<PARAM name="thousandseparator"    value=",">
<PARAM name="nSeries"              value="3">
<PARAM name="ndecplaces"           value="2">

<!-- Grid properties -->
<PARAM name="grid"                 value="true">
<PARAM name="axis"                 value="true">
<PARAM name="nRows"                value="8">
<PARAM name="vSpace"               value="20">
<PARAM name="hSpace"               value="20">
<PARAM name="nPoints"              value="12">
<PARAM name="gridxpos"             value="30">
<PARAM name="gridypos"             value="270">
<PARAM name="gridstyle"            value="2">
<PARAM name="gridColor"            value="#AAAAAA">
<PARAM name="axisColor"            value="#888888">
<PARAM name="floorColor"           value="#EEEEFF">
<PARAM name="gridbgimage"          value=" ">
<PARAM name="gridbgcolor"          value="#FFFF88">

<!-- Scale properties -->
<PARAM name="autoscale"            value="true">
<PARAM name="chartScale"           value="1">
<PARAM name="chartStartY"          value="0">

<!-- 3D properties -->
<PARAM name="3D"                   value="false">
<PARAM name="outline"              value="false">
<PARAM name="lineOutlineColor"     value="blue">
<PARAM name="depth3D"              value="0">

<!-- Legend properties -->
<PARAM name="legend"               value="true">
<PARAM name="LegendBackground"     value="#9999FF">
<PARAM name="LegendBorder"         value="#5555AA">
<PARAM name="LegendtextColor"      value="#FFFFFF">
<PARAM name="legendtitle"          value="Legend Title">
<PARAM name="legendposition"       value="-1,-1">
<PARAM name="legendfont"           value="Arial,N,12">
<PARAM name="LegendStyle"          value="Horizontal">

<!-- X axis labels -->
<PARAM name="labelOrientation"     value="Up Angle">
<PARAM name="labelsY"              value="300">
<PARAM name="xlabel_font"          value="Arial,N,12">
<PARAM name="labelColor"           value="#000000">
<PARAM name="label1"               value="January">
<PARAM name="label2"               value="February">
<PARAM name="label3"               value="March">
<PARAM name="label4"               value="April">
<PARAM name="label5"               value="May">
<PARAM name="label6"               value="June">
<PARAM name="label7"               value="July">
<PARAM name="label8"               value="August">
<PARAM name="label9"               value="September">
<PARAM name="label10"              value="October">
<PARAM name="label11"              value="November">
<PARAM name="label12"              value="December">

<!-- Y axis labels -->
<PARAM name="ylabels"              value="true">
<PARAM name="ylabel_font"          value="Arial,N,12">
<PARAM name="ylabel_pre"           value="$">
<PARAM name="ylabel_post"          value=" ">

<!-- Chart Titles -->
<PARAM name="title"                value="Graph Title">
<PARAM name="xtitle"               value="X axis title">
<PARAM name="ytitle"               value="Y axis title">

<!-- PopUp Display -->
<PARAM name="popupbgcolor"         value="#AAAAFF">
<PARAM name="popupfont"            value="Arial,N,12">
<PARAM name="popup_pre"            value="$">
<PARAM name="popup_post"           value=" ">

<!-- Series Data -->
<PARAM name="series1"              value="#F00000|6|16|false|Series 1">
<PARAM name="series2"              value="#F000F0|6|16|true|Series 2">
<PARAM name="series3"              value="#00F000|0|10|false|Series 3">

Adjust the values to create the line graph style you require.

For a full description of each property please see the following section in the Documentation,
"Line Graph Parameter Reference"

Step 3 - Add in the Line Graph data
Add the data <PARAM> tags (below) between the <APPLET> and </APPLET> tag.


<!-- Line Data -->
<!--                value,URL,Target Frame -->
<PARAM name="data1series1"    value="10000">
<PARAM name="data2series1"    value="6000">
<PARAM name="data3series1"    value="3500">
<PARAM name="data4series1"    value="2000">
<PARAM name="data5series1"    value="2500">
<PARAM name="data6series1"    value="1300">

<PARAM name="data1series2"    value="3000">
<PARAM name="data2series2"    value="1000">
<PARAM name="data3series2"    value="5000">
<PARAM name="data4series2"    value="2500">
<PARAM name="data5series2"    value="1300">
<PARAM name="data6series2"    value="2100">

<PARAM name="data1series3"    value="13000">
<PARAM name="data2series3"    value="7000">
<PARAM name="data3series3"    value="8500">
<PARAM name="data4series3"    value="4500">
<PARAM name="data5series3"    value="3800">
<PARAM name="data6series3"    value="4300">

Any number of data points and series of data may be added. The above example will generate three lines on the graph each with 6 data points.
For the full explanation of the dataNseriesM parameter please see:-
Graph Data Definitions

Step 4 - Upload the jar file to your web server.
The final step is to place the Linegraph.jar file in the same directory as your web page. A copy of the Linegraph.jar file may be found in the ./AppletFiles/ directory of the downloaded package.

The Graphs and Charts Package can be downloaded here

The jar file contains the compiled Java code (software) which produces the graph image at page view time.

Further Help and Support

If it any stage you require help, advice or simply have a general enquiry then please feel free to contact us.

Contact Support here

Related Information

Documentation

Demos and Examples

Custom Solutions Center

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:-

Product Set-Up, Installation and Configuration Service

Custom Software Development

Web Site Components Development Service

Web Application Development Service

Web Site Design Service

eCommerce Solutions and Web Development Service

Content Management Set Up and Implementation Service

« back to Tutorial index

« back to Getting Started

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

Graphs and Charts Applet Tutorial

Supplying Graph Data to the Line Graph Applet via HTML Param Tags