bar graph

3D Pie Chart Documentation

[ Pie Chart Home ] [ Tutorials ] [ Getting Started ] [ Examples & Demos ] [ Solutions ]

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 ).

    1. Graph Switches
    2. Graph Characteristics
    3. Pie Data
    4. Segment Data
    5. Segment Labels
    6. Font Information
    7. Color Information
    8. Automatic Legend
    9. Titles
    10. Free Form Text
    11. Free Form Images
    12. 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 segment 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">
labellines Specifies whether the a line should be drawn between each label and the segment.

Range of Values : true or false
File Example :
labellines: true

Html Code Example :
<PARAM name="
lablellines" 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 (eg. If you have 3 series each with up to 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">
thousandseparator

Specifies the character to be used as a thousand separator.

Range of Values : Alphanumeric

File Example :
thousandseparator: ,

Html Code Example :
<PARAM name="
thousandseparator" value=",">


^back to top

Pie Data

For each Pie, 5 characteristics can be defined,

  • x position
  • y position
  • Size
  • Number of Segments
  • Segment Separation

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 pop-up 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 pop-up 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

[ Pie Chart Home ] [ Tutorials ] [ Getting Started ] [ Examples & Demos ] [ Solutions ]

Getting Started

Documentation

Examples

Tutorials

Common Problems
This section describes and provides solutions to common problems.

Pie Chart Home