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 ).
In this release, the Line Graph will automatically
calculate and set values for any parameters which are
not supplied. This means that all of the following are
optional.
General Graph properties |
Parameter |
Description |
Example |
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=","> |
|
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"> |
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"> |
^back to top
|
Grid properties |
Parameter |
Description |
Example |
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"> |
|
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"> |
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"> |
|
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"> |
|
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">
|
nPoints |
Specifies
the maximum number of data points
to a series. This is used to determine the
number of vertical grid segments.
If this parameter is not present then the
applet will automatically calculate this
figure from the data supplied.
Range
of Values : Positive Integer
|
File Example :
nPoints
:
12
Html Code Example :
<PARAM name="nPoints"
value="12"> |
nRows |
Specifies
the number of horzintal grid rows. If this
parameter is not present then a value of 10
will be used.
Range
of Values : Positive Integer |
File Example :
nRows
:
5
Html Code Example :
<PARAM name="nRows"
value="5"> |
^back to top
|
Scale properties |
Parameter |
Description |
Example |
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"> |
|
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"> |
^back to top
|
3D properties |
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">
|
|
depth3D |
depth
of the 3D effect
Range
of Values : Positive Integer
|
File Example :
depth3D:
15
Html Code Example :
<PARAM name="depth3D"
value="25"> |
outline |
Specifies
whether the 3D line segments should
be outlined. This parameter has
no effect if the chart is running in
2D mode.
Range
of Values : true or false
|
File Example :
outline:
true
Html Code Example :
<PARAM name="outline"
value="true"> |
|
^back to top
|
Legend properties |
Parameter |
Description |
Example |
legend |
Turns the automatic legend on
or off.
Range of Values :
Boolean flag, can be "true"
or "false".. |
File Example :
legend:
true
Html Code Example :
<PARAM name="legend"
value="true"> |
|
|
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"> |
|
LegendStyle |
Specifies
whether a vertical or horizontal legend
should be generated.
Range of Values :
"Vertical" or
"Horizontal"
|
File Example :
LegendStyle:
Vertical
Html Code Example :
<PARAM name="LegendStyle"
value="Horizontal">
|
|
^back to top
|
X Axis Labels |
The
xaxis 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">
|
Parameter |
Description |
Example |
labelOrientation |
Defines
the orientation of the x labels
Range of Values :
one of the following:-
"Horizontal"
"Vertical"
"Up Angle"
"Down Angle"
|
File Example :
labelOrientation:
Up Angle
Html Code Example :
<PARAM name="labelOrientation"
value="Down Angle"> |
labelsY |
Specifies
the veritcal position of the x-axis labels
Range of Values :
Integer Value. If this value is set to
-1 then the applet will calculate this figure
based upon the grid position. |
File Example :
labelsY:
250
Html Code Example :
<PARAM name="labelsY"
value="-1"> |
|
|
|
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"> |
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">
|
^back to top
|
Y Axis Labels |
Parameter |
Description |
Example |
ylabels |
Specifes whether y-axis labels
should be displayed.
Range of Values :
Boolean flag, can be "true"
or "false".. |
File Example :
ylabels:
true
Html Code Example :
<PARAM name="ylabels"
value="true"> |
|
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"> |
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">
|
ylabel_pre |
Specifies any characters to placed at the
beginning of the Y axis 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="%"> |
^back to top
|
Graph Titles |
Auto-Calc position
In each of the following parameters if the
positon is set to "-1,-1" then the chart
will automatically calculate the position of each
title.
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
|
Pop-Up Value Displays |
Parameter |
Description |
Example |
popupfont |
Defines
the font for the popup 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"> |
popupbgcolor |
Specifies
the bg color of the popup 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">
|
popup_pre |
Specifies any characters to placed at the
beginning of the popup 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
popup 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
|
Series Specifications |
For
each series of data, 7 characteristics can
be defined:-
-
Line Color
- Point
Style
- Point
Size
- Fill
- Legend
text
- Legend
Link
- Legend
Link Target frame or window
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 |Integer between
1 & 7|Integer|true or false|Legend Text.
(Click here for More
on Defining colors)
For the Point style the following symbols
are represented,
- 0 - Dot ( default )
- 1 - Cross ( + )
- 2 - Cross ( X )
- 3 - Box
- 4 - Triangle
- 5 - Diamond
- 6 - Circle
- 7 - Hexagon
Each of the symbols can be outline or solid
by setting the fill element to false or
true.
For
example if we have 3 series of the data,
File
Example :
series1: #F00000|6|16|false|Series 1
series2: #F000F0|6|16|true|Series 2
series3: #00F000|0|10|false|Series 3
Html
Code Example :
<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">
|
^back to top
|
Target Lines |
The
graph allows for the incorporation of upto
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
|
Trend Lines |
The
graph allows for the incorporation of upto
20 trend lines. This is achieved via the
"trend" parameter, where N can
range from 1 to 20.
The trendN parameter is made up of
seven elements each separated by a | character.
The seven elements represent,
Color, Start Point, End Point, Start Value,
End Value, Label, Label Font.
For example if we require a Red trend line
to run from data point 3 to 10 with a starting
value of 7500 and an end value of 10500
with a label of "Trend 1" we would
have,
File
Example :
trend1:
175,0,0|3|10|7500|10500|trend 1|Arial,N,10
Html
Code Example :
<PARAM
name="trend1" value="175,0,0|3|10|7500|10500|trend
1|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
|
|