|
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 : Parameters 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"> |
|
| ylabels |
Specifies
whether the y-axis labels should be drawn
Range of Values : true or false |
File Example :
ylabels:
true
Html Code Example :
<PARAM name="ylabels"
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">
|
|
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 vertical bars.
Range of Values : Positive Integer |
File Example :
nCols: 4
Html Code Example :
<PARAM name="nCols"
value="3"> |
|
| nRows |
Defines
the number of y-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 y-grid line represents.
Range of Values : Positive Double / Float / Decimal
|
File Example :
chartScale:
100
Html Code Example :
<PARAM name="chartScale" value="0.2"> |
| chartStartY |
If
"autoscale" if off then this specifies the starting value for the y-axis.
Range of Values : Positive or Negative Double / Float /
Decimal
|
File Example :
chartStartY:
0
Html Code Example :
<PARAM name="chartStartY" value="1000"> |
| chartScale2 |
If
a second (right hand) grid scale is required then this paramater specifies the value each y-grid line represents on the
second scale.
Range of Values : Positive Double / Float / Decimal
|
File Example :
chartScale2:
100
Html Code Example :
<PARAM name="chartScale2" value="0.2"> |
| chartStartY2 |
If
a second (right hand) scale is required then this specifies the starting value for the right side y-axis.
Range of Values : Positive or Negative Double / Float /
Decimal
|
File Example :
chartStartY2:
0
Html Code Example :
<PARAM name="chartStartY2" value="1000"> |
| labelOrientation |
Specifies
the orientation of the X-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"> |
| labelsY |
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"> |
| labelsY_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"> |
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">
|
|
| vSpace |
Specifies the size in pixels of each y-axis grid portion
Range of Values : Positive Integer |
File Example :
vSpace :
30
Html Code Example :
<PARAM name="vSpace" 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">
|
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">
|
| y2label_color |
Specifies
the color of the labels of the right hand grid labels if a second y scale is used..
Range of Values : Color Definition
(click here for More on Defining colors) .
|
File Example :
y2label_color:
black
Html Code Example :
<PARAM name="y2label_color"
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">
|
| ylabel_pre |
Specifies any characters to placed at the beginning of the Yaxis labels e.g. a currency symbol.
Range of Values : Alphanumeric |
File Example :
ylabel_pre: $
Html Code Example :
<PARAM name="y label_pre"
value="$"> |
| ylabel_post |
Specifies any characters to placed at the end of the Y axis labels
e.g. a measurement or percent symbol.
Range of Values : Alphanumeric |
File Example :
ylabel_post: Kg
Html Code Example :
<PARAM name="ylabel_post"
value="%"> |
| y2label_pre |
Specifies any characters to placed at the beginning of the right hand Yaxis labels e.g. a currency symbol.
Range of Values : Alphanumeric |
File Example :
y2label_pre: $
Html Code Example :
<PARAM name="y2 label_pre"
value="$"> |
| y2label_post |
Specifies any characters to placed at the end of the right hand
Y axis labels
e.g. a measurement or percent symbol.
Range of Values : Alphanumeric |
File Example :
y2label_post: Kg
Html Code Example :
<PARAM name="y2label_post"
value="%"> |
| 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"> |
| thousandseparator |
Specifies the character to be used as a thousand seperator.
Range of Values : Alphanumeric |
File Example :
thousandseparator: ,
Html Code Example :
<PARAM name="thousandseparator" value=",">
|
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 datapoints 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">
|
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">
|
|
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"> |
|
Series Characteristics
|
For each series of data, 5 characteristics can be defined:-
- Bar Color
- Scale (left or right)
- Legend text
- Legend Text Link URL
- Legend Text Link Target Frame
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 :
For example if we have 3 series of the data where the first 2 use the
left hand y-axis scale and 3rd uses the right-hand y-axis scale,
File Example :
series1: #F00000|left|Series 1|./link1.htm|framename
series2: #F000F0|left|Series 2|./link2.htm|framename
series3: #00F000|right|Series 3|./link3.htm|framename
Html Code Example :
<PARAM name="series1" value="#F00000|left|Series
1|./link1.htm|framename">
<PARAM name="series2" value="#F000F0|left|Series 2|./link2.htm|framename">
<PARAM name="series3" value="#00F000|right|Series 3|./link3.htm|framename">
|
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">
|
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">
|
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">
|
|
[
