Pie Chart Configuration Options
Whichever
method ( file, html code, server process etc.) you choose
to supply the graph with the configuration options the various
parameters all follow the same format of
[Parameter Name] , [Parameter Value].
Below you will find each option detailed with examples for
supplying by file and html code.
Please
Note : Parameters Names are case sensitive. ( i.e.. axis
is not the same as Axis ).
- Graph Switches
- Graph Characteristics
- Pie Data
- Segment Data
- Segment Labels
- Font Information
- Color Information
- Automatic Legend
- Titles
- Free Form Text
- Free Form Images
- Multi Language
Support
Graph
Switches ( Boolean flags )
Parameter |
Description |
Example |
3D |
Specifies whether the graph should
be drawn in 2D or 3D.
Range of Values : true or false |
File Example :
3D: true
Html Code Example :
<PARAM name="3D" value="true">
|
|
Slabels |
Specifies
whether pie Segment labels should be drawn.
Range
of Values : true or false |
File Example :
Slabels:
true
Html Code Example :
<PARAM name="Slabels"
value="true"> |
|
legend |
Specifies
whether the legend should be automatically generated
Range
of Values : true or false |
File Example :
legend:
true
Html Code Example :
<PARAM name="legend"
value="true"> |
|
displayPercentages |
Specifies
whether segement percentages should be automatically
calculated and added to the segment labels
Range
of Values : true or false |
File Example :
displayPercentages:
true
Html Code Example :
<PARAM name="displayPercentages"
value="true"> |
|
^back to top
Graph
Characteristics
Parameter |
Description |
Example |
width |
Specifies the width of the Graph
Image to be produced. This parameter only applies
to the Servlet form, the Applet form takes the width
parameter from the <APPLET> tag.
Range of Values :Positive Integer |
File Example :
width: 500
|
|
height |
Specifies the height of the Graph
Image to be produced. This parameter only applies
to the Servlet form, the Applet form takes the height
parameter from the <APPLET> tag.
Range of Values : Positive Integer |
File Example :
height:
420 |
|
nPies |
Defines
the number of pie charts within the graph area (e.g..
If you have 3 series each with upto 8 pieces of
data then this should be set to 3 to draw the data
as 3 pie charts).
Range
of Values : Positive Integer |
File Example :
nPies: 3
Html Code Example :
<PARAM name="nPies"
value="3"> |
|
depth3D |
Defines
the 3D depth of each Pie .
Range
of Values : Positive Integer |
File Example :
depth3D:
15
Html Code Example :
<PARAM name="
depth3D"
value="15"> |
|
ndecplaces |
Defines
the number of decimal places to use when displaying
segment values.
Range
of Values : Positive Integer |
File Example :
ndecplaces:
2
Html Code Example :
<PARAM name="ndecplaces"
value="2"> |
|
3Dangle |
Defines the angle (in the z plane) with which to
draw each pie
Range
of Values : 0 - 90 where 0 represents
a flat full on pie (2D) and 90 fully rotated in
the z plane. |
File Example :
3Dangle:
50
Html Code Example :
<PARAM name="
3Dangle"
value="50"> |
|
linkCursor |
Defines the Cursor to be displayed when the mouse
passes over a clickable area
Range
of Values :
crosshair
default
hand
move
text
wait
|
File Example :
linkCursor:
hand
Html Code Example :
<PARAM name="linkCursor"
value="hand"> |
|
^back to top
Pie
Data
For
each Pie, 5 characteristics can be defined,
- x position
- y position
- Size
- Number of Segments
- Segment Seperation
These
are supplied via the "PieN" parameter (where
N is an integer ranging from 1 to the total number of
Pies). Each element is separated by a comma character.
Range
of Values : +ve integer, +ve integer, +ve integer,
+ve integer, +ve integer
For
example if we have 3 Pies,
File
Example :
Pie1: 50,75,150,6,0
Pie2: 350,75,150,6,10
Pie3: 175,250,150,6,10
Html
Code Example :
<PARAM
name="Pie1" value="50,75,150,6,0">
<PARAM name="Pie2" value="350,75,150,6,10">
<PARAM name="Pie3" value="175,250,150,6,10">
|
^back to top
Segment
Data
For
each series of data (segments of the pies), 4 characteristics
can be defined,
- Segment Color
- Legend Label
- Legend Link URL (or Javascript function)
- Legend Link Target Window/Frame
These
are supplied via the "segmentN" parameter
(where N is an integer ranging from 1 to the total number
of series). Each element is separated by a | character.
Range
of Values : Color definition | Text | URL | Window
or Frame name
(Click here for More on Defining
colors)
For
example if we have 5 series of the data (5 segments
on each pie),
File
Example :
segment1: red|North America|http://www.jpowered.com
segment2: 99,99,156|Europe
segment3: green|Asia|http://www.jpowered.com/|_self
segment4: blue|Africa|http://www.trafficfile.com|new
segment5: 0,63,68|Australia
Html
Code Example :
<PARAM
name="segment1" value="red|North America|http://www.jpowered.com">
<PARAM name="segment2" value="99,99,156|Europe">
<PARAM name="segment3" value="green|Asia|http://www.jpowered.com/|_self">
<PARAM name="segment4" value="blue|Africa|http://www.trafficfile.com|new">
<PARAM name="segment5" value="0,63,68|Australia">
|
^back to top
Segment
Labels
The
Segment labels for each Pie are supplied by the pieNlabelM
parameter, where N & M are positive integers starting
with 1.
There
should one pieNlabelM parameter for each segment
on each pie. N represents the Pie number and
M the segment within that pie.
If
you have 2 pies each with 6 segments then the following
would be required,
File
Example :
pie1label1:
North America
pie1label2: Europe
pie1label3: Asia
pie1label4: Africa
pie1label5: Australia
pie1label6: South America
pie2label1:
North America
pie2label2: Europe
pie2label3: Asia
pie2label4: Africa
pie2label5: Australia
pie2label6: South America
Html
Code Example :
<PARAM
name="pie1label1"
value="North America">
<PARAM name="pie1label2"
value="Europe">
<PARAM name="pie1label3"
value="Asia">
<PARAM name="pie1label4"
value="Africa">
<PARAM name="pie1label5"
value="Australia">
<PARAM name="pie1label6"
value="South America">
<PARAM
name="pie2label1"
value="North America">
<PARAM name="pie2label2"
value="Europe">
<PARAM name="pie2label3"
value="Asia">
<PARAM name="pie2label4"
value="Africa">
<PARAM name="pie2label5"
value="Australia">
<PARAM name="pie2label6"
value="South America">
|
^back to top
Font
Information
Most
of the font information is incorporated into other parameters
(see Titles below) however the following two fonts are defined
as follows,
Parameter |
Description |
Example |
popupfont |
Defines
the font for the popup segment values.
Range of Values : Font
Definition
(click here for More on Defining
fonts) . |
File Example :
popupfont:
Arial,N,10
Html Code Example :
<PARAM name="popupfont"
value="Arial,N,10"> |
|
slabelfont |
Defines the font for the segment labels.
Range of Values : Font
Definition
(click here for More on Defining
fonts) |
File Example :
slabelfont:
Arial,B,10
Html Code Example :
<PARAM name="slabelfont"
value="Arial,B,10"> |
|
^back to top
Color
Information
Most of the color information is incorporated into
other parameters (see Titles below) however the following
eight colors are defined as follows,
Parameter |
Description |
Example |
bgcolor |
Defines
the background color for the graph image.
Range of Values :
Color Definition
(click here for More on Defining
colors) . |
File Example :
bgcolor:
#FFFFFF
Html Code Example :
<PARAM name="bgcolor"
value="white"> |
|
labelcolor |
Defines
the segment label text color.
Range of Values :
Color Definition
(click here for More on Defining
colors) . |
File Example :
labelcolor:
#000000
Html Code Example :
<PARAM name="labelcolor"
value="#000000"> |
|
popupbgcolor |
Defines
the background color of the popup value display.
Range of Values :
Color Definition
(click here for More on Defining
colors) . |
File Example :
popupbgcolor:
#303030
Html Code Example :
<PARAM name="popupbgcolor"
value="#303030"> |
|
^back to top
Automatic
Legend
The following set of parameters define the characteristics
of the automatic legend,
Parameter |
Description |
Example |
legendfont |
Defines
the font for the legend.
Range
of Values : Font
Definition
(click here for More on Defining
fonts) .. |
File Example :
legendfont:
Arial,N,10
Html Code Example :
<PARAM name="legendfont"
value="Arial,N,10"> |
|
legendposition |
Defines
the x,y position of the top left of the legend.
Range of Values :
integer number (X value), integer number (Y value)
. . |
File Example :
legendposition:
345,15
Html Code Example :
<PARAM name="legendposition"
value="345,15"> |
|
legendtitle |
The text for legend title.
Range of Values :
text |
File Example :
legendtitle:
Products
Html Code Example :
<PARAM name="legendtitle"
value="Products"> |
|
legendBackground |
Legend
background color
Range of Values :
Color Definition
(click here for More on Defining
colors) . |
File Example :
LegendBackground:
166,210,255
Html Code Example :
<PARAM name="LegendBackground"
value="166,210,255"> |
|
legendBorder |
Legend
border color
Range of Values :
Color Definition
(click here for More on Defining
colors) . |
File Example :
LegendBorder:
light grey
Html Code Example :
<PARAM name="LegendBorder"
value="#AAAAAA"> |
|
legendtextColor |
Legend
text color
Range of Values :
Color Definition
(click here for More on Defining
colors) . |
File Example :
LegendtextColor:
black
Html Code Example :
<PARAM name="LegendtextColor"
value="black"> |
|
^back to top
Graph
Title
Parameter |
Description |
Example |
title |
Defines the main title for the graph. This parameter
is made up of four elements each separated by a
| character. The four elements represent, Title
Text, Title Position, Font and Text Color.
Range
of Values :
Text | Position | Font definition | Color definition. |
File Example :
title:
Sales
by Quarter|50,20|Arial,BI,18|grey
Html Code Example :
<PARAM name="title"
value="Sales
by Quarter|50,20|Arial,BI,18|grey">
|
|
^back to top
Free
Form Text
In
addition to the title parameter, the graph allows for
an unlimited number of lines of text to be added to
the graph image. This is achieved via the "textN"
parameter, where N is a positive integer starting with
1.
This
feature is particularly useful where you wish to add
notes or individual titles to each pie.
As
with the title, the textN parameter is made up of four
elements each separated by a | character. The four elements
represent,
Text, Title Position, Font and Text Color.
Range
of Values : Text | Position | Font definition | Color
definition.
File
Example :
text1: Note
:|80,60|TimesRoman,N,12|0,0,255
text2: New product range|80,80|TimesRoman,N,12|0,0,0
text3: launched during|80,100|TimesRoman,N,12|0,0,0
text4: quarter 2.|80,120|TimesRoman,N,12|0,0,0
Html
Code Example :
<PARAM name="text1" value="Note
:|80,60|TimesRoman,N,12|0,0,255">
<PARAM name="text2" value="New product
range|80,80|TimesRoman,N,12|0,0,0">
<PARAM name="text3" value="launched
during|80,100|TimesRoman,N,12|0,0,0">
<PARAM name="text4" value="quarter
2.|80,120|TimesRoman,N,12|0,0,0">
|
^back to top
Free
Form Images
The
graph allows for any number of images/icons to be added
to the graph image. This is achieved via the "imageN"
parameter, where N is a positive integer starting with
1.
This
feature is particularly useful where you wish to incorporate
a company / product logo into the graph image. It can
also be used to incorporate a custom designed legend
into the graph image (in this case remember to turn
off the automatic legend).
The imageN parameter is made up of three elements each
separated by a , (comma) character. The three elements
represent,
Image URL, X position, Y position.
Range
of Values : URL , X position , Y position.
File
Example :
image1:
./images/logo.gif,0,0
image2:
./images/legend.gif,210,0
Html
Code Example :
<PARAM
name="image1" value="./images/logo.gif,0,0">
<PARAM
name="image2" value="./images/legend.gif,210,0">
|
^back to top
<< back to Documentation Index
<< back to Getting
Started
|
Getting Started
Documentation
Examples
Purchase
Pie
Chart Home
Graph
& Charting
Pie
Chart
Line Graph
Vertical
Bar Graph
Stacked
Bar Graph
Horizontal
Bar Graph
more...
Advanced
Data Grid Control
.
|