# Advanced Graphs and Charts for PHP

- Graph Home
- Pricing / License Options
- Online Demos
- Documentation
- Tutorials

# 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:-

segment1: red|label 1|
segment2: red|label 2|
segment3: red|label 3|
segment4: red|label 4|
segment5: red|label 5|

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:-

target: value | color | text | font | line Style | scale|

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,

target: 1000|green|Break Even|medium|dashed|left|

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:-

trend: start value|start column|end value|end column|color|text|font|line Style|scale|

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,

trend: 1000|2|1550|6|green|Up Trend|medium|dashed|left

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|

Package Index

Demo Index

Documentation

Troubleshooting Guide

Support

#### Documentation Contents

Adding Graphs to Web Pages

Configuration Options and Parameters

Supplying the Graph with Data

Sample Image Tags

#### Database Connections

Database Information method

Custom Data Function

more Documentation Online here