# 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