|
|
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
| 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
|
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 |
an 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|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec
Horizontal Type Charts
xlabels: true
|
| xlabelfont |
Font Face
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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:-
|
|
