|
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 separator.
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 horizontal 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 x-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">
|
| 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 vertical 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 |
Specifies 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 position 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 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
|
| Trend Lines |
|
The graph allows for the incorporation of up to 20 trend lines.
This is achieved via the "trendN" 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 :
trend: 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
|
|
[
