Bar Graph Configuration Options
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"> |
|
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"> |
|
^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 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"> |
^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"> |
|
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">
|
^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 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"> |
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 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">
|
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 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"> |
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=","> |
^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 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">
|
^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, 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">
|
^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
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
<< back to Documentation Index
<< back to Getting
Started
|
Getting Started
Documentation
Examples
Tutorials
Common Problems
Purchase
Bar
Graph Home
Graph
& Charting
Pie
Chart
Line Graph
Vertical
Bar Graph
Stacked
Bar Graph
Horizontal
Bar Graph
Area
Graph
more...
Advanced
Data Grid Control
|