JPowered.com

Advanced Graphs and Charts for PHP

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

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.

Also see:-

Graph Data »

General Graph Properties

NameDescriptionExample
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

NameDescriptionExample
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

NameDescriptionExample
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

NameDescriptionExample
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

NameDescriptionExample
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

NameDescriptionExample
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

NameDescriptionExample
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

NameDescriptionExample
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

NameDescriptionExample
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