Whichever method ( file, html code, server process etc.)
you choose to supply the graph with the configuration options the various parameters all follow the same format of
[Parameter Name] , [Parameter Value].
Below you will find each option detailed with examples for supplying by file
and html code.
Please Note : Parameter Names are case sensitive. ( i.e. axis is not
the same as Axis ).
- Graph Switches
- Graph Characteristics
- Grid Properties
- Label Properties
- Bar Labels
- Automatic Legend
- Titles
- Series Characteristics
- Target Lines
- Free Form Text
- Free Form Images
- Multi-Language Support
Graph Switches
( Boolean flags )
Parameter |
Description |
Example |
3D |
Specifies whether the graph should be drawn in 2D or 3D.
Range of Values : true or false |
File Example :
3D: true
Html Code Example :
<PARAM name="3D" value="true"> |
|
grid |
Specifies
whether the graph grid should be drawn.
Range of Values : true or false |
File Example :
grid: true
Html Code Example :
<PARAM name="grid" value="true"> |
|
axis |
Specifies
whether the axis should be drawn
Range of Values : true or false |
File Example :
axis:
true
Html Code Example :
<PARAM name="axis"
value="true"> |
|
xlabels |
Specifies
whether the x-axis labels should be drawn
Range of Values : true or false |
File Example :
xlabels:
true
Html Code Example :
<PARAM name="xlabels"
value="true"> |
|
outline |
Specifies
whether the bars should be outlined
Range of Values : true or false |
File Example :
outline:
true
Html Code Example :
<PARAM name="outline" value="true">
|
|
legend |
Specifies
whether the legend should be automatically generated
Range of Values : true or false |
File Example :
legend:
true
Html Code Example :
<PARAM name="legend"
value="true"> |
|
autoscale |
Specifies
whether automatic scaling should be used
Range of Values : true or false
|
File Example :
autoscale: true
Html Code Example :
<PARAM name="autoscale"
value="true"> |
|
gradientfill |
If
set to true then the bars will painted with a shading type effect.
Range of Values : true or false |
File Example :
gradientfill:
true
Html Code Example :
<PARAM name="gradientfill" value="true">
|
|
^back to top
Graph
Characteristics
Parameter |
Description |
Example |
width |
Specifies the width of the Graph Image to be produced. This parameter only applies to the Servlet form,
the Applet form takes the width parameter from the <APPLET> tag.
Range of Values :Positive Integer |
File Example :
width: 500
|
|
height |
Specifies the height of the Graph Image to be produced. This parameter only applies to the Servlet form,
the Applet form takes the height parameter from the <APPLET> tag.
Range of Values : Positive Integer |
File Example :
height: 420
|
|
nCols |
Defines
the number of data points in each series. i.e. the number of horizontal bars.
Range of Values : Positive Integer |
File Example :
nCols: 4
Html Code Example :
<PARAM name="nCols"
value="3"> |
|
nRows |
Defines
the number of x-axis grid portions
Range of Values : Positive Integer |
File Example :
nRows: 7
Html Code Example :
<PARAM name="nRows"
value="10"> |
|
ndecplaces |
Defines the number of decimal places to use when displaying
segment values.
Range of Values : Positive Integer |
File Example :
ndecplaces:
2
Html Code Example :
<PARAM name="ndecplaces"
value="2"> |
|
nSeries |
Specifies the number of series of data
Range of Values : Positive Integer |
File Example :
nSeries:
3
Html Code Example :
<PARAM name="nSeries" value="4"> |
chartScale |
If
"autoscale" if off then this specifies the value each x-grid line represent.
Range of Values : Positive Double / Float / Decimal
|
File Example :
chartScale:
100
Html Code Example :
<PARAM name="chartScale" value="0.2"> |
chartStartX |
If
"autoscale" if off then this specifies the starting value for the x-axis.
Range of Values : Positive or Negative Double / Float /
Decimal
|
File Example :
chartStartX:
0
Html Code Example :
<PARAM name="chartStartX" value="1000"> |
labelOrientation |
Specifies
the orientation of the Y-axis labels
Range of Values : Positive Integer
0 - Horizontal (left justified)
1 - Vertical, top to bottom
2 - 45 degree angle LtoR, BtoT
3 - Vertical, bottom to top
4 - Horizontal (right justified)
5 - 45 degree angle LtoR, TtoB
|
File Example :
labelOrientation:
4
Html Code Example :
<PARAM name="labelOrientation"
value="2"> |
labelsX |
Specifies
the Y-position of the x-axis labels.
Range of Values : Positive Integer
|
File Example :
labelsX:
350
Html Code Example :
<PARAM name="labelsX"
value="350"> |
labelsX_offset |
Every
other label will be drawn this number of pixels below the non-offset labels.
Range of Values : Positive Integer
|
File Example :
labelsX_offset:
15
Html Code Example :
<PARAM name="labelsX_offset"
value="15"> |
bar_spacing |
Specifies
the gap between bars
Range of Values : Positive Integer
|
File Example :
bar_spacing:
10
Html Code Example :
<PARAM name="bar_spacing"
value="0"> |
barwidth |
Specifies
the width of each bar
Range of Values : Positive Integer
|
File Example :
barwidth:
15
Html Code Example :
<PARAM name="barwidth"
value="25"> |
depth3D |
depth
of the 3D effect
Range of Values : Positive Integer
|
File Example :
depth3D:
15
Html Code Example :
<PARAM name="depth3D" value="25"> |
linkCursor |
Defines the Cursor to be displayed when the mouse passes over a clickable area
Range of Values :
crosshair
default
hand
move
text
wait
|
File Example :
linkCursor: hand
Html Code Example :
<PARAM name="linkCursor" value="hand"> |
BackgroundColor |
Specifies
the background color for the whole chart area
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
BackgroundColor:
#FFFFFF
Html Code Example :
<PARAM name="BackgroundColor"
value="white"> |
barOutlineColor |
Specifies
the outline color for the bars
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
barOutlineColor:
#505050
Html Code Example :
<PARAM name="barOutlineColor"
value="dark grey"> |
^back to top
Grid Properties
Parameter |
Description |
Example |
gridxpos |
Specifies the position of the left hand side of the grid
Range of Values : Positive Integer |
File Example :
gridxpos
: 75
Html Code Example :
<PARAM name="gridxpos" value="100">
|
|
gridypos |
Specifies the position of the bottom of the grid
Range of Values : Positive Integer |
File Example :
gridypos
: 350
Html Code Example :
<PARAM name="gridypos" value="400">
|
|
hSpace |
Specifies the size in pixels of each x-axis grid portion
Range of Values : Positive Integer |
File Example :
hSpace :
30
Html Code Example :
<PARAM name="hSpace" value="40"> |
gridstyle |
Defines
the line style with which to draw the grid lines.
Range of Values : Positive Integer
1 - Solid Line
2 - Dotted Line
3 - Dashed, short
4 - Dashed, long
|
File Example :
gridstyle:
2
Html Code Example :
<PARAM name="gridstyle"
value="2"> |
gridbgcolor |
Specifies
the background color for the grid area
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
gridbgcolor:
#808080
Html Code Example :
<PARAM name="gridbgcolor"
value="light blue"> |
gridbgimage |
provides
the ability to specify an image for the background of the grid area.
Range of Values : URL to image file
|
File Example :
gridbgimage:
gridbg.gif
Html Code Example :
<PARAM name="gridbgimage"
value="gridbg.gif"> |
gridColor |
Specifies
the color of the grid lines
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
gridColor:
#A0A0A0
Html Code Example :
<PARAM name="gridColor"
value="grey"> |
axisColor |
Specifies
the color of the axis lines
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
axisColor:
#000000
Html Code Example :
<PARAM name="axisColor"
value="black"> |
floorColor |
Specifies
the floor color for the grid area. (not relevant in 2D mode).
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
gridbgColor:
red
Html Code Example :
<PARAM name="gridbgColor"
value="#FF0000">
|
^back to top
Label Properties
Parameter |
Description |
Example |
ylabel_font |
Defines the font for the y labels
Range of Values : Font Definition
(click here for More on Defining fonts) . |
File Example :
ylabel_font: Arial,N,10
Html Code Example :
<PARAM name="ylabel_font" value="Arial,N,10">
|
xlabel_font |
Defines the font for the x labels
Range of Values : Font Definition
(click here for More on Defining fonts) . |
File Example :
xlabel_font: Arial,N,10
Html Code Example :
<PARAM name="xlabel_font" value="Arial,N,10">
|
popupfont |
Defines the font for the pop-up values.
Range of Values : Font Definition
(click here for More on Defining fonts) . |
File Example :
popupfont: Arial,N,10
Html Code Example :
<PARAM name="popupfont" value="Arial,N,10">
|
labelColor |
Specifies
the color of the labels.
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
labelColor:
black
Html Code Example :
<PARAM name="labelColor"
value="#000000">
|
popupbgcolor |
Specifies
the bg color of the pop-up labels.
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
popupbgcolor:
light blue
Html Code Example :
<PARAM name="popupbgcolor"
value="#5555FF">
|
xlabel_pre |
Specifies any characters to placed at the beginning of the X axis labels e.g. a currency symbol.
Range of Values : Alphanumeric |
File Example :
xlabel_pre: $
Html Code Example :
<PARAM name="x label_pre"
value="$"> |
xlabel_post |
Specifies any characters to placed at the end of the X axis labels
e.g. a measurement symbol.
Range of Values : Alphanumeric |
File Example :
xlabel_post: Kg
Html Code Example :
<PARAM name="xlabel_post"
value="Kg"> |
popup_pre |
Specifies any characters to placed at the beginning of the pop-up labels
e.g. a currency symbol.
Range of Values : Alphanumeric |
File Example :
popup_pre: $
Html Code Example :
<PARAM name="popup_pre"
value="$"> |
popup_post |
Specifies any characters to placed at the end of the pop-up labels
e.g. a measurement symbol.
Range of Values : Alphanumeric |
File Example :
xlabel_post: Kg
Html Code Example :
<PARAM name="popup_post"
value="Kg"> |
^back to top
Bar Labels
The y-axis labels are supplied by the labelN parameter, where N represents
an integer number starting with 1. There should be the same number of labels as the number of data points in each series
(ie. as specified by the nCols parameter above).
So if you have 2 series of data each with 4 data values,
File Example :
label1 Quarter 1
label2 Quarter 2
label3 Quarter 3
label4 Quarter 4
Html Code Example :
<PARAM name="label1" value="Quarter 1">
<PARAM name="label2" value="Quarter 2">
<PARAM name="label3" value="Quarter 3">
<PARAM name="label4" value="Quarter 4">
|
^back to top
Automatic Legend
The following set of parameters define the characteristics of the automatic legend,
Parameter |
Description |
Example |
legendfont |
Defines the font for the legend.
Range of Values : Font
Definition
(click here for More on Defining fonts) .. |
File Example :
legendfont: Arial,N,10
Html Code Example :
<PARAM name="legendfont" value="Arial,N,10">
|
|
legendposition |
Defines
the x,y position of the top left of the legend.
Range of Values :
integer number (X value), integer number (Y value) . . |
File Example :
legendposition:
345,15
Html Code Example :
<PARAM name="legendposition" value="345,15">
|
|
legendtitle |
The text for legend title.
Range of Values : text |
File Example :
legendtitle:
Products
Html Code Example :
<PARAM name="legendtitle" value="Products">
|
|
legendBackground |
Legend
background color
Range of Values : Color Definition
(click here for More on Defining colors) . |
File Example :
LegendBackground:
166,210,255
Html Code Example :
<PARAM name="LegendBackground" value="166,210,255">
|
|
legendBorder |
Legend
border color
Range of Values : Color Definition
(click here for More on Defining colors) . |
File Example :
LegendBorder:
light grey
Html Code Example :
<PARAM name="LegendBorder" value="#AAAAAA">
|
|
legendtextColor |
Legend
text color
Range of Values : Color Definition
(click here for More on Defining colors) . |
File Example :
LegendtextColor:
black
Html Code Example :
<PARAM name="LegendtextColor" value="black">
|
|
^back to top
Graph Titles
Parameter |
Description |
Example |
title |
Defines the main title for the graph. This parameter
is made up of four elements each separated by a | character. The four elements represent, Title Text, Title Position,
Font and Text Color.
Range of Values :
Text | Position | Font definition | Color definition. |
File Example :
title:
Sales by Quarter|50,20|Arial,BI,18|grey
Html Code Example :
<PARAM name="title"
value="Sales
by Quarter|50,20|Arial,BI,18|grey"> |
|
xtitle |
Defines the x axis title for the graph. This parameter is
made up of four elements each separated by a | character. The four elements represent, Title Text, Title Position, Font
and Text Color.
Range of Values :
Text | Position | Font definition | Color definition. |
File Example :
xtitle:
Year 2002|200,400|Arial,B,16|grey
Html Code Example :
<PARAM name="xtitle"
value="Year 2002|200,400|Arial,B,16|grey">
|
|
ytitle |
Defines the y axis title for the graph. This parameter is made up of four elements each separated by a | character.
The four elements represent, Title Text, Title Position, Font and Text Color.
Range of Values :
Text | Position | Font definition | Color definition.. |
File Example :
ytitle:
Value $|10,300|Arial,B,16|grey
Html Code Example :
<PARAM name="ytitle"
value="Value
$|10,300|Arial,B,16|grey"> |
|
^back to top
Series Characteristics
For each series of data, 2 characteristics can be defined, Bar Color
and Legend text. These are supplied via the "seriesN" (where N is an integer ranging from 1 to the total number
of series) parameter separated by a | character.
Range of Values : Color definition |Legend Text.
(Click here for More on Defining colors)
For example if we have 3 series of the data,
File Example :
series1: 200,0,0|Series 1
series2: 200,0,200|Series 2
series3: 0,200,0||Series 3
Html Code Example :
<PARAM name="series1" value="200,0,0|Series 1">
<PARAM name="series2" value="200,0,200|Series 2">
<PARAM name="series3" value="0,200,0|Series 3">
|
^back to top
Target Lines
The graph allows for the incorporation of up to 20 target lines. This
is achieved via the "targetN" parameter, where N can range from 1 to 20.
The targetN parameter is made up of 5 elements each separated by a
| character. The 5 elements represent,
Color, Line Style, Value, Label, Label Font.
For example if we require a Green Target line with a value of 5500, with a label of "Target" we would have,
File Example :
target1: 0,125,0|4|5500|Target|Arial,N,10
Html Code Example :
<PARAM name="target1" value="0,125,0|4|5500|Target|Arial,N,10">
|
^back to top
Free Form Text
In addition to the title parameter, the graph allows for an unlimited
number of lines of text to be added to the graph image. This is achieved via the "textN" parameter, where N is
a positive integer starting with 1.
This feature is particularly useful where you wish to add notes or individual
titles to each pie.
As with the title, the textN parameter is made up of four elements each
separated by a | character. The four elements represent,
Text, Title Position, Font and Text Color.
Range of Values : Text | Position | Font definition | Color definition.
File Example :
text1: Note :|80,60|TimesRoman,N,12|0,0,255
text2: New product range|80,80|TimesRoman,N,12|0,0,0
text3: launched during|80,100|TimesRoman,N,12|0,0,0
text4: quarter 2.|80,120|TimesRoman,N,12|0,0,0
Html Code Example :
<PARAM name="text1" value="Note :|80,60|TimesRoman,N,12|0,0,255">
<PARAM name="text2" value="New product range|80,80|TimesRoman,N,12|0,0,0">
<PARAM name="text3" value="launched during|80,100|TimesRoman,N,12|0,0,0">
<PARAM name="text4" value="quarter 2.|80,120|TimesRoman,N,12|0,0,0">
|
^back to top
Free Form Images
The graph allows for any number of images/icons to be added to the graph
image. This is achieved via the "imageN" parameter, where N is a positive integer starting with 1.
This feature is particularly useful where you wish to incorporate a
company / product logo into the graph image. It can also be used to incorporate a custom designed legend into the graph
image (in this case remember to turn off the automatic legend).
The imageN parameter is made up of three elements each separated by
a , (comma) character. The three elements represent,
Image URL, X position, Y position.
Range of Values : URL , X position , Y position.
File Example :
image1: ./images/logo.gif,0,0
image2: ./images/legend.gif,210,0
Html Code Example :
<PARAM name="image1" value="./images/logo.gif,0,0">
<PARAM name="image2" value="./images/legend.gif,210,0">
|
^back to top |