bar graph

2D / 3D Horizontal Bar Graph Documentation

[ Bar Graph Home ] [ Tutorials ] [ Getting Started ] [ Examples & Demos ] [ Solutions ]

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 : Parameters Names are case sensitive. ( i.e. axis is not the same as Axis ).

    1. Graph Switches
    2. Graph Characteristics
    3. Grid Properties
    4. Label Properties
    5. Bar Labels
    6. Automatic Legend
    7. Titles
    8. Series Characteristics
    9. Target Lines
    10. Free Form Text
    11. Free Form Images
    12. 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">
xlabels Specifies whether the x-axis labels should be drawn

Range of Values : true or false
File Example :
xlabels: true

Html Code Example :
<PARAM name="x
labels" 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 Horizontal bars.

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

Html Code Example :
<PARAM name="
nCols" value="3">
nRows Defines the number of x-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">
chartStartX

If "autoscale" if off then this specifies the starting value for the x-axis.

Range of Values : Positive or Negative Double / Float / Decimal

 

File Example :
chartStartX: 0

Html Code Example :
<PARAM name="chartStartX
" value="1000">
hSpace

Specifies the horizontal spacing of the grid lines. This figure represents the number of pixels between the grid lines.

Range of Values : Positive Integer

File Example :
hSpace: 30

Html Code Example :
<PARAM name="hSpace
" value="30">
labelsX

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">
labelsX_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">
hSpace Specifies the size in pixels of each y-axis grid portion

Range of Values : Positive Integer
File Example :
hSpace : 30

Html Code Example :
<PARAM name="hSpace
" 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 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">
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="popupbgc
olor" value="#5555FF">
xlabel_pre Specifies any characters to placed at the beginning of the Xaxis labels e.g. a currency symbol.

Range of Values : Alphanumeric
File Example :
xlabel_pre: $

Html Code Example :
<PARAM name="
x label_pre" value="$">
xlabel_post Specifies any characters to placed at the end of the X axis labels
e.g. a measurement or percent symbol.


Range of Values : Alphanumeric
File Example :
xlabel_post: Kg

Html Code Example :
<PARAM name="x
label_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 separator.

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="x
title" 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, 4 characteristics can be defined:-

  • Bar Color
  • 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,

File Example :
series1: #F00000|Series 1|./link1.htm|framename
series2: #F000F0|Series 2|./link2.htm|framename
series3: #00F000|Series 3|./link3.htm|framename

Html Code Example :
<PARAM name="series1" value="#F00000|Series 1|./link1.htm|framename">
<PARAM name="series2" value="#F000F0|Series 2|./link2.htm|framename">
<PARAM name="series3" value="#00F000|Series 3|./link3.htm|framename">


^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

 

 

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

[ Bar Graph Home ] [ Tutorials ] [ Getting Started ] [ Examples & Demos ] [ Solutions ]

Getting Started

Documentation

Examples

Tutorials

Common Problems
This section describes and provides solutions to common problems.