Configuration Options

The Advanced Graph and Chart Software for PHP allows all aspects of the graph to be set via a range of configuration parameters.

With the exception of 2 parameters, all of the following are optional and if not supplied the graph will automatically calculate the values.

The only 2 parameters which must be supplied in all cases are width and height.
(Note: the width and height in the configuration should match the width and height values specified in the IMG tag.)

The configuration options can be supplied:-

in a static text file
with the data
or on the request URL in the image tag

For instance you may find that most of your options (e.g. graph titles and font settings) remain the same and so these would be supplied in a static text file. Other parameters (e.g. X-axis labels) may vary depending upon the data being retrieved. As such the values of these would be dynamically calculated and supplied along with the data.

The following tables list all the possible options and describes the function of each parameter.

General Graph properties
Grid properties
Scale properties
3D properties
Legend properties
X Axis Labels
Y Axis Labels
Graph Titles
Series Specifications
Pie Chart Properties
Target Lines
Trend Line
Free Form Text
Free Form Images

Also see:-

Graph Data »

General Graph Properties

Name	Description	Example
width	integer value Specifies the width of the graph in pixels. This value should match the WIDTH element specified in the IMG tag. Note: This parameter is mandatory !	width: 550
height	integer value Specifies the height of the graph in pixels. This value should match the HEIGHT element specified in the IMG tag. Note: This parameter is mandatory !	height: 400
ndecplaces	integer value Specifies the number of decimal places to use when displaying values	ndecplaces: 2
thousandseparator	Any character symbol.	thousandseparator: ,
backgroundcolor	Color definition (see Colors ») general background color of the graph image	backgroundcolor: #ffffff
transparency	Integer value between 0 and 127. This value specifies the transparency of bubbles, bars and areas so that where items overlap the underlying item may still be seen. 0 represents totally opaque whilst 127 represents totally transparent. A good value for this parameter is 40.	transparency: 40
bgimage	URL to an Image file specifies an image to used as the background	bgimage: graphBackground.jpg
maxbubblesize	Applies only to the Bubble Chart Specifies the Maximum Bubble size in pixels. The data point with the largest Z value will be drawn at this size. All other data items will be scaled accordingly.	maxbubblesize: 20
quality	For Pie and Cylinder charts this parameter specifies the amount of 'curve smoothing' (anit-aliasing) that will take place. The higher the quality parameter the better the resultant image. Valid values are:- low medium high very high	quality: high
connectinglines	True or False determines whether points should be connected or not	connectinglines: true
outline	True or False specifies whether bars should be outlined or not	outline: true
gradientfill	True or False for bar and cylinder charts turns the gradient fill effect on or off	gradientfill: true
barwidth	integer value width in pixels of each bar or cylinder	barwidth: 30
barspacing	integer value space in pixels between each bar or cylinder	barspacing: 5
displaybarvalues	True or False specifies whether actual values should be displayed at the top of each point	displaybarvalues: true
displayvalues	True or False specifies whether actual values should be displayed at the top of each point	displayvalues: true

Grid Properties

Name	Description	Example
grid	True or False specifies whether to draw grid lines or not	grid: true
axis	True or False specifies whether to draw axis lines or not	axis: true
nrows	integer value number of grid rows	nrows: 10
ncols	number of grid columns	ncols: 5
vspace	integer value space in pixels of each grid row	vspace: 30
hspace	integer value space in pixels of each grid column	hspace: 40
gridstyle	valid values are:- solid dashed dotted long dashed dotted dashed specifies the line style of the grid lines	gridstyle: dotted
gridcolor	Color definition (see Colors ») Grid line color	gridcolor: #000000
axiscolor	Color definition (see Colors ») Axis line color	axiscolor: #0000FF
floorcolor	Color definition (see Colors ») If 3D is on then this specifies the color of the x-axis floor	floorcolor: #555599
gridbgimage	URL to an Image file specified an image to used as the grid background	gridbgimage: brimage.gif
gridbgcolor	Color definition (see Colors ») the background color of the grid area	gridbgcolor: #EEEEEE
gridposition	an x,y, position pair specifies the position of the bottom left of the grid	gridposition: 30,275
gridlineh	True or False Turns horizontal grid lines on or off	gridlineh: false
gridlinev	True or False Turns vertical grid lines on or off	gridlinev: false
gridbgcolor2	Color definition (see Colors ») specifies a second background color of the grid area. If this parameter is specified then grid rows are colored alternating between this color and gridbgcolor	gridbgcolor2: #DDDDDD

Scale Properties

Name	Description	Example
Vertical Type Charts
chartscale	Numeric Value specifies the value the each grid row is to represent on the left hand axis	chartscale: 1000
chartstarty	Numeric Value specifies the starting value for the left hand axis	chartstarty: 0
chartscale2	Numeric Value specifies the value the each grid row is to represent on the right hand axis	chartscale2: 0.1
chartstarty2	Numeric Value specifies the starting value for the right hand axis	chartstarty2: 0.5
Horizontal Type Charts
chartscalex	Numeric Value specifies the value the each grid column is to represent on the bottom axis	chartscalex: 50
chartstartx	Numeric Value specifies the starting value for the bottom axis	chartstartx: 200
chartscalex2	Numeric Value specifies the value the each grid column is to represent on the top axis	chartscalex2: 0.5
chartstartx2	Numeric Value specifies the starting value for the top axis	chartstartx2: 10.0

3D Properties

Name	Description	Example
3d	True or False determines whether the graph should be 3D or 2D	3d: true
depth3d	Integer Value specifies the depth in pixels of the 3D effect	depth3d: 20

Legend Properties

Name	Description	Example
legend	True or False determines whether the graph legend should be drawn or not	legend: true
legendstyle	horizontal or vertical specifies whether the legend should be horizontal or vertical	legendstyle: horizontal
legendbgcolor	Color definition (see Colors ») background color of the legend area	legendbgcolor: #FFFFFF
legendbordercolor	Color definition (see Colors ») border color of the legend	legendbordercolor: #8888FF
legendtextcolor	Color definition (see Colors ») text color of the legend	legendtextcolor: #000000
legendtitle	Text legend title. leave blank if no title required.	legendtitle: The Legend
legendposition	X,Y position pair position of the legend.	legendposition: 50,50
legendfont	Font Face Arial Times Roman Courier	legendfont: arial
legendfontsize	Font Size in pixels	legendfontsize: 12
legendfontbold	True or False Sets Bold on the font	legendfontbold: true
legendfontitalic	True or False Sets italic on the font	legendfontitalic: false

X Axis Labels

Name	Description	Example
xlabelorientation	can be one of - horizontal - vertical - up angle - downangle specifies the orientation of the x-axis labels	xlabelorientation: up angle
xlabelypos	Integer value specifies the y position of the x-axis labels	xlabelypos: 250
xlabeloffset	Integer Value species the pixel y offset of every second label. Useful when a horizontal orientaiton is specified	xlabeloffset: 15
xlabelcolor	Color definition (see Colors ») x-axis label text color	xlabelcolor: #0000A9
xlabels	Vertical Type Charts List of labels seperated by \| character. Horizontal Type Charts True or False determines whether x-axis labels should be drawn or not	Vertical Type Charts xlabels: Jan\|Feb\|Mar Horizontal Type Charts xlabels: true
xlabelfont	Font Face Arial Times Roman Courier	xlabelfont: arial
xlabelfontsize	Font Size in pixels	xlabelfontsize: 10
xlabelfontbold	True or False Sets Bold on the font	xlabelfontbold: false
xlabelfontitalic	True or False Sets italic on the font	xlabelfontitalic: false
xlabelpre	For Horizontal charts this is the text to place in front of each number value	xlabelpre: $
xlabelpost	For Horizontal charts this is the text to place after each number value	xlabelpost: kpg
Horizontal Type Charts with a Second Scale
x2labelorientation	an be one of horizontal vertical up angle downangle specifies the orientation of the x-axis labels	x2labelorientation: down angle
x2labelcolor	Color definition (see Colors ») x-axis label text color	x2labelcolor: #0000A9
x2labels	True or False determines whether x-axis labels should be drawn or not	x2labels: true
x2labelfont	Font Face Arial Times Roman Courier	x2labelfont: arial
x2labelfontsize	Font Size in pixels	x2labelfontsize: 10
x2labelfontbold	True or False Sets Bold on the font	x2labelfontbold: false
x2labelfontitalic	True or False Sets italic on the font	x2labelfontitalic: false
x2labelpre	For Horizontal charts this is the text to place in front of each number value	x2labelpre: $
x2labelpost	For Horizontal charts this is the text to place after each number value	x2labelpost: kpg

Y Axis Labels

Name	Description	Example
ylabels	Vertical Type Charts True or False determines whether x-axis labels should be drawn or not Horizontal Type Charts List of labels seperated by \| character.	Vertical Type Charts ylabels: true Horizontal Type Charts ylabels: Jan\|Feb\|Mar\|Apr\|May\|Jun\|Jul\|Aug\|Sept\|Oct\|Nov\|Dec
ylabelfont	Font Face Arial Times Roman Courier	ylabelfont: arial
ylabelfontsize	Font Size in pixels	ylabelfontsize: 10
ylabelfontbold	True or False Sets Bold on the font	ylabelfontbold: false
ylabelfontitalic	True or False Sets italic on the font	ylabelfontitalic: false
ylabelpre	For Vertical charts this is the text to place in front of each number value	ylabelpre: $
ylabelpost	For Vertical charts this is the text to place after each number value	ylabelpost: kpg
ylabelcolor	Color definition (see Colors ») y-axis label text color	ylabelcolor: #0000A9
Vertical Type Charts with a Second Scale
y2lables	True or False determines whether the second x-axis labels should be drawn or not	y2lables: true
y2labelfont	Font Face Arial Times Roman Courier	y2labelfont: arial
y2labelfontsize	Font Size in pixels	y2labelfontsize: 10
y2labelfontbold	True or False Sets Bold on the font	y2labelfontbold: false
y2labelfontitalic	True or False Sets italic on the font	y2labelfontitalic: false
y2labelpre	For Vertical charts this is the text to place in front of each number value	y2labelpre: $
y2labelpost	For Vertical charts this is the text to place after each number value	y2labelpost: kpg
y2labelcolor	Color definition (see Colors ») right hand y-axis label text color	y2labelcolor: #0000A9

Graph Titles

Name	Description	Example
Main Graph Title
titletext	Text Main graph title	titletext: Graph Title
titlecolor	Color definition (see Colors ») text color	titlecolor: #888888
titlefont	Font Face Arial Times Roman Courier	titlefont: Times Roman
titlefontsize	Font Size in pixels	titlefontsize: 16
titlefontbold	True or False Sets Bold on the font	titlefontbold: true
titlefontitalic	True or False Sets italic on the font	titlefontitalic: false
titleposition	X,Y Position position of the title	titleposition: 100,20
X Axis Title
xtitletext	Text x-axis title	xtitletext: X Title
xtitlecolor	Color definition (see Colors ») text color	xtitlecolor: #000000
xtitlefont	Font Face Arial Times Roman Courier	xtitlefont: Times Roman
xtitlefontsize	Font Size in pixels	xtitlefontsize: 16
xtitlefontbold	True or False Sets Bold on the font	xtitlefontbold: true
xtitlefontitalic	True or False Sets italic on the font	xtitlefontitalic: false
xtitleposition	X,Y Position position of the X title	xtitleposition: 100,20
2nd X-Axis Title for charts using a second x-axis scale
x2titletext	Text second x-axis title	x2titletext: X Title
x2titlecolor	Color definition (see Colors ») text color	x2titlecolor: #000000
x2titlefont	Font Face Arial Times Roman Courier	x2titlefont: Times Roman
x2titlefontsize	Font Size in pixels	x2titlefontsize: 16
x2titlefontbold	True or False Sets Bold on the font	x2titlefontbold: true
x2titlefontitalic	True or False Sets italic on the font	x2titlefontitalic: false
x2titleposition	X,Y Position position of the second X title	x2titleposition: 100,20
Y Axis Title
ytitletext	Text y-axis title	ytitletext: Y Title
ytitlecolor	Color definition (see Colors ») text color	ytitlecolor: #000000
ytitlefont	Font Face Arial Times Roman Courier	ytitlefont: Times Roman
ytitlefontsize	Font Size in pixels	ytitlefontsize: 16
ytitlefontbold	True or False Sets Bold on the font	ytitlefontbold: true
ytitlefontitalic	True or False Sets italic on the font	ytitlefontitalic: false
ytitleposition	X,Y Position position of the Y title	ytitleposition: 100,20
Second Y Axis Title for charts using a second y-axis scale
y2titletext	Text second y-axis title	y2titletext: Y Title
y2titlecolor	Color definition (see Colors ») text color	y2titlecolor: #000000
y2titlefont	Font Face Arial Times Roman Courier	y2titlefont: Times Roman
y2titlefontsize	Font Size in pixels	y2titlefontsize: 16
y2titlefontbold	True or False Sets Bold on the font	y2titlefontbold: true
y2titlefontitalic	True or False Sets italic on the font	y2titlefontitalic: false
y2titleposition	X,Y Position position of the second Y title	y2titleposition: 100,20

Series Specifications

The series specications are slightly different for each chart style. Below are the formats for each chart style.

Line Graph
The format of the series parameter is:- seriesN: line color \| legend text \| scale \| point size \| point style \| fill \| line style where N represents the series number Point Style - valid values are one of :- point , circle , cross , pluscross , xcross , box , triangle , diamond , hexagon Line Style - valid values are one of :- solid , dashed , dotted , long dashed , dotted dashed For example if there are 2 series of data with the first using the left hand scale and the second using the right hand scale, the series parameter would be:- series1: #ff0000\|Series One\|left\|6\|triangle\|true\|solid\| series2: #0000ff\|Series Two\|right\|4\|circle\|true\|dashed\|
Area Graph
The format of the series parameter is:- seriesN: area color \| legend text \| point size \| point style \| fill \| line style where N represents the series number Point Style - valid values are one of :- point , circle , cross , pluscross , xcross , box , triangle , diamond , hexagon Line Style - valid values are one of :- solid , dashed , dotted , long dashed , dotted dashed For example if there are 2 series of data with the first using the left hand scale and the second using the right hand scale, the series parameter would be:- series1: #ff0000\|Series One\|6\|triangle\|true\|solid\| series2: #0000ff\|Series Two\|4\|circle\|true\|dashed\|
Horizontal Bar Graph Horizontal Cylinder Graph
The format of the series parameter is:- seriesN: bar color \| legend text \| scale where N represents the series number For example if there are 2 series of data with the first using the bottom X-axis scale and the second using the top X-axis scale, the series parameter would be:- series1: #ff0000\|Series One\|bottom series2: #0000ff\|Series Two\|top
Vertical Bar Graph Vertical Cylinder Graph
The format of the series parameter is:- seriesN: bar color \| legend text \| scale where N represents the series number For example if there are 2 series of data with the first using the left Y-axis scale and the second using the right Y-axis scale, the series parameter would be:- series1: #ff0000\|Series One\|left series2: #0000ff\|Series Two\|right
Stacked Horizontal Bar Graph Stacked Vertical Bar Graph Stacked Horizontal Cylinder Graph Stacked Vertical Cylinder Graph
The format of the series parameter is:- seriesN: bar color \| legend text where N represents the series number For example if there are 2 series of data the series parameters would be:- series1: #ff0000\|Series One series2: #0000ff\|Series Two
Bubble Chart, X-Y Scatter Graph
The format of the series parameter is:- seriesN: color \| legend text \| scale \| point size \| point style \| fill where N represents the series number Point Style - valid values are one of :- point , circle , cross , pluscross , xcross , box , triangle , diamond , hexagon Line Style - valid values are one of :- solid , dashed , dotted , long dashed , dotted dashed For example if there are 2 series of data with the first using the left hand scale and the second using the right hand scale, the series parameter would be:- series1: #ff0000\|Series One\|left\|6\|triangle\|true series2: #0000ff\|Series Two\|right\|4\|circle\|true
Combination Area and Vertical Bar Graph Combination Area and Stacked Vertical Bar Graph Combination Line and Vertical Bar Graph Combination Line and Stacked Vertical Bar Graph
The format of the series parameter is:- For bar type series seriesN: bar\| bar color \| legend text \| For Area or Line type series seriesN: area OR line\| color \| legend text \| point size \| point style \| fill \| line style where N represents the series number Point Style - valid values are one of :- point , circle , cross , pluscross , xcross , box , triangle , diamond , hexagon Line Style - valid values are one of :- solid , dashed , dotted , long dashed , dotted dashed For example if there are 2 series of data with the first a bar and the second and area:- series1: bar\|#ff0000\|Series One\| series2: area\|#00ff00\|Series Two\|4\|circle\|true\|dashed\| or for a combination line and bar:- series1: bar\|#ff0000\|Series One\| series2: line\|#00ff00\|Series Two\|4\|circle\|true\|dashed\|

Pie Chart Properties

Name	Description	Example
3dangle	Integer value between 0 and 90 Specifies the angle (in degrees) in the z-plane of the 3d effect. A value of 40 generally produces good results.	3dangle: 40
pecentndecplaces	Integer Number of decimal places to display when showing percentage figures.	pecentndecplaces: 0
segmentlabels	True or False specifies whether to segment labels or not	segmentlabels: true
segmentlabelfont	Font Face Arial Times Roman Courier	segmentlabelfont: arial
segmentlabelcolor	Color definition (see Colors »)	segmentlabelcolor: #000000
segmentlabelfontsize	Font Size in pixels	segmentlabelfontsize: 11
segmentlabelfontbold	True or False Sets Bold on the fon	segmentlabelfontbold: true
segmentlabelfontitalic	True or False Sets italic on the font	segmentlabelfontitalic: true
displaypercentages	True or False specifies whether to add percentage figures to the segment labels or not	displaypercentages: true
labellines	True or False specifies whether to draw a line from the segment to the label or not	labellines: true
valuepresym	Character or Text leading character or text for each segment label	valuepresym: $
valuepostsym	Character or Text trailing character or text for each segment label	valuepostsym: mpg

Pie Data

Three parameters may be supplied for each pie on the chart. These are:

Center Position - x,y pixel co-ordinate of the pie center
Pie Size -diameter in pixels of the pie
Segment Seperation - if an exploded pie is required then this value represents the seperation in pixels of the segments.

The format of the pie parameter is:-

pieN: position | size | seperation |

where N represents the pie / series number

For example if there are 2 series of data (ie 2 pies) the pie parameters would be:-

pie1: 100,100|100|0|
pie2: 300,100|75|20|

Pie Segments

Two parameters may be supplied for each pie segment. These are:

Segment Color - x,y pixel co-ordinate of the pie center
Legend Label -diameter in pixels of the pie

Segment definitions are common to all pies on the chart.

The format of the segment parameter is:-

segmentM: color | legend label |

where M represents the segment number

For example if there are 5 segements on each pie (ie 5 data values in each series) the segment parameters would be:-

Target Lines

Any number of horizontal target line may be added to the chart with the parameter "target".

The target parameter is made up of 6 elements:-

value
color
text
font
line style
y-axis scale (left or right)

The format of the target line parameter is:-

For more on color defintions see see Colors »

The font defintion can be one of:-

small
medium
medium bold
large
large bold

The line style can be one of:-

solid
dashed
dotted
long dashed
dotted dashed

For example to set a target line at a value of 1000 on the chart,

Trend Line

Any number of trend lines may be added to the chart with the parameter "trend".

The trend parameter is made up of 9 elements:-

start value
start column
end value
end column
color
text
font
line style
y-axis scale (left or right)

The format of the target line parameter is:-

For more on color defintions see Colors »

The font defintion can be one of:-

small
medium
medium bold
large
large bold

The line style can be one of:-

solid
dashed
dotted
long dashed
dotted dashed

For example to set a trend line starting at a value of 1000 in column 2 and ending at a value of 1550 in column 6,

Free Form Text

In addition to the standard titles, any number of lines of text may be added to the graph using the "text" parameter.

The text parameter is consists of 8 elements:-

Text
Color
Position
Font Family
Font Size
Bold
Italic
Angle

The format of the text parameter is:-

text:    string | color | position | font family | font size | bold | italic | angle

Color is the text color, For more on color defintions see Colors »
position is the X,Y position of the text on the graph canvas.
font family can be one of, Arial, Times Roman or Courier
font size size in pixels of the font
bold can be true or false to specify whether to use bold font
italic can be true or false to specify whether to use italic font
angle Text can be drawn at an angle (a value between 0 and 90). 0 represents horizontal, 90 is vertical.

For example if 3 lines of text were to be added the following parameters would be included in the configuration:-

text:  line one of text|#000000|50,50|arial|12|true|false|0

text:  line two of text|#000000|50,65|arial|12|true|false|0

text:  line three of text|#000000|50,80|arial|12|true|false|0

Free Form Images

Any number of images may be added to the graph using the "image" parameter.

The image parameter is consists of 2 elements:-

URL or Filename of an image file
position

The format of the image parameter is:-

image: URL or filename | position |

For example if an image "logo.png" was to be drawn on the graph image then the following parameter would be included in the configuration:-

image: logo.png|5,5|

Documentation

Demo Index

Troubleshooting Guide

Support

Graph and Chart Software Documentation

Configuration Options

Also see:-

Documentation Contents

Database Connections

Installation Help