graph demo

Vertical Bar Graph Parameter Reference

graph demo[ Home ] [ Products ] [ Downloads ] [ Purchase ]
[ Support ] [ About Us ]

Vertical Bar Graph Full Parameter Reference

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].

Please Note : Parameter names are case sensitive. ( i.e. 'grid' is not the same as 'Grid' ).

General Graph Properties

NameDescriptionExample
width Specifies the width of the graph display area

If using the Applet form of the graph this parameter is specified within the <APPLET> tag
If using the Servlet form of the graph this parameter should be specified in the configuration file.

Range of Values :
Integer representing the number of pixels
File Example :
width: 500

Html Code Example :
<APPLET ..... WIDTH="500" .....>
height Specifies the height of the graph display area

If using the Applet form of the graph this parameter is specified within the <APPLET> tag
If using the Servlet form of the graph this parameter should be specified in the configuration file.

Range of Values :
Integer representing the number of pixels
File Example :
height: 450

Html Code Example :
<APPLET ..... HEIGHT="450" .....>
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: ,

Html Code Example :
<PARAM name="linkCursor" value="">
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">

Grid and Bar Properties

NameDescriptionExample
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="false">
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="false">
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">
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">
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 :
floorColor: red

Html Code Example :
<PARAM name="floorColor" value="#FF0000">
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="8">
nCols Specifies the number of vertical grid rows. This is also the max number of data items in a series.

Range of Values : Positive Integer
File Example :
nCols: 12

Html Code Example :
<PARAM name="nCols" value="6">
barwidth Specifies the width in pixels of each bar

Range of Values : Positive Integer
File Example :
barwidth: 25

Html Code Example :
<PARAM name="barwidth" value="40">
barOutlineColor The color of the outline of each bar

Range of Values :
Color Definition
(click here for More on Defining colors)
File Example :
barOutlineColor: #000000

Html Code Example :
<PARAM name="barOutlineColor" value="#883322">
gradientfill Specifies whether a shading effect should be applied to each bar

Range of Values : true or false
File Example :
gradientfill: 12

Html Code Example :
<PARAM name="gradientfill" value="6">
bar_spacing Specifies the space in pixels between each bar

Range of Values : Positive Integer
File Example :
bar_spacing: 0

Html Code Example :
<PARAM name="bar_spacing" value="15">

Scale Properties

NameDescriptionExample
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="false">
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="-500">
chartScale2 If "autoscale" if off then this specifies the value each y-grid line represents on the second (right) scale.

Range of Values : Positive Double / Float / Decimal
File Example :
chartScale2: 100

Html Code Example :
<PARAM name="chartScale2" value="0.2">
chartStartY2 If "autoscale" if off then this specifies the starting value for the second (right) y-axis.

Range of Values : Positive or Negative Double / Float / Decimal
File Example :
chartStartY2: 0

Html Code Example :
<PARAM name="chartStartY2" value="-500">

3D Properties

NameDescriptionExample
3D Specifies whether the graph should be drawn in 2D or 3D

Range of Values : true or false
File Example :
3D: false

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="false">

Legend Properties

NameDescriptionExample
legend Turns the automatic legend on or off.

Range of Values : 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,B,12">
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: 50,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: #CCEEFF

Html Code Example :
<PARAM name="legendBackground" value="#EEEEEE">
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="#A0A0A0">
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="#000000">

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).

For example if there are 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">
NameDescriptionExample
labelOrientation Defines the orientation of the x 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: 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,I,14

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">
labelsY_offset Specifies how much every other label should be offset in the vertical direction

Range of Values : Integer Value
File Example :
labelsY_offset: 20

Html Code Example :
<PARAM name="labelsY_offset" value="0">

Y axis Labels

NameDescriptionExample
ylabels Specifies whether y-axis labels should be displayed.

Range of Values : 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: blue

Html Code Example :
<PARAM name="labelColor" value="#3333FF">
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="ylabel_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_color Specifies the color of the labels for the second (right) scale

Range of Values :
Color Definition
(click here for More on Defining colors)
File Example :
y2label_color: blue

Html Code Example :
<PARAM name="y2label_color" value="#3333FF">
y2label_pre Specifies any characters to placed at the beginning of the Y axis labels for the second (right) scale e.g. a currency symbol.

Range of Values : Alphanumeric
File Example :
y2label_pre: £

Html Code Example :
<PARAM name="y2label_pre" value="$">
y2label_post Specifies any characters to placed at the end of the Y axis labels second (right) scale
e.g. a measurement or percent symbol.

Range of Values : Alphanumeric
File Example :
y2label_post: Kg

Html Code Example :
<PARAM name="y2label_post" value="%">

Graph Titles

NameDescriptionExample
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,B,18|#888888">
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 2006|200,400|Arial,B,16|#A0A0A0

Html Code Example :
<PARAM name="xtitle" value="Year 2006|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|##44FF44

Html Code Example :
<PARAM name="ytitle" value="Value $|10,300|Arial,B,16|green">

Pop Up Value Display Properties

NameDescriptionExample
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 background 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 :
popup_post: Mbps

Html Code Example :
<PARAM name="popup_post" value="m/s">

Series Specifications

For each series of data, 5 characteristics can be defined:-

Bar Color
Scale (left or right) 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 |left or right|Legend Text|Legend Link|Target Frame.

(click here for More on Defining colors)

File Example :
series1: #F00000|left|Series 1|./link1.htm
series2: #F000F0|left|true|Series 2|./link2.htm|_self
series3: #00F000|right|false|Series 3

Html Code Example :
<PARAM name="series1" value="#F00000|left|Series 1">
<PARAM name="series2" value="#F000F0|right|Series 2">
<PARAM name="series3" value="#00F000|left|Series 3">

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">
JavaScript CSS Image Gallery