Fusion Charts Free

FusionCharts Free - Chart XML
Reference

FusionCharts Free - Chart XML Reference
1
Table of Contents
1. FusionCharts Free - Chart XML API ..................................................................................................... 2
1.1 Column 2D Chart ................................................................................................................................. 3
1.2 Pie 2D Chart ........................................................................................................................................... 8
1.3 Bar 2D Chart ........................................................................................................................................ 12
1.4 Line 2D Chart ...................................................................................................................................... 17
1.5 Column 3D Chart ............................................................................................................................... 23
1.6 Pie 3D Chart ......................................................................................................................................... 28
1.7 Area 2D Chart ..................................................................................................................................... 31
1.8 Doughnut 2D Chart ........................................................................................................................... 36
1.9 Multi-Series Column 2D Chart ...................................................................................................... 39
1.10 Multi-Series Column 3D Chart .................................................................................................... 45
1.11 Multi-Series Line 2D Chart ........................................................................................................... 51
1.12 Multi-Series Area 2D Chart .......................................................................................................... 59
1.13 Multi-Series Bar 2D Chart ............................................................................................................ 67
1.14 Stacked Column 2D Chart ........................................................................................................... 73
1.15 Stacked Column 3D Chart ........................................................................................................... 79
1.16 Stacked Area 2D Chart ................................................................................................................. 87
1.17 Stacked Bar 2D Chart .................................................................................................................... 97
1.18 Multi-Series Column 2D Line Dual Y Chart .......................................................................... 105
1.19 Multi-Series Column 3D Line Dual Y Chart .......................................................................... 112
1.20 Funnel Chart .................................................................................................................................... 119
1.21 Candlestick Chart .......................................................................................................................... 123
1.22 Gantt Chart ...................................................................................................................................... 128
2
1. FusionCharts Free - Chart XML API
FusionCharts Free contains the following chart types.

Chart Type File Name
Single Series Charts
Column 3D FCF_Column3D.swf

Column 2D FCF_Column2D.swf

Line 2D FCF_Line.swf

Area 2D FCF_Area2D.swf

Bar 2D FCF_Bar2D.swf

Pie 2D FCF_Pie2D.swf

Pie 3D FCF_Pie3D.swf

Doughnut 2D FCF_Doughnut2D.swf

Multi-series Charts
Multi-series Column 2D FCF_MSColumn2D.swf

Multi-series Column 3D FCF_MSColumn3D.swf

Multi-series Line 2D FCF_MSLine.swf

Multi-series Bar 2D FCF_MSBar2D.swf

Multi-series Area 2D FCF_MSArea2D.swf

Stacked Charts
Stacked Column 3D FCF_StackedColumn3D.swf

Stacked Column 2D FCF_StackedColumn2D.swf

3
Stacked Bar 2D FCF_StackedBar2D.swf

Stacked Area 2D FCF_StackedArea2D.swf

Combination Charts
Multi-series Column 2D + Line - Dual Y Axis FCF_MSColumn2DLineDY.swf

Multi-series Column 3D + Line - Dual Y Axis FCF_MSColumn3DLineDY.swf

Financial Charts
Candlestick Chart FCF_Candlestick.swf

Funnel Chart

Funnel Chart FCF_Funnel.swf

Gantt Chart

Gantt Chart FCF_Gantt.swf

1.1 Column 2D Chart
4
A 2D Column chart looks as under:

And, the XML data for this chart can be listed as under:

<graph bgcolor='e1f5ff' caption='Decline in Net Interest Margins of Asian Banks (1995-
2001)' subCaption='(in Percentage %)' yaxismaxvalue="2" yaxisminvalue='-2.5'
yaxisname='Points' xaxisname='Country' hovercapbg='FFFFDD' hovercapborder='000000'
numdivlines='4' numberSuffix='%25'>
<set name='Taiwan' value='-0.33' color='F6BD0F'/>
<set name='Malaysia' value='-0.27' color='FF6600'/>
<set name='Hong Kong' value='0.40' color='8BBA00' alpha='70'/>
<set name='Philippines' value='0.6' color='F984A1'/>
<set name='Singapore' value='-0.8' color='A66EDD' alpha='70'/>
<set name='Thailand' value='-2.2' color='B2FF66'/>
<set name='India' value='1.2' color='AFD8F8'/>
<trendlines>
<line startvalue='0.8' displayValue='Good' color='FF0000' thickness='1'
isTrendZone='0'/>
<line startvalue='-0.4' displayValue='Bad' color='009999' thickness='1'
isTrendZone='0'/>
</trendlines>
</graph>

<graph> Attributes
The <graph> element for this chart can have the following properties:
Background Properties
bgColor="HexColorCode" : This attribute sets the background color for the chart. You can set any hex
color code as the value of this attribute. Remember that you DO NOT need to assign a "#" at the beginning of
the hex color code. In fact, whenever you need to provide any hex color code in FusionCharts XML data
document, you do not have to assign the # at the beginning.
bgAlpha="NumericalValue(0-100)" : This attribute helps you set the alpha (transparency) of the graph.
This is particularly useful when you need to load the chart in one of your Flash movies or when you want to set
a background image (.swf) for the chart.
5
bgSWF="Path of SWF File" : This attribute helps you load an external .swf file as a background for the
chart.
Canvas Properties
canvasBgColor="HexColorCode" : This attribute helps you set the background color of the canvas.
canvasBgAlpha="NumericalValue(0-100)" : This attribute helps you set the alpha (transparency) of the
canvas.
canvasBorderColor="HexColorCode" : This attribute helps you set the border color of the canvas.
canvasBorderThickness="NumericalValue(0-100)" : This attribute helps you set the border thickness
(in pixels) of the canvas.
Chart and Axis Titles
caption="String" : This attribute determines the caption of the chart that would appear at the top of the
chart.
subCaption="String" : Sub-caption of the chart
xAxisName= "String" : x-Axis text title (if the chart supports axis)
yAxisName= "String" : y-Axis text title (if the chart supports axis)
Chart Numerical Limits
yAxisMinValue="value": This attribute determines the lower limit of y-axis.
yAxisMaxValue="value" : This attribute determines the upper limit of y-axis.
If you don't specify any of the above values, it is automatically calculated by FusionCharts based on the data
provided by you.
Generic Properties
shownames="1/0" : This attribute can have either of the two possible values: 1,0. It sets the configuration
whether the x-axis values (for the data sets) will be displayed or not. By default, this attribute assumes the
value 1, which means that the x-axis names will be displayed.
showValues="1/0" : This attribute can have either of the two possible values: 1,0. It sets the configuration
whether the data numerical values will be displayed along with the columns, bars, lines and the pies. By
default, this attribute assumes the value 1, which means that the values will be displayed.
showLimits="1/0" : Option whether to show/hide the chart limit textboxes.
rotateNames="1/0" : Configuration that sets whether the category name text boxes would be rotated or
not.
animation="1/0" : This attribute sets whether the animation is to be played or whether the entire chart
would be rendered at one go.
showColumnShadow="1/0": Whether the 2D shadow for the columns would be shown or not.
Font Properties
baseFont="FontName" : This attribute sets the base font family of the chart font which lies on the canvas
i.e., all the values and the names in the chart which lie on the canvas will be displayed using the font name
provided here.
baseFontSize="FontSize" : This attribute sets the base font size of the chart i.e., all the values and the
names in the chart which lie on the canvas will be displayed using the font size provided here.
baseFontColor="HexColorCode" : This attribute sets the base font color of the chart i.e., all the values
and the names in the chart which lie on the canvas will be displayed using the font color provided here.
outCnvBaseFont = "FontName" : This attribute sets the base font family of the chart font which lies outside
the canvas i.e., all the values and the names in the chart which lie outside the canvas will be displayed using
the font name provided here.
outCnvBaseFontSze="FontSize" : This attribute sets the base font size of the chart i.e., all the values and
the names in the chart which lie outside the canvas will be displayed using the font size provided here.
outCnvBaseFontColor="HexColorCode": This attribute sets the base font color of the chart i.e., all the
values and the names in the chart which lie outside the canvas will be displayed using the font color provided
6
here.
Number Formatting Options
numberPrefix="$" : Using this attribute, you could add prefix to all the numbers visible on the graph. For
example, to represent all dollars figure on the chart, you could specify this attribute to ' $' to show like
$40000, $50000.
numberSuffix="p.a" : Using this attribute, you could add prefix to all the numbers visible on the graph. For
example, to represent all figure quantified as per annum on the chart, you could specify this attribute to ' /a'
to show like 40000/a, 50000/a.
To use special characters for numberPrefix or numberSuffix, you'll need to URL Encode them. That
is, suppose you wish to have numberSuffix as % (like 30%), you'll need to specify it as under:
numberSuffix='%25'
formatNumber="1/0" : This configuration determines whether the numbers displayed on the chart will be
formatted using commas, e.g., 40,000 if formatNumber='1' and 40000 if formatNumber='0 '
formatNumberScale="1/0" : Configuration whether to add K (thousands) and M (millions) to a number
after truncating and rounding it - e.g., if formatNumberScale is set to 1, 10434 would become 1.04K (with
decimalPrecision set to 2 places). Same with numbers in millions - a M will added at the end.
decimalSeparator="." : This option helps you specify the character to be used as the decimal separator in
a number.
thousandSeparator="," : This option helps you specify the character to be used as the thousands separator
in a number.
decimalPrecision="2" : Number of decimal places to which all numbers on the chart would be rounded to.
divLineDecimalPrecision="2": Number of decimal places to which all divisional line (horizontal) values
on the chart would be rounded to.
limitsDecimalPrecision="2" : Number of decimal places to which upper and lower limit values on the
chart would be rounded to.
Zero Plane

The zero plane is a simple plane (line) that signifies the 0 position on the chart. If there are no negative numbers on
the chart, you won't see a visible zero plane.
zeroPlaneThickness="Numeric Value" : Thickness (in pixels) of the line indicating the zero plane.
zeroPlaneColor="Hex Code" : The intended color for the zero plane.
zeroPlaneAlpha="Numerical Value 0-100" : The intended transparency for the zero plane.
Divisional Lines (Horizontal)
Divisional Lines are horizontal or vertical lines running through the canvas. Each divisional line signfies a smaller unit of
the entire axis thus aiding the users in interpreting the chart.
numdivlines="NumericalValue" : This attribute sets the number of divisional lines to be drawn.
divlinecolor="HexColorCode" : The color of grid divisional line.
divLineThickness="NumericalValue" : Thickness (in pixels) of the grid divisional line.
divLineAlpha="NumericalValue0-100" : Alpha (transparency) of the grid divisional line.
showDivLineValue="1/0" : Option to show/hide the textual value of the divisional line.
showAlternateHGridColor="1/0" : Option on whether to show alternate colored horizontal grid bands.
alternateHGridColor="HexColorCode" : Color of the alternate horizontal grid bands.
alternateHGridAlpha="NumericalValue0-100" : Alpha (transparency) of the alternate horizontal grid
bands.
Divisional Lines (Vertical)
numVDivLines="NumericalValue" : Sets the number of vertical divisional lines to be drawn.
VDivlinecolor="HexColorCode" : Color of vertical grid divisional line.
VDivLineThickness="NumericalValue" : Thickness (in pixels) of the line
VDivLineAlpha="NumericalValue0-100" : Alpha (transparency) of the line.
7
showAlternateVGridColor="1/0" : Option on whether to show alternate colored vertical grid bands.
alternateVGridColor="HexColorCode" : Color of the alternate vertical grid bands.
alternateVGridAlpha="NumericalValue0-100" : Alpha (transparency) of the alternate vertical grid
bands.
Hover Caption Properties
The hover caption is the tool tip which shows up when the user moves his mouse over a particular data item (column,
line, pie, bar etc.).
showhovercap="1/0" : Option whether to show/hide hover caption box.
hoverCapBgColor="HexColorCode" : Background color of the hover caption box.
hoverCapBorderColor="HexColorCode" : Border color of the hover caption box.
hoverCapSepChar="Char" : The character specified as the value of this attribute separates the name and
value displayed in the hover caption box.
Chart Margins
Chart Margins refers to the empty space left on the top, bottom, left and right of the chart. That means, FusionCharts
would leave that much amount of empty space on the chart, before it starts plotting.
chartLeftMargin="Numerical Value (in pixels)" : Space to be left unplotted on the left side of the
chart.
chartRightMargin="Numerical Value (in pixels)" : Empty space to be left on the right side of the
chart
chartTopMargin="Numerical Value (in pixels)" : Empty space to be left on the top of the chart.
chartBottomMargin="Numerical Value (in pixels)" : Empty space to be left at the bottom of the
chart.

<set> element
We now move on to the <set> element which is a child element of the <graph> element and determines a set of data
which would appear on the graph.
A <set> element looks as under:
<set name="Jan" value="54" color="3300FF" hoverText="January"
link="ShowDetails.asp%3FMonth=Jan" alpha="80" showName="1"/>
Now let's study the the possible attributes of the <set> element:
name="string"
Example: <set name='Jan' ...>
This attribute determines the name by which the set of data would be represented in the chart. In the above
example, the value of this attribute is "Jan" and therefore, this set of data would be represented on the chart
with the name "Jan".
value="NumericalValue"
Example: <set name='Jan' value='12345' ...>
This attribute determines the numerical value for the set of data according to which the chart would be built
for the concerned set of data.
color="HexCode"
Example: <set name='Jan' value='12345' color='636363' ...>
This attribute determines the color for the concerned set of data in which it would appear in the graph.
hoverText="String value"
Example: <set name='Jan' value='12345' color='636363' hoverText='January'...>
Sometimes, you might just want to show the abbreviated names on the x-axis (to avoid cluttering or to make
the chart look more legible). However, you still have the option of showing the full name as tool tip using this
attribute. Like, in our example, we're showing the abbreviated form "Jan" on our x-axis, but the full word
"January" is shown as the tool tip.
8

1.2 Pie 2D Chart
link="URL"
Example: <set link='ShowDetails.asp%3FMonth=Jan' ...>
This attribute defines the hotspots in your graph. The hotspots are links over the data sets. Please note that
you'll need to URL Encode all the special characters (like ? and &) present in the link.All the server side
scripting languages provide a generic function to URL Encode any string - like in ASP and ASP.NET, we've
Server.URLEncode(strURL) and so on.

To open a link in a new window, just put n- in front of the link e.g., link="n-
ShowDetails.asp%3FMonth=Jan".
alpha="Numerical Value 0-100"
Example: <set ... alpha='100' ...>
This attribute determines the transparency of a data set. The range for this attribute is 0 to 100. 0 means
complete transparency (the data set wont be shown on the graph) and 100 means opaque. This option is
useful when you want to highlight a particular set of data.
showName="1"
Example : <set ... showName="1" ...>
This attribute can either the value of 0 or 1. A value of 1 indicates that the name of this data set will be
displayed in the graph whereas 0 indicates it won't be displayed. This attribute is particular useful when you
want to show/hide names of alternate data items or say every x (th) data item.
At the end of the <set> element, you would find a "/" which signals that it has no more child element

<trendLines>
Using the <trendLines> element (and child elements), you can define trend lines on the charts. Trend lines are the
horizontal lines spanning the chart canvas that aid in interpretation of data with respect to some previous pre-
determined figure. For each trend line on the chart, you need to define a <line> element as under:
<line startValue='89.5' endValue='98' color='FF0000' displayvalue='Roll. Avg.' thickness='2'
alpha='100' isTrendZone='0' showOnTop='1'/>
The <line> element can have the following attributes:
startValue='NumericalValue': The starting y-axis value for the trendline. Say, if you want to plot a
slanted trendline from value 102 to 109, the startValue would 102.
endValue='NumericalValue': The ending y-axis value for the trendline. Say, if you want to plot a slanted
trendline from value 102 to 109, the endValue would 109. If you do not specify a value for endValue, it would
automatically assume the same value as startValue.
color='HexCode' : Color of the trend line and its associated text.
displayValue='StringValue' : If you want to display a string caption for the trend line by its side, you
can use this attribute. Example: displayValue='Last Month High'. When you don't supply this attribute,
it automatically takes the value of startValue.
thickness='NumericalValue' : Thickness of the trend line
isTrendZone='1/0': Whether the trend would display a line, or a zone (filled colored rectangle).
showOnTop='1/0': Whether the trend line/zone would be displayed over other elements of the chart.
alpha='NumericalValue0-100': Alpha (transparency) of the trend line
A 2D Pie chart looks as under:
9

<graph caption='Pie Chart' decimalPrecision='0' showPercentageValues='0' showNames='1'
numberPrefix='$' showValues='1' showPercentageInLabel='0' pieYScale='45'
pieBorderAlpha='100' pieRadius='100' animation='0' shadowXShift='4' shadowYShift='4'
shadowAlpha='40' pieFillAlpha='95' pieBorderColor='FFFFFF'>
<set value='25' name='Item A' color='AFD8F8'/>
<set value='17' name='Item B' color='F6BD0F'/>
<set value='23' name='Item C' color='8BBA00' isSliced='1'/>
<set value='65' name='Item D' color='A66EDD'/>
<set value='22' name='Item E' color='F984A1'/>
</graph>

<graph> Attributes
chart.
chart.
Generic Properties
whether the data names will be displayed or not alongside the pie.
10
whether the data values will be displayed along with the pies.
showPercentageValues="1/0" : If you've opted to show the data value, this attribute helps you control
whether to show percentage values or actual values.
showPercentageInLabel ="1/0" : If you've opted to show the data value, this attribute helps you control
whether to show percentage values or actual values in the pie labels.
Pie Properties
pieRadius="Numeric Pixels": FusionCharts automatically calculates the best fit pie radius for the chart.
However, if you want to enforce one of your own radius values, you can set it using this attribute.
pieBorderThickness"Numeric Value" : Each pie on the chart has a border, whose thickness you can
specify using this attribute.
pieBorderAlpha="0-100" : This attribute helps you set the border transparency for all the pie borders.
pieFillAlpha="0-100" : This attribute helps you set the transparency for all the pies on the chart.
Name/Value display distance control
slicingDistance="Numeric Value" : If you've opted to slice a particular pie, using this attribute you can
control the distance between the sliced pie and the center of other pies.
nameTBDistance="Numeric Value" : This attribute helps you set the distance of the name/value text boxes
from the pie edge.
Pie Shadow Properties
showShadow="1/0" : This attribute helps you set whether the pie shadow would be shown or not.
shadowColor="Hex Code": If you want to set your own shadow color, you'll need to specify that color for
this attribute.
shadowAlpha ="0-100" : This attribute sets the transparency of the shadow.
shadowXShift="Numeric Value" : This attribute helps you set the x shift of the shadow pie from the
actual pie. That is, if you want to show the shadow 3 pixel right from the actual pie, set this attribute to 3.
Similarly, if you want the shadow to appear on the left of the actual pie, set it to -3.
shadowYShift="Numeric Value" : This attribute helps you set the y shift of the shadow pie from the
actual pie. That is, if you want to show the shadow 3 pixel below the actual pie, set this attribute to 3.
Similarly, if you want the shadow to appear above the actual pie, set it to -3.
Font Properties
provided here.
$40000, $50000.
numberSuffix='%25'
11
a number.
in a number.
<set> element
link="ShowDetails.asp%3FMonth=Jan" showName="1"/>
name="string"
color="HexCode"
link="URL"

12

1.3 Bar 2D Chart
isSliced="1"
Example : <set ... isSliced="1" ...>
This attribute determines whether the pie appears as a part of the total circle or is sliced out as an individual
item (highlited).
13
A 2D bar chart looks as under:

<graph caption='Fruit Production for March' subCaption='(in Millions)' yaxisname='Fruit'
xaxisname='Quantity' showAlternateVGridColor='1' alternateVGridAlpha='10'
alternateVGridColor='AFD8F8' numDivLines='4' decimalPrecision='0' canvasBorderThickness='1'
canvasBorderColor='114B78' baseFontColor='114B78' hoverCapBorderColor='114B78'
hoverCapBgColor='E7EFF6'>
<set name='Orange' value='23' color='AFD8F8' alpha='70'/>
<set name='Apple' value='12' color='F6BD0F' alpha='70'/>
<set name='Banana' value='17' color='8BBA00' alpha='70'/>
<set name='Mango' value='14' color='A66EDD' alpha='70'/>
<set name='Litchi' value='12' color='F984A1' alpha='70'/>
</graph>

<graph> Attributes
14
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
not.
showBarShadow="1/0": Whether the 2D shadow for the bars would be shown or not.
Font Properties
provided here.
15
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
bands.
numHDivLines="NumericalValue" : Sets the number of horizontal divisional lines to be drawn.
hDivlinecolor="HexColorCode" : Color of horizontal grid divisional line.
hDivLineThickness="NumericalValue" : Thickness (in pixels) of the line
hDivLineAlpha="NumericalValue0-100" : Alpha (transparency) of the line.
16
bands.
Chart Margins
chart.
chart
chart.

<set> element
name="string"
color="HexCode"
17

1.4 Line 2D Chart
link="URL"

showName="1"

<trendLines>
A 2D Line chart looks as under:
18


<graph caption='Monthly Sales Summary' subcaption='For the year 2004' xAxisName='Month'
yAxisMinValue='15000' yAxisName='Sales' numberPrefix='$' showNames='1' showValues='0'
rotateNames='0' showColumnShadow='1' animation='1' showAlternateHGridColor='1'
AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20'
alternateHGridAlpha='5' canvasBorderColor='666666' baseFontColor='666666'>
<set name='Jan' value='17400' hoverText='January'/>
<set name='Feb' value='19800' hoverText='February'/>
<set name='Mar' value='21800' hoverText='March'/>
<set name='Apr' value='23800' hoverText='April'/>
<set name='May' value='29600' hoverText='May'/>
<set name='Jun' value='27600' hoverText='June'/>
<set name='Jul' value='31800' hoverText='July'/>
<set name='Aug' value='39700' hoverText='August'/>
<set name='Sep' value='37800' hoverText='September'/>
<set name='Oct' value='21900' hoverText='October'/>
<set name='Nov' value='32900' hoverText='November' />
<set name='Dec' value='39800' hoverText='December' />
</graph>

<graph> Attributes
chart.
Canvas Properties
19
canvas.
chart.
provided by you.
Generic Properties
not.
Line Properties
lineColor="Hex Code" : If you want the entire line chart to be plotted in one color, set that color for this
attribute.
lineThickness="Numeric Value" : Thickness of the line (in pixels).
lineAlpha="0-100" : Transparency of the line.
Line Shadow Properties
showShadow="1/0" : This attribute helps you set whether the line shadow would be shown or not.
shadowColor="Hex Code" : If you want to set your own shadow color, you'll need to specify that color for
this attribute.
shadowThickness="Numeric Value" : This attribute helps you set the thickness of the shadow line (in
pixels).
shadowAlpha ="0-100" : This attribute sets the transparency of the shadow line.
shadowXShift="Numeric Value" : This attribute helps you set the x shift of the shadow line from the chart
line. That is, if you want to show the shadow 3 pixel right from the actual line, set this attribute to 3. Similarly,
if you want the shadow to appear on the left of the actual line, set it to -3.
shadowYShift="Numeric Value" : This attribute helps you set the y shift of the shadow line from the chart
line. That is, if you want to show the shadow 3 pixel below the actual line, set this attribute to 3. Similarly, if
you want the shadow to appear above the actual line, set it to -3.
20
Anchor properties
Anchors (or the marker points) are the polygons which appear at the joint of two consecutive lines. On a line chart, the
anchors are the elements which react to the hover caption and link for that particular data point. You can customize all
the facets of the anchors using the properties below:
showAnchors="1/0": Configuration whether the anchors would be shown on the chart or not. If the anchors
are not shown, then the hover caption and link functions won't work.
anchorSides="Numeric Value greater than 3": This attribute sets the number of sides the anchor will
have. For e.g., an anchor with 3 sides would represent a triangle, with 4 it would be a square and so on.
anchorRadius="Numeric Value" : This attribute sets the radius (in pixels) of the anchor. Greater the
radius, bigger would be the anchor size.
anchorBorderColor="Hex Code" : Border Color of the anchor.
anchorBorderThickness="Numeric Value" : Thickness of the anchor border (in pixels).
anchorBgColor="Hex Code" : Background color of the anchor.
anchorBgAlpha="Numeric Value" : Alpha of the anchor background.
anchorAlpha="Numeric Value" : This function lets you set the tranparency of the entire anchor (including
the border). This attribute is particularly useful, when you do not want the anchors to be visible on the chart,
but you want the hover caption and link functionality. In that case, you can set anchorAlpha to 0.
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
21
Zero Plane
bands.
bands.
Chart Margins
chart.
22
chart
chart.

<set> element
name="string"
color="HexCode"
link="URL"

showName="1"

<trendLines>
23

1.5 Column 3D Chart
24
A 3D Column chart looks as under:

<graph bgcolor='e1f5ff' caption='Decline in Net Interest Margins of Asian Banks (1995-
2001)' subCaption='(in Percentage %)' yaxismaxvalue="2" yaxisminvalue='-2.5'
yaxisname='Points' xaxisname='Country' hovercapbg='FFFFDD' hovercapborder='000000'
numdivlines='4' numberSuffix='%25'>
<set name='Taiwan' value='-0.33' color='F6BD0F'/>
<set name='Malaysia' value='-0.27' color='FF6600'/>
<set name='Hong Kong' value='0.40' color='8BBA00' alpha='70'/>
<set name='Philippines' value='0.6' color='F984A1'/>
<set name='Singapore' value='-0.8' color='A66EDD' alpha='70'/>
<set name='Thailand' value='-2.2' color='B2FF66'/>
<set name='India' value='1.2' color='AFD8F8'/>
<trendlines>
<line startvalue='0.8' displayValue='Good' color='FF0000' thickness='1'
isTrendZone='0'/>
<line startvalue='-0.4' displayValue='Bad' color='009999' thickness='1'
isTrendZone='0'/>
</trendlines>
</graph>

<graph> Attributes
chart.
25
Canvas Properties
canvasBgColor="HexColorCode" : This attribute helps you set the background color of the canvas. The
background of the canvas is the one behind the columns.
canvasBaseColor="HexColorCode" : This attribute helps you set the color of the canvas base. The canvas
abse is the on which the base of the columns are placed..
canvasBaseDepth="Numerical Value" : This attribute helps you set the height (3D Depth) of the canvas
base.
base.
canvasBgDepth="Numerical Value" : This attribute helps you set the 3D Depth of the canvas
background.
showCanvasBg="1/0" : This attribute helps us set whether we need to show the canvas background.
showCanvasBase="1/0" : This attribute helps us set whether we need to show the canvas base.
chart.
provided by you.
Generic Properties
not.
Font Properties
provided here.
26
here.
Number Formatting Option
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
The zero plane is a 3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart,
you won't see a visible zero plane.
zeroPlaneShowBorder="1/0" : Whether the border of a 3D zero plane would be plotted or not.
zeroPlaneBorderColor="Hex Code" : If the border is to be plotted, this attribute sets the border color for
the plane.
27
Chart Margins
chart.
chart
chart.

<set> element
name="string"
color="HexCode"
link="URL"

showName="1"
28

1.6 Pie 3D Chart

<trendLines>
29
A 3D Pie chart looks as under:

<graph caption='Pie Chart' bgColor='F1f1f1' decimalPrecision='0' showPercentageValues='0'
showNames='1' numberPrefix='$' showValues='1' showPercentageInLabel='0' pieYScale='45'
pieBorderAlpha='40' pieFillAlpha='70' pieSliceDepth='15' pieRadius='100'>
<set value='25' name='Item A' color='FF9966'/>
<set value='17' name='Item B' color='FF0000'/>
<set value='23' name='Item C' color='006F00' />
<set value='65' name='Item D' color='0099FF'/>
<set value='22' name='Item E' color='CCCC00'/>
</graph>

<graph> Attributes
chart.
chart.
Generic Properties
30
Pie Properties
pieSliceDepth="Numeric Value" : This attribute helps you set the 3D height (depth) of the pies on the
chart (in pixels).
pieYScale="Numeric Value 30-100" : This value sets the skewness of the pie chart (vertical slant).
pieBorderThickness"Numeric Value" : Each pie on the chart has a border, whose thickness you can
specify using this attribute.
pieBorderAlpha="0-100" : This attribute helps you set the border transparency for all the pie borders.
pieFillAlpha="0-100" : This attribute helps you set the transparency for all the pies on the chart.
Font Properties
provided here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
<set> element
31

1.7 Area 2D Chart
name="string"
color="HexCode"
link="URL"

A 2D Area chart looks as under:
32

<graph caption='Fruit Production for March' subCaption='(in Millions)' yaxisname='Fruit'
xaxisname='Quantity' showAlternateHGridColor='1' alternateHGridAlpha='10'
alternateHGridColor='AFD8F8' numDivLines='4' decimalPrecision='0' canvasBorderThickness='1'
canvasBorderColor='114B78' baseFontColor='114B78' hoverCapBorderColor='114B78'
hoverCapBgColor='E7EFF6'>
<set name='Orange' value='23' color='AFD8F8' alpha='70'/>
<set name='Apple' value='12' color='F6BD0F' alpha='70'/>
<set name='Banana' value='17' color='8BBA00' alpha='70'/>
<set name='Mango' value='14' color='A66EDD' alpha='70'/>
<set name='Litchi' value='12' color='F984A1' alpha='70'/>
</graph>

<graph> Attributes

chart.
Canvas Properties
33
canvas.
chart.
provided by you.
Generic Properties
not.
Area Properties
showAreaBorder="1/0" : Configuration whether the border over the area would be shown or not.
areaBorderThickness="Numeric Value" : If the area border is to be shown, this attribute sets the
thickness (in pixels) of the area border.
areaBorderColor="Hex Color" : If the area border is to be shown, this attribute sets the color of the area
border.
areaBgColor="Hex Color" : If you want the entire area chart to be filled with one color, set that color for
this attribute.
areaAlpha="0-100" : Transparency of the area fill.
Font Properties
provided here.
34
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane

bands.
35
bands.
Chart Margins
chart.
chart
chart.

<set> element
name="string"
color="HexCode"
36

1.8 Doughnut 2D Chart
link="URL"

showName="1"

<trendLines>
Doughnut chart looks as under:
37


<graph decimalPrecision='0' showPercentageValues='0' showNames='1' numberPrefix='$'
showValues='1' showPercentageInLabel='0'
pieRadius='100'>
<set value='5' name='Item A' color='AFD8F8' />
<set value='5' name='Item B' color='F6BD0F' />
<set value='5' name='Item C' color='8BBA00' />
<set value='5' name='Item D' color='A66EDD' />
<set value='2' name='Item E' color='F984A1' />
</graph>

<graph> Attributes

chart.
chart.
Generic Properties
38
Pie Properties
Name/Value display distance control
nameTBDistance="Numeric Value" : This attribute helps you set the distance of the name/value text boxes
from the pie edge.
Pie Shadow Properties
showShadow="1/0" : This attribute helps you set whether the pie shadow would be shown or not.
shadowColor="Hex Code": If you want to set your own shadow color, you'll need to specify that color for
this attribute.
Font Properties
provided here.
$40000, $50000.
To use special characters for numberPrefix or numberSuffix, you'll need to URL Encode them. That is,
suppose you wish to have numberSuffix as % (like 30%), you'll need to specify it as under:
numberSuffix='%25'
a number.
in a number.
39

1.9 Multi-Series Column 2D Chart
<set> element
name="string"
color="HexCode"
link="URL"

A 2D Multi-series Column chart looks as under:
40

<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D'
rotateNames='0' animation='1' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC'
divLineAlpha='80' decimalPrecision='0' showAlternateHGridColor='1' AlternateHGridAlpha='30'
AlternateHGridColor='CCCCCC' caption='Global Export' subcaption='In Millions Tonnes per
annum pr Hectare' >
<categories font='Arial' fontSize='11' fontColor='000000'>
<category name='N. America' hoverText='North America'/>
<category name='Asia' />
<category name='Europe' />
<category name='Australia' />
<category name='Africa' />
</categories>
<dataset seriesname='Rice' color='FDC12E' alpha='100'>
<set value='30' />
<set value='26' />
<set value='29' />
<set value='31' />
<set value='34' />
</dataset>
<dataset seriesname='Wheat' color='56B9F9' showValues='1' alpha='100'>
<set value='67' />
<set value='98' />
<set value='79' />
<set value='73' />
<set value='80' />
</dataset>
<dataset seriesname='Grain' color='C9198D' showValues='1' alpha='100'>
<set value='27' />
<set value='25' />
<set value='28' />
<set value='26' />
<set value='10' />
</dataset>
</graph>

41
<graph> Attributes
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
not.
showLegend="1/0" : This attribute sets whether the legend would be displayed at the bottom of the chart.
Font Properties
42
provided here.
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
43
bands.
bands.
Chart Margins
chart.
chart
chart.

<categories> element
The <categories> element can have the following attributes:
font="font face" : Font face of the category names.
fontSize="Numeric value" : Font size of the category names.
fontColor="Hex Color" : Font color of the category names.

<category> element
Each <category> element represents a x-axis data label. You can specify the following attributes for <category>
element:
44
name="String" : This attribute determines the category name which would be displayed on the x-axis as the
data label. In our example, we've specified the category names as names of six months (in abbreviated
format).
hoverText="String" : Sometimes, you might just want to show the abbreviated names on the x-axis (to
avoid cluttering or to make the chart look more legible). However, you still have the option of showing the full
name as tool tip using this attribute. Like, in our example, we're showing the abbreviated form "Jan" on our x-
axis, but the full word "January" is shown as the tool tip.
showName="1/0" : This attribute can either the value of 0 or 1. A value of 1 indicates that this data
label/category name will be displayed on the chart whereas 0 indicates it won't be displayed. This attribute is
particular useful when you want to show/hide names of alternate data items or say every x (th) data item.
<dataset> element
The following attributes can be defined for the <dataset> element.
seriesName="String" : This attribute denotes the name of the dataset series. That is, if we're plotting a
monthly sales analysis for the years 2004 and 2003, the seriesName for the first dataset would be 2004 and
that of the second would be 2003. This is the value that would be shown in the legend.
color="Hex Color" : This attribute sets the color using which that particular set of data would be drawn.
showValues="1/0": This attribute sets the configuration whether the values (for this particular data set) will
be shown alongside the data sets. You can set this value for individual datasets to highlight the most
prominent data.
alpha="0-100": This attribute sets the alpha (transparency) of the entire dataset.
You can also later specify alpha at the <set> level to over ride this value. For example,
<dataset seriesName='Sales 2001' color='FFF123' alpha='80' ..>
<set value='1'>
<set value='2'>
<set value='3' alpha='90'>
</dataset>
In the above data, the <set> elements with the value 1 and 2 will have an alpha of 80 on the graph, whereas
the one containing 3 as its value will have alpha as 90.
<set> element
We now move on to the <set> element which is a child element of the <dataset> element and determines a set of
data which would appear on the graph.
<set value="54" color="3300FF" link="ShowDetails.asp%3FMonth=Jan" alpha="80" />
color="HexCode"
This attribute determines the color for the concerned set of data in which it would appear in the graph. This
value here overrides the value specified at dataset level.
link="URL"

45

1.10 Multi-Series Column 3D Chart
useful when you want to highlight a particular set of data. This value here overrides the value specified at
dataset level.

<trendLines>
A 3D Multi-series Column chart looks as under:
46

<graph caption='Product Sales' subCaption='Sales in Dollars' xAxisName='Month'
yAxisName='Sales'
canvasBgColor='F6DFD9' canvasBaseColor='FE6E54' hovercapbgColor='FFECAA'
hovercapborder='F47E00' divlinecolor='F47E00' yaxisminvalue='0' yaxismaxvalue='10000'
numberPrefix='$' limitsDecimalPrecision='0' divLineDecimalPrecision='0'>
<categories>
<category name='Jan' hoverText='January'/>
<category name='Feb' hoverText='February'/>
<category name='Mar' hoverText='March'/>
<category name='Apr' hoverText='April'/>
<category name='May' hoverText='May'/>
<category name='Jun' hoverText='June'/>
</categories>
<dataset seriesname='Product A' color='F0807F' showValue='1'>
<set value='8343' />
<set value='7684'/>
</dataset>
<dataset seriesname='Product B' color='B22222' showValue='1'>
</dataset>
</graph>

<graph> Attributes
47
chart.
Canvas Properties
base.
base.
background.
chart.
provided by you.
Generic Properties
not.
48
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
the plane.
49
Chart Margins
chart.
chart
chart.


<category> element
element:
format).
50
<dataset> element
prominent data.
<set value='1'>
<set value='2'>
</dataset>
<set> element
color="HexCode"
link="URL"

dataset level.

<trendLines>
51

1.11 Multi-Series Line 2D Chart
52
A 2D Multi-series Line chart looks as under:

<graph caption='February Peak Load vs. Today' xAxisName='Hour Ending' yAxisName='Load (MW)'
hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0'
showvalues='0' animation='1' numdivlines='3' numVdivlines='0' yaxisminvalue='1000'
yaxismaxvalue='1800' lineThickness='3' rotateNames='1'>
<categories>
<category name='1' />
</categories>
<dataset seriesname='Current Day 2/3/05' color='0099FF' showValue='1' alpha='100'
anchorAlpha='0' lineThickness='2'>
53
</dataset>
<dataset seriesname='February Peak Load' color='FF8000' showValue='1' alpha='80'
showAnchors='0'>
</dataset>
</graph>

<graph> Attributes
54
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
not.
Line Properties
lineColor="Hex Code" : If you want the entire line chart to be plotted in one color, set that color for this
attribute.
55
The Line shadow is applicable only in Multi series line chart (Type 2).
this attribute.
pixels).
Anchor properties
Font Properties
provided here.
here.
56
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
bands.
vDivlinecolor="HexColorCode" : Color of vertical grid divisional line.
vDivLineThickness="NumericalValue" : Thickness (in pixels) of the line
vDivLineAlpha="NumericalValue0-100" : Alpha (transparency) of the line.
57
bands.
Chart Margins
chart.
chart
chart.


<category> element
element:
format).
<dataset> element
58
prominent data.
<set value='1'>
<set value='2'>
</dataset>
Dataset specific anchor properties
The anchor properties below would be applicable for anchor of this particular dataset only.
showAnchors="1/0": Configuration whether the anchors would be shown for this dataset or not. If the
anchors are not shown, then the hover caption and link functions won't work.
anchorSides="Numeric Value greater than 3": This attribute sets the number of sides the anchors (of
this dataset) will have. For e.g., an anchor with 3 sides would represent a triangle, with 4 it would be a square
and so on.
Dataset specific line thickness
<set> element
<set value="54" link="ShowDetails.asp%3FMonth=Jan" alpha="80" />
link="URL"

59

1.12 Multi-Series Area 2D Chart
dataset level.

<trendLines>
60
A 2D Multi-series Area chart looks as under:

<graph caption="Sales Volume" subcaption="For the month of Aug 2004" divlinecolor="F47E00"
numdivlines="4" showAreaBorder="1" areaBorderColor="000000" numberPrefix="$" showNames="1"
numVDivLines="29" vDivLineAlpha="30" formatNumberScale="1" rotateNames="1">
<categories>
<category name="08/01" />
</categories>
<dataset seriesname="Product A" color="FF5904" showValues="0" areaAlpha="50"
showAreaBorder="1" areaBorderThickness="2" areaBorderColor="FF0000">
<set value="36634" />
<set value="43653" />
61
<set value="55565" />
<set value="49457" />
<set value="64654" />
<set value="58457" />
<set value="66456" />
<set value="48765" />
<set value="52574" />
<set value="49546" />
<set value="42346" />
<set value="51765" />
<set value="78456" />
<set value="53867" />
<set value="38359" />
<set value="63756" />
<set value="45554" />
<set value="6543" />
</dataset>
<dataset seriesname="Product B" color="99cc99" showValues="0" areaAlpha="50"
showAreaBorder="1" areaBorderThickness="2" areaBorderColor="006600">
<set value="12152" />
<set value="15349" />
<set value="16442" />
<set value="17551" />
<set value="13478" />
<set value="16553" />
<set value="17338" />
<set value="17263" />
<set value="16552" />
<set value="17649" />
<set value="12442" />
<set value="11151" />
<set value="15478" />
<set value="16553" />
<set value="16538" />
<set value="17663" />
<set value="13252" />
<set value="16549" />
<set value="14342" />
<set value="13451" />
<set value="15378" />
<set value="17853" />
<set value="17638" />
<set value="14363" />
<set value="10952" />
<set value="10049" />
62
<set value="19442" />
<set value="13951" />
<set value="19778" />
<set value="18453" />
<set value="17338" />
</dataset>
</graph>

<graph> Attributes
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
63
not.
Area Properties
border.
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
64
Zero Plane
bands.
bands.
Chart Margins
chart.
chart
65
chart.


<category> element
element:
format).
<dataset> element
prominent data.
<set value='1'>
<set value='2'>
</dataset>
Dataset specific area properties
The area properties below would be applicable for anchor of this particular dataset only.
border.
66
<set> element
link="URL"

dataset level.

<trendLines>
67

1.13 Multi-Series Bar 2D Chart
68
A 2D Multi-series Bar chart looks as under:

<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D'
rotateNames='0' animation='1' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC'
divLineAlpha='80' decimalPrecision='0' showAlternateVGridColor='1' AlternateVGridAlpha='30'
AlternateVGridColor='CCCCCC' caption='Global Export' subcaption='In Millions Tonnes per
annum pr Hectare' >
<category name='Asia' />
</categories>
<dataset seriesname='Rice' color='FDC12E' alpha='70'>
<set value='30' />
<set value='26' />
<set value='29' />
<set value='31' />
<set value='34' />
</dataset>
<dataset seriesname='Wheat' color='56B9F9' showValues='1' alpha='70'>
<set value='67' />
<set value='98' />
<set value='79' />
<set value='73' />
<set value='80' />
</dataset>
<dataset seriesname='Grain' color='C9198D' showValues='1' alpha='70'>
<set value='27' />
<set value='25' />
69
<set value='28' />
<set value='26' />
<set value='10' />
</dataset>
</graph>

<graph> Attributes
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
70
not.
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
71
bands.
bands.
Chart Margins
chart.
chart
chart.

72

<category> element
element:
format).
<dataset> element
prominent data.
<set value='1'>
<set value='2'>
</dataset>
<set> element
color="HexCode"
link="URL"
73

1.14 Stacked Column 2D Chart

dataset level.

<trendLines>
A 2D Stacked Column chart looks as under:
74

<graph bgColor='F1f1f1' caption='Global Export' subcaption='In Millions Tonnes'
xaxisname='Continent' yaxisname='Export' canvasbgcolor='F1F1F1' animation='1'
numdivlines='3' divLineColor='333333' decimalPrecision='0' showLegend='1'
showColumnShadow='1' yAxisMaxValue='100'>
<category name='Asia' hoverText='Asia (excluding SE Islands)'/>
</categories>
<dataset seriesname='Rice' color='FF0000' alpha='100'>
<set value='27' />
<set value='26' />
<set value='29' />
<set value='31' />
<set value='34' />
</dataset>
<dataset seriesname='Wheat' color='009900' showValues='1' alpha='100'>
<set value='41' />
<set value='28' />
<set value='19' />
<set value='13' />
<set value='20' />
</dataset>
<dataset seriesname='Grain' color='FFFFDD' showValues='1' alpha='100'>
<set value='28' />
<set value='25' />
<set value='28' />
<set value='26' />
<set value='10' />
</dataset>
<trendLines>
<line startValue='16' endValue='23' color='123456' thickness='1' alpha='30'
showOnTop='1' displayValue='Trend 1'/>
<line startValue='45' endValue='40' color='0372AB' thickness='1' alpha='30'
showOnTop='0' displayValue='Trend 2'/>
75
</trendLines>
</graph>

<graph> Attributes
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
not.
76
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
77
bands.
Chart Margins
chart.
chart
chart.


<category> element
element:
format).
78
<dataset> element
prominent data.
<set value='1'>
<set value='2'>
</dataset>
<set> element
color="HexCode"
link="URL"

dataset level.
79

1.15 Stacked Column 3D Chart

<trendLines>
80
A 3D Stacked Column chart looks as under:

<graph xaxisname='Months' yaxisname='Sales' caption='Cumulative Sales' subcaption='(From
Dec-03 to Dec-04)' lineThickness='1' animation='1' showNames='1' alpha='100' showLimits='1'
decimalPrecision='1' rotateNames='1' numDivLines='3' numberPrefix='$'
limitsDecimalPrecision='0' showValues='0'>
<categories>
<category name='Dec-03' showName='1' />
<category name='Jan-04' showName='0' />
<category name='Feb-04' showName='1' />
<category name='Mar-04' showName='0' />
<category name='Apr-04' showName='1' />
<category name='May-04' showName='0' />
<category name='Jun-04' showName='1' />
<category name='Jul-04' showName='0' />
<category name='Aug-04' showName='1' />
<category name='Sep-04' showName='0' />
<category name='Oct-04' showName='1' />
<category name='Nov-04' showName='0' />
</categories>
<dataset seriesName='Product1' color='0080C0'>
<set value='810' alpha='100' />
</dataset>
<dataset seriesName='Product2' color='008040'>
81
</dataset>
<dataset seriesName='Product3' color='FFFF00'>
</dataset>
</dataset>
<dataset seriesName='Product5' color='EB59CB'>
</dataset>
<dataset seriesName='Canceled' color='FFCC00'>
82
<set value='-50' alpha='100' />
</dataset>
<dataset seriesName='Deleted' color='FF0000'>
<set value='-1060' alpha='100' />
<set value='-1320' alpha='100' />
<set value='-1520' alpha='100' />
<set value='-1650' alpha='100' />
<set value='-1660' alpha='100' />
</dataset>
</graph>

<graph> Attributes
chart.
Canvas Properties
base.
base.
83
background.
chart.
provided by you.
Generic Properties
not.
Font Properties
provided here.
here.
$40000, $50000.
84
numberSuffix='%25'
a number.
in a number.
Zero Plane
the plane.
Chart Margins
chart.
85
chart
chart.


<category> element
element:
format).
<dataset> element
prominent data.
<set value='1'>
<set value='2'>
</dataset>
<set> element
86

color="HexCode"
link="URL"

dataset level.

<trendLines>
87
1.16 Stacked Area 2D Chart
88
A 2D Stacked Area chart looks as under:

<graph caption='Site hits per hour' subCaption='In Thousands' numdivlines='9'
showgridbg='1' lineThickness='1' animation='1' showNames='1' showValues='0'
numVDivLines='22' yaxisminvalue='0' formatNumberScale='1' rotateNames='1' areaAlpha='90'
showLimits='1' decimalPrecision='1' showAlternateHGridColor='1' divLineDecimalPrecision='0'
limitsDecimalPrecision='0' showAreaBorder='1'>
<categories >
<category name='00:00' />
</categories>
<dataset seriesname='Sat' color='0080C0' areaBorderColor='0080C0'>
89
<set value='36' />
<set value='71' />
<set value='85' />
<set value='92' />
<set value='101' />
<set value='116' />
<set value='164' />
<set value='180' />
<set value='192' />
<set value='262' />
<set value='319' />
<set value='489' />
<set value='633' />
<set value='904' />
</dataset>
<dataset seriesname='Sun' color='008040' areaBorderColor='008040'>
<set value='23' />
<set value='40' />
<set value='62' />
<set value='118' />
<set value='130' />
<set value='139' />
<set value='158' />
<set value='233' />
<set value='297' />
<set value='379' />
<set value='503' />
<set value='687' />
<set value='746' />
<set value='857' />
<set value='973' />
</dataset>
<dataset seriesname='Mon' color='808080' areaBorderColor='808080'>
<set value='37' />
<set value='45' />
<set value='70' />
<set value='79' />
<set value='168' />
<set value='337' />
90
<set value='374' />
<set value='431' />
<set value='543' />
<set value='784' />
</dataset>
<dataset seriesname='Tue' color='800080' areaBorderColor='800080'>
<set value='54' />
<set value='165' />
<set value='175' />
<set value='190' />
<set value='212' />
<set value='241' />
<set value='308' />
<set value='401' />
<set value='481' />
<set value='851' />
</dataset>
<dataset seriesname='Wed' color='FF8040' areaBorderColor='FF8040'>
<set value='111' />
<set value='120' />
<set value='128' />
<set value='140' />
<set value='146' />
<set value='157' />
<set value='190' />
<set value='250' />
<set value='399' />
<set value='691' />
<set value='952' />
91
</dataset>
<dataset seriesname='Thu' color='FFFF00' areaBorderColor='FFFF00'>
<set value='115' />
<set value='141' />
<set value='175' />
<set value='189' />
<set value='208' />
<set value='229' />
<set value='252' />
<set value='440' />
<set value='608' />
<set value='889' />
</dataset>
<dataset seriesname='Fri' color='FF0080' areaBorderColor='FF0080'>
<set value='98' />
92
</dataset>
</graph>

<graph> Attributes
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
93
not.
Area Properties
border.
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
94
Zero Plane
bands.
bands.
Chart Margins
chart.
chart
95
chart.


<category> element
element:
format).
<dataset> element
prominent data.
<set value='1'>
<set value='2'>
</dataset>
Dataset specific area properties
The area properties below would be applicable for anchor of this particular dataset only.
96
border.
<set> element
link="URL"

dataset level.

<trendLines>
97

1.17 Stacked Bar 2D Chart
98
A 2D Multi-series Bar chart looks as under:

<graph xaxisname='Months' yaxisname='Sales' caption='Cumulative Sales' subcaption='(From
Dec-03 to Dec-04)' lineThickness='1' animation='1' showNames='1' alpha='100' showLimits='1'
decimalPrecision='1' rotateNames='1' numDivLines='2' numberPrefix='$'
limitsDecimalPrecision='0' showValues='0'>
<categories>
<category name='Jan-04' showName='0' />
<category name='Feb-04' showName='1' />
<category name='Mar-04' showName='0' />
<category name='Apr-04' showName='1' />
<category name='May-04' showName='0' />
<category name='Jun-04' showName='1' />
<category name='Jul-04' showName='0' />
<category name='Aug-04' showName='1' />
<category name='Sep-04' showName='0' />
<category name='Oct-04' showName='1' />
<category name='Nov-04' showName='0' />
</categories>
<dataset seriesName='Product1' color='0080C0'>
99
</dataset>
</dataset>
<dataset seriesName='Product3' color='FFFF00'>
</dataset>
</dataset>
<dataset seriesName='Product5' color='EB59CB'>
100
</dataset>
<dataset seriesName='Canceled' color='FFCC00'>
</dataset>
<dataset seriesName='Deleted' color='FF0000'>
<set value='-1060' alpha='100' />
<set value='-1320' alpha='100' />
<set value='-1520' alpha='100' />
<set value='-1650' alpha='100' />
<set value='-1660' alpha='100' />
</dataset>
</graph>

<graph> Attributes
101
chart.
Canvas Properties
canvas.
chart.
provided by you.
Generic Properties
not.
Font Properties
provided here.
102
here.
$40000, $50000.
numberSuffix='%25'
a number.
in a number.
Zero Plane
bands.
103
bands.
Chart Margins
chart.
chart
chart.


<category> element
element:
format).
<dataset> element
104
prominent data.
<set value='1'>
<set value='2'>
</dataset>
<set> element
color="HexCode"
link="URL"

dataset level.

<trendLines>
105

1.18 Multi-Series Column 2D Line Dual Y Chart
106
A 2D Multi-series Column Multi-series Line Dual Y chart looks as under:

<graph PYAxisName='Amount' SYAxisName='Quantity' shownames='1' showvalues='0'
showLegend='1' rotateNames='0' formatNumberScale='1' decimalPrecision='2'
limitsDecimalPrecision='0' divLineDecimalPrecision='1' formatNumber='1'
chartTopMargin='15'>
<categories>
<category name='Ernst...' hoverText='Ernst Handel'/>
<category name='QUICK...' hoverText='QUICK-Stop'/>
<category name='Save-...' hoverText='Save-a-lot Markets'/>
<category name='Hanar...' hoverText='Hanari Carnes'/>
<category name='Rattl...' hoverText='Rattlesnake Canyon Grocery'/>
<category name='Hungr...' hoverText='Hungry Owl All-Night Grocers'/>
<category name='Knig...' hoverText='Kniglich Essen'/>
<category name='White...' hoverText='White Clover Markets'/>
<category name='Folk ...' hoverText='Folk och f HB'/>
<category name='Supr...' hoverText='Suprmes dlices'/>
</categories>
<dataset seriesname='Amount' showValues='0' color='AFD8F8' parentYAxis='P'
numberPrefix='$'>
<set value='41210.65' />
<set value='37217.32' />
<set value='36310.11' />
<set value='23821.2' />
<set value='21238.27' />
<set value='20402.12' />
<set value='19582.77' />
<set value='15278.9' />
<set value='13644.06' />
<set value='11644.6' />
</dataset>
<dataset seriesname='Discount' showValues='0' color='FDC12E' parentYAxis='P'
numberPrefix='$'>
<set value='1202.27254486084' />
<set value='2736.60256195068' />
<set value='5047.74497413635' />
<set value='337.672510147095' />
<set value='404.888009995222' />
<set value='1844.77046012878' />
<set value='528.849014282227' />
<set value='0' />
<set value='1798.85203838348' />
107
<set value='174.320002555847' />
</dataset>
<dataset seriesname='Quantity' showValues='0' color='FF8000' anchorBorderColor='FF8000'
parentYAxis='S' lineThickness='4'>
<set value='478' />
<set value='438' />
<set value='395' />
<set value='400' />
<set value='360' />
<set value='560' />
<set value='532' />
</dataset>
</graph>

<graph> Attributes
chart.
Canvas Properties
canvas.
Instead of yAxisName (normal multi-series charts), in the combination charts we've two different attributes specifying
the y-axis titles for two different axis (primary and secondary).
chart.
PYAxisName= "String" : Primary y-Axis text title.
SYAxisName= "String" : Secondary y-Axis text title.
Since the combination chart has two y-axis, you can define the upper and lower limit for both of them. We use the
108
following attributes instead of the normal yAxisMinValue and yAxisMaxValue.
PYAxisMaxValue="value": This attribute determines the upper limit of primary y-axis.
PYAxisMinValue="value" : This attribute determines the lower limit of primary y-axis.
SYAxisMaxValue="value": This attribute determines the upper limit of secondary y-axis.
SYAxisMinValue="value" : This attribute determines the lower limit of secondary y-axis.
provided by you.
Generic Properties
showSecondaryLimits="1/0" : Option whether to show/hide the chart limit textboxes (secondary y-axis).
not.
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
109
a number.
in a number.
Line Properties
lineColor="Hex Code" : Color of the chart line.
this attribute.
pixels).
Anchor properties
Zero Plane

110
showDivLineSecondaryValue="1/0" : Option to show/hide the secondary textual value of the divisional
line (i.e., text shown on the right side of the canvas for the secondary axis).
bands.
Chart Margins
chart.
chart
chart.

111

<category> element
element:
format).
<dataset> element
parentYAxis="P/S" : Each <dataset> element has an attribute parentYAxis in the combination chart.
This attribute can take a value of P or S, whereas P denoting primary axis and S denoting secondary axis. Like,
in our above example, we have the amount dataset set as primary axis:
numberPrefix='$'>
and the Quantity dataset set as secondary axis:
<dataset seriesname='Quantity' showValues='0' color='FF8000'
anchorBorderColor='FF8000' parentYAxis='S' lineThickness='4'>
You can have more than one primary or secondary datasets but atleast one of both is required.
prominent data.
<set value='1'>
<set value='2'>
</dataset>
Dataset specific number prefix and suffix
numberPrefix="$" : Using this attribute, you could add prefix to all the numbers for this dataset.
numberSuffix="p.a" : Using this attribute, you could add prefix to all the numbers for this dataset.
112

1.19 Multi-Series Column 3D Line Dual Y Chart
and so on.
<set> element
link="URL"

dataset level.
A 3D Multi-series Column Multi-series Line Dual Y chart looks as under:
113

<graph PYAxisName='Amount' SYAxisName='Quantity' shownames='1' showvalues='0'
showLegend='1' rotateNames='0' formatNumberScale='1' decimalPrecision='2'
limitsDecimalPrecision='0' divLineDecimalPrecision='1' formatNumber='1'
chartTopMargin='15'>
<categories>
<category name='Ernst...' hoverText='Ernst Handel'/>
<category name='QUICK...' hoverText='QUICK-Stop'/>
<category name='Save-...' hoverText='Save-a-lot Markets'/>
<category name='Hanar...' hoverText='Hanari Carnes'/>
<category name='Rattl...' hoverText='Rattlesnake Canyon Grocery'/>
<category name='Hungr...' hoverText='Hungry Owl All-Night Grocers'/>
<category name='Knig...' hoverText='Kniglich Essen'/>
<category name='White...' hoverText='White Clover Markets'/>
<category name='Folk ...' hoverText='Folk och f HB'/>
<category name='Supr...' hoverText='Suprmes dlices'/>
</categories>
numberPrefix='$'>
<set value='41210.65' />
<set value='37217.32' />
<set value='36310.11' />
<set value='23821.2' />
<set value='21238.27' />
<set value='20402.12' />
<set value='19582.77' />
<set value='15278.9' />
<set value='13644.06' />
<set value='11644.6' />
</dataset>
<dataset seriesname='Discount' showValues='0' color='FDC12E' parentYAxis='P'
numberPrefix='$'>
<set value='1202.27254486084' />
<set value='2736.60256195068' />
<set value='5047.74497413635' />
<set value='337.672510147095' />
<set value='404.888009995222' />
<set value='1844.77046012878' />
<set value='528.849014282227' />
<set value='0' />
<set value='1798.85203838348' />
<set value='174.320002555847' />
</dataset>
114
<dataset seriesname='Quantity' showValues='0' color='FF8000' anchorBorderColor='FF8000'
parentYAxis='S' lineThickness='4'>
<set value='478' />
<set value='438' />
<set value='395' />
<set value='400' />
<set value='360' />
<set value='560' />
<set value='532' />
</dataset>
</graph>

<graph> Attributes


chart.
Canvas Properties
base.
base.
background.
Instead of yAxisName (normal multi-series charts), in the combination charts we've two different attributes specifying
the y-axis titles for two different axis (primary and secondary).
chart.
115
PYAxisName= "String" : Primary y-Axis text title.
SYAxisName= "String" : Secondary y-Axis text title.
Since the combination chart has two y-axis, you can define the upper and lower limit for both of them. We use the
following attributes instead of the normal yAxisMinValue and yAxisMaxValue.
PYAxisMaxValue="value": This attribute determines the upper limit of primary y-axis.
PYAxisMinValue="value" : This attribute determines the lower limit of primary y-axis.
SYAxisMaxValue="value": This attribute determines the upper limit of secondary y-axis.
SYAxisMinValue="value" : This attribute determines the lower limit of secondary y-axis.
provided by you.
Generic Properties
showSecondaryLimits="1/0" : Option whether to show/hide the chart limit textboxes (secondary y-axis).
not.
Font Properties
provided here.
here.
$40000, $50000.
numberSuffix='%25'
116
a number.
in a number.
Line Properties
lineColor="Hex Code" : Color of the chart line.
this attribute.
pixels).
Anchor properties
Zero Plane

117
the plane.
showDivLineSecondaryValue="1/0" : Option to show/hide the secondary textual value of the divisional
line (i.e., text shown on the right side of the canvas for the secondary axis).
Chart Margins
chart.
chart
chart.


118
<category> element
element:
format).
<dataset> element
parentYAxis="P/S" : Each <dataset> element has an attribute parentYAxis in the combination chart.
This attribute can take a value of P or S, whereas P denoting primary axis and S denoting secondary axis. Like,
in our above example, we have the amount dataset set as primary axis:
numberPrefix='$'>
and the Quantity dataset set as secondary axis:
<dataset seriesname='Quantity' showValues='0' color='FF8000'
anchorBorderColor='FF8000' parentYAxis='S' lineThickness='4'>
You can have more than one primary or secondary datasets but atleast one of both is required.
prominent data.
<set value='1'>
<set value='2'>
</dataset>
Dataset specific number prefix and suffix
numberPrefix="$" : Using this attribute, you could add prefix to all the numbers for this dataset.
numberSuffix="p.a" : Using this attribute, you could add prefix to all the numbers for this dataset.
and so on.
119

1.20 Funnel Chart
<set> element
link="URL"

dataset level.
120
In this section, we'll be discussing all the elements and attributes supported by the funnel chart. A typical XML data
document for the funnel chart looks as under:
<chart showNames='1' showValues='1' numberPrefix='$' numberScaleValue='1000,1000'
numberScaleUnit='K,M' decimalPrecision='1' isSliced='1' slicingDistance='5'>
<set name='Buchanan' value='20000' color='0099FF' />
<set name='Callahan' value='49000' color='66CC66' />
<set name='Davolio' value='63000' color='CD6AC0' />
<set name='Dodsworth' value='41000' color='FF5904' />
<set name='Fuller' value='74000' color='0099CC' />
<set name='King' value='49000' color='FF0000' />
<set name='Leverling' value='77000' color='006F00' />
<set name='Peacock' value='54000' color='0099FF' />
<set name='Suyama' value='14000' color='FF66CC' />
</chart>

As you can see the XML of Funnel charts has two elements <chart> and <set>. Let's go through the attributes of
these two elements and see how we can use this attributes to create attractive charts:
<chart> element
bgColor='HexColorCode': This attribute sets the background color for the chart. You can set any hex color
code as the value of this attribute. Remember that you DO NOT need to assign a "#" at the beginning of the
hex color code. In fact, whenever you need to provide any hex color code in FusionCharts XML data document,
you do not have to assign the # at the beginning.
Default value: FFFFFF
bgAlpha='NumericalValue(0-100)': This attribute helps you set the alpha (transparency) of the graph.
Default value: 100
bgSWF='Path of SWF File': This attribute helps you load an external .swf file as a background for the
chart. For more information on this, please see Advanced Charting > Setting background for Charts.
General Properties
showValues='1/0': This parameter sets whether the data values would be displayed on the chart or not, on
the corresponding funnel segment.
Default value: 1, i.e. by default the data values are displayed.
showNames='1/0': This parameter sets whether the data names would be displayed on the chart or not.
Default value: 1, i.e. by default the data names are displayed.
animation='1/0': This parameter lets you define whether the chart would be animated or not.
Default value: 1
fillAlpha='value(0-100)': This attribute helps you specify the alpha (transparency) of the funnel chart
as a whole, i.e., all the funnel segments would be shown in the alpha mentioned in this attribute.
Default value: 100
isSliced='1/0': This attribute specifies whether the the various funnel segments would be sliced, i.e.,
separated from each other by a distance.
Default value: 1
slicingDistance='value': If you have set the isSliced attribute to 1 or have not defined it at all (so that it
takes the value 1 by default), then this attribute specifies the distance (in pixels) by which the various funnel
segments would be separated from each other by.
Default value: 10
funnelBaseWidth='value': This attribute sets the width of the tap, i.e., the bottom part of the funnel.
Default value: If you don't define this attribute, it would be auto-calculated to the most suitable value for the
chart.
121
funnelBaseHeight='value': This attribute sets the height of the tap of the funnel.
Default value: If you don't define this attribute, it would be auto-calculated to the best value for the chart.
numberPrefix='Character': Using this attribute, you could add prefix to all the numbers visible on the
graph. For example, to represent all dollars figure on the chart, you could specify this attribute to ' $' to show
the numbers as $40000, $50000.
numberSuffix='Character': Using this attribute, you could add prefix to all the numbers visible on the
graph. For example, to represent all figure quantified as per annum on the chart, you could specify this
attribute to ' /a' to show like 40000/a, 50000/a.

suppose you wish to have numberSuffix as % (as you would have in 30%), you'll need to specify it as
under:
numberSuffix='%25'
formatNumber='1/0': This configuration determines whether the numbers displayed on the chart will be
formatted using commas (or any other separator which you have specified), e.g., 40,000 if formatNumber='1'
and 40000 if formatNumber='0'
Default value: 1. i.e. the numbers gets formatted by default
formatNumberScale='1/0': Configuration whether to add K (thousands) and M (millions) to a number after
truncating and rounding it - e.g., if formatNumberScale is set to 1, 10434 would become 1.04K (with
decimalSeparator='Character': This option helps you specify the character to be used as the decimal
separator in a number.
Default value: "."
thousandSeparator='Character': This option helps you specify the character to be used as the thousands
separator in a number.
Font Properties
baseFont='FontName': This attribute sets the base font family for all the text in the chart i.e., all the values
and the labels in the chart will be displayed using the font name provided here.
Default value: Verdana
baseFontSize='FontSize': This attribute sets the base font size for all the text in the chart.
Default value: 9
baseFontColor='HexColorCode(without the '#' sign)': This attribute sets the base font color for all
the text in the chart.
Default value: 000000
The hover caption is the tool tip which shows up when the user moves his mouse over a funnel segment.
showhovercap='1/0': Option whether to show/hide hover caption box.
Default value: 1, i.e. the hover caption box is displayed by default.
hoverCapBgColor='HexColorCode': Background color of the hover caption box.
Default value: F1F1F1
hoverCapBorderColor='HexColorCode': Border color of the hover caption box.
Default value: 666666
hoverCapSepChar='Char': The character specified as the value of this attribute separates the name and
Default value: ,
Border Properties
showBorder='1/0': This attribute sets whether a border would be shown around the funnel segments or not.
Default value: 0
borderColor='Hex Color': This attribute sets the color of the border, which is displayed around the funnel
segments when showBorder is set as 1.
Default value: By default, the border color of each funnel segment is the same as their background color.
122
borderThickness='Numerical Value': This attribute sets the thickness, in pixels, of the border, which is
displayed around the funnel segments when showBorder is set as 1.
Default value: 1
borderAlpha='value(0-100)': This attribute sets the alpha of the border, which is displayed around the
color range when showBorder is set as 1.
Default value: 100
Chart Margins
Chart Margins refer to the empty spaces left on the top, bottom, left and right of the chart. That means, that much
amount of space would be left empty on the chart, before it starts plotting.
chartLeftMargin='Numerical Value (in pixels)': Space to be left unplotted on the left side of the
chart.
chartRightMargin='Numerical Value (in pixels)': Empty space to be left on the right side of the
chart
chartTopMargin='Numerical Value (in pixels)': Empty space to be left on the top of the chart.
chartBottomMargin='Numerical Value (in pixels)': Empty space to be left at the bottom of the
chart.
That is all for the <chart> element. We next see the possible attributes for the <set> element, which is used to
represent a data set to be plotted on the chart.

<set> element
A <set> element with all its attributes defined looks as under:
<set name='Jan' value='25' color='FFFF00' link='Sales.asp?month=1' borderColor='000000'
borderThickness='1' borderAlpha='100' alpha='100' hoverText='Units sold in Jan'>
where:
name is the name of the data set.
value is the value to be plotted on the chart for this particular data set.
color is the background color of the funnel segment for this data set.
link is the URL you can take the user to when he clicks on the funnel segment corresponding to this data set.
Example: <set link='details.aspx' ..>
Please note that you'll need to URL Encode all the special characters (like ? and &) present in the link. All the
server side scripting languages provide a generic function to URL Encode any string - like in ASP and ASP.NET,
we've Server.URLEncode(strURL) and so on.
To open a link in a new window, just put n- in front of the link e.g., link='n-
ShowDetails.asp%3FMonth=Jan'
borderColor is the border color of the funnel segment corresponding to this data set on the chart.
borderThickness is the thickness of the border of the funnel segment.
borderAlpha is the thickness of the border of the funnel segment.
alpha is the alpha (transparency) of the funnel segment.
hoverText is the text that you like to display to the user when he hovers his mouse over this funnel segment.
By default, the hover caption box displays the name and value of the corresponding data set but when you use
this attribute, the hover caption box would display the hover text and the value, thus replacing the name of
the data set.
And finally, we move onto Custom Objects.
123

1.21 Candlestick Chart
124

A general XML document for the candlestick chart looks as under:

<graph caption='3 Months - As on 04/02/04' yaXisMinValue='89' yaXisMaxValue='102'
canvasBorderColor='DAE1E8' canvasBgColor='FFFFFF' bgColor='EEF2FB' numDivLines='12'
divLineColor='DAE1E8' decimalPrecision='1' numberPrefix='$' showNames='1'
bearBorderColor='E33C3C' bearFillColor='E33C3C' bullBorderColor='1F3165'
baseFontColor='444C60' outCnvBaseFontColor='444C60' hoverCapBorderColor='DAE1E8'
hoverCapBgColor='FFFFFF' rotateNames='0' >
<categories font='Verdana' fontSize='10' fontColor='000000' verticalLineColor=''
verticalLineThickness='1' verticalLineAlpha='100'>
<category Name='2004' xIndex='1' showLine='1'/>
<category Name='Feb' xIndex='31' showLine='1'/>
<category Name='March' xIndex='59' showLine='1'/>
<category Name='Split' xIndex='44' showLine='1'/>
</categories>

<data>
<set open='92.57' high='93.79' low='92.45' close='93.39' xIndex='1' />
<set open='92.4' high='92.7' low='91.42' close='92.45' xIndex='2' />
<set open='92.6' high='92.69' low='90.88' close='91.82' xIndex='3'/>
<set open='92' high='93.38' low='91.68' close='93.3' xIndex='4'/>

</data>

<trendLines>
<line startValue='89.5' endValue='98' color='FF0000' displayvalue='Roll. Avg.'
thickness='2' alpha='100' isTrendZone='0'/>
</trendLines>
</graph>
As you can see in the above XML document, there are basically four sections of data:
1. <graph> section - This section helps you set the various visual attributes for the chart apart from a few other
125
numerical attributes.
2. <categories> section - This section of data lets you create the textual categories to be displayed on the
chart. It also helps you configure the category vertical lines and their formatting.
3. <data> section - This is the actual section where you define your financial data.
4. <trendLines> section - This section helps you set the trend lines on the chart.
Let's now see each of them in detail.
<graph>
Attributes of the <graph> element help you set the visual looks of the chart and a few functional parameters. Here
we'll group those attributes by their parent chart element and then look at it.
Graph Properties
bgColor="HexColorCode" : This attribute helps you set the background color of the chart.
Canvas Properties
canvas.
xAxisMinValue="value" : This attribute determines the lower limit of x-axis.
xAxisMaxValue="value": This attribute determines the upper limit of x-axis.
If you don't specify any of the above 4 values, it is automatically calculated by FusionCharts based on the data
provided by you.
overRideLimitCalc="1/0": When you provide data and the upper and lower limits to FusionCharts,
FusionCharts (while rendering) checks whether the upper and lower limits are correctly provided - that is it
checks whether all the data values fall within the specified range. Sometimes, this process takes a little extra
time when you have a large amount of data. If in that case you don't want FusionCharts to cross check the
limits explicitly provided by you, you can set this attribute value to 1 and then FusionCharts won't delve into
the process of checking thus saving that extra bit of time required.
Bars or Candles
showAsBars="1/0": Whether to show candles or bars on the chart.
bands.
126
bands.
General Properties
caption="String" : Caption of the chart
shownames="1/0" : Option whether to show/hide the category names.
not.
$40000, $50000.
suppose you wish to have numberSuffix as % (like 30%), you'll need to specify it as under:
numberSuffix='%25'
formatNumber="1/0" : This configuration determines whether the numbers displayed on the graph will be
a number.
in a number.
Font Properties
baseFont="FontName" : This attribute sets the base font family of the graph font which lies on the canvas
i.e., all the values and the names in the graph which lie on the canvas will be displayed using the font name
provided here.
127
baseFontSize="FontSize" : This attribute sets the base font size of the graph i.e., all the values and the
names in the graph which lie on the canvas will be displayed using the font size provided here.
baseFontColor="HexColorCode" : This attribute sets the base font color of the graph i.e., all the values
and the names in the graph which lie on the canvas will be displayed using the font color provided here.
outCnvBaseFont = "FontName" : This attribute sets the base font family of the graph font which lies
outside the canvas i.e., all the values and the names in the graph which lie outside the canvas will be
displayed using the font name provided here.
outCnvBaseFontSize="FontSize" : This attribute sets the base font size of the graph i.e., all the values
and the names in the graph which lie outside the canvas will be displayed using the font size provided here.
outCnvBaseFontColor="HexColorCode": This attribute sets the base font color of the graph i.e., all the
values and the names in the graph which lie outside the canvas will be displayed using the font color provided
here.
Candle Properties
candleWidth="NumericalValue" (Optional): If you explicitly wish to define the width of each candle in the
chart, you can use this attribute. However, this attribute is optional in the sense that FusionCharts would
automatically calculate the best fit value for the candle width.
bearBorderColor="HexColor": Border Color for a bear candle.
bearFillColor="HexColor": Fill Color for a bear candle.
bullBorderColor="HexColor": Border Color for a bull candle.
bullFillColor="HexColor": Fill Color for a bull candle.
<categories> attributes and elements
Attributes and child-elements of the <category> elements help you create the x-axis labels on the chart. They also help
you create the vertical category lines on the chart and configure their visual properties.
The <categories> element has the following attributes:
font='FontName' : This attribute helps you set the font face for the x-axis labels in specific.
fontSize='FontSize' : This attribute helps you set the font size for the x-axis labels in specific.
fontColor='HexColor' : This attribute helps you set the font color for the x-axis labels in specific.
verticalLineColor='HexColor' : This attribute helps you set the color of the category line (i.e., the
vertical line drawn through the entire span of the canvas just above the category name)
verticalLineThickness='NumericalValue' : This attribute helps you set the thickness of the category
line in pixels.
verticalLineAlpha='NumericalValue0-100' : This attribute helps you set the alpha (transparency) of
the category line
For each category name, you'll need to define a <category> element as under:
<category Name='Split' xIndex='44' showLine='1'/>
The <category> element can have the following attributes:
name='String': x-axis label to be displayed.
xIndex='NumericalValue': x-axis position where the category name is to be displayed. In the candlestick
chart, the x-axis is also numbered - i.e., it has an upper limit and a lower limit. For example, when you're
plotting a chart to show the data for a month, the lower limit of x-axis would be 1 and the upper limit 31. So,
when you need to render a category label for the 15th day of the month say "Mid-month", you'll have specify
xIndex as 15 for that <category>.
showLine='1/0' : Option to whether show or hide the line just above this particular category name.
<data> child elements
The actual data of the chart comes under the <data> element. For each data item, you've to specify a <set> element
as under:
<set open='92' high='93.38' low='91.68' close='93.3' xIndex='4' link='Detail.asp?day=32'/>
128

1.22 Gantt Chart
The <set> element can have the following attributes:
open="NumericalValue" : This attribute determines the open value for the data set. It is compulsory to
provide this value.
high="NumericalValue" : This attribute determines the high value for the data set. It is compulsory to
provide this value.
low ="NumericalValue" : This attribute determines the low value for the data set. It is compulsory to
provide this value.
close ="NumericalValue" : This attribute determines the close value for the data set. It is compulsory to
provide this value.
borderColor="HexColorCode" [Optional]: This attribute lets you change the border color of particular
candle on the chart. All the candles on the chart follow the color code as specified in bearBorderColor and
bullBorderColor attributes of the <graph> element. However, if in some case you want to highlight one
particular candle by changing it's color, you can use this option.
color="HexColorCode" [Optional]: Similar to the border color (previous attribute), this attribute lets you
set the fill color of a particular candle selectively.
xIndex="NumericalValue" [Optional]: x-axis position of the candle. In the candlestick chart, the x-axis is also
numbered - i.e., it has an upper limit and a lower limit. For example, when you're plotting a chart to show the
data for a month, the lower limit of x-axis would be 1 and the upper limit 31. So, when you're providing data
for 15th day, you need to mention xIndex as 15. However, if you do not provide x-index for any of the <set>
elements, FusionCharts will auto number them for you starting from 1.
link="link" [Optional]: Sets the link for a particular candle
<trendLines>
showOnTop='1/0': Whether the trend line/zone would be displayed over the candles or under the candles.

In the next section we'll see a few examples of XML document for the candlestick chart.
129
In this section, we'll be discussing all the elements and attributes supported by the Gantt chart. A typical XML data
document for the Gantt chart look as under:
<chart dateFormat='dd/mm/yyyy' showTaskNames='1' ganttWidthPercent='70'
gridBorderAlpha='100' canvasBorderColor='333333' canvasBorderThickness='0'
hoverCapBgColor='FFFFFF' hoverCapBorderColor='333333' extendcategoryBg='0'
ganttLineColor='99cc00' ganttLineAlpha='20' baseFontColor='333333'
gridBorderColor='99cc00'>

<categories bgColor='333333' fontColor='99cc00' isBold='1' fontSize='14' >
<category start='1/9/2004' end='31/12/2004' name='2004' />
</categories>

<categories bgColor='99cc00' bgAlpha='40' fontColor='333333' align='center'
fontSize='10' isBold='1'>
<category start='1/9/2004' end='30/9/2004' name='Sep' />
<category start='1/10/2004' end='31/10/2004' name='Oct' />
<category start='1/11/2004' end='30/11/2004' name='Nov' />
<category start='1/12/2004' end='31/12/2004' name='Dec' />
<category start='1/1/2005' end='31/1/2005' name='Jan' />
<category start='1/2/2005' end='28/2/2005' name='Feb' />
<category start='1/3/2005' end='31/3/2005' name='March' />
<category start='1/4/2005' end='30/4/2005' name='Apr' />
<category start='1/5/2005' end='31/5/2005' name='May' />
<category start='1/6/2005' end='30/6/2005' name='June' />
<category start='1/7/2005' end='31/7/2005' name='July' />
</categories>

<processes positionInGrid='right' align='center' headerText='Leader' fontColor='333333'
fontSize='11' isBold='1' isAnimated='1' bgColor='99cc00' headerbgColor='333333'
headerFontColor='99cc00' headerFontSize='16' bgAlpha='40'>
<process Name='Ashok' id='1' />
<process Name='Pallav' id='2' />
<process Name='Akhil' id='3' />
<process Name='Sanket' id='4' />
<process Name='Srishti' id='5' />
<process Name='Kisor' id='6' />
</processes>

<dataTable fontColor='333333' fontSize='11' isBold='1' headerFontColor='000000'
headerFontSize='11' >
<dataColumn headerbgColor='333333' width='150' headerfontSize='16'
headerAlign='left' headerfontcolor='99cc00' bgColor='99cc00' headerText=' Team'
align='left' bgAlpha='65'>
<text label=' MANAGEMENT' />
<text label=' PRODUCT MANAGER' />
<text label=' CORE DEVELOPMENT' />
<text label=' Q & A / DOC.' />
<text label=' WEB TEAM' />
</dataColumn>
</dataTable>

<tasks>
<task name='Survey' hoverText='Market Survey' processId='1' start='7/9/2004'
end='10/10/2004' id='Srvy' color='99cc00' alpha='60' topPadding='19' />
<task name='Concept' hoverText= 'Develop Concept for Product' processId='1'
130
start='25/10/2004' end='9/11/2004' id='Cpt1' color='99cc00' alpha='60' />
<task name='Concept' showName='0' hoverText= 'Develop Concept for Product'
processId='2' start='25/10/2004' end='9/11/2004' id='Cpt2' color='99cc00' alpha='60' />
<task name='Design' hoverText= 'Preliminary Design' processId='2'
start='12/11/2004' end='25/11/2004' id='Desn' color='99cc00' alpha='60'/>
<task name='Product Development' processId='2' start='6/12/2004' end='2/3/2005'
id='PD1' color='99cc00' alpha='60'/>
<task name='Product Development' processId='3' start='6/12/2004' end='2/3/2005'
id='PD2' color='99cc00' alpha='60' />
<task name='Doc Outline' hoverText='Documentation Outline' processId='2'
start='6/4/2005' end='1/5/2005' id='DocOut' color='99cc00' alpha='60'/>
<task name='Alpha' hoverText='Alpha Release' processId='4' start='15/3/2005'
end='2/4/2005' id='alpha' color='99cc00' alpha='60'/>
<task name='Beta' hoverText='Beta Release' processId='3' start='10/5/2005'
end='2/6/2005' id='Beta' color='99cc00' alpha='60'/>
<task name='Doc.' hoverText='Documentation' processId='4' start='12/5/2005'
end='29/5/2005' id='Doc' color='99cc00' alpha='60'/>
<task name='Website Design' hoverText='Website Design' processId='5'
start='18/5/2005' end='22/6/2005' id='Web' color='99cc00' alpha='60'/>
<task name='Release' hoverText='Product Release' processId='6' start='5/7/2005'
end='29/7/2005' id='Rls' color='99cc00' alpha='60'/>
<task name='Dvlp' hoverText='Development on Beta Feedback' processId='3'
start='10/6/2005' end='1/7/2005' id='Dvlp' color='99cc00' alpha='60'/>
<task name='QA' hoverText='QA Testing' processId='4' start='9/4/2005'
end='22/4/2005' id='QA1' color='99cc00' alpha='60'/>
<task name='QA2' hoverText='QA Testing-Phase 2' processId='4' start='25/6/2005'
end='5/7/2005' id='QA2' color='99cc00' alpha='60'/>
</tasks>

<connectors>
<connector fromTaskId='Cpt1' toTaskId='Cpt2' color='99cc00' thickness='2'
fromTaskConnectStart='1'/>
<connector fromTaskId='PD1' toTaskId='PD2' color='99cc00' thickness='2'
<connector fromTaskId='PD1' toTaskId='alpha' color='99cc00' thickness='2' />
<connector fromTaskId='DocOut' toTaskId='Doc' color='99cc00' thickness='2' />
<connector fromTaskId='QA1' toTaskId='beta' color='99cc00' thickness='2' />
<connector fromTaskId='Dvlp' toTaskId='QA2' color='99cc00' thickness='2' />
<connector fromTaskId='QA2' toTaskId='Rls' color='99cc00' thickness='2' />
</connectors>

<milestones>
<milestone date='29/7/2005' taskId='Rls' radius='10' color='333333' shape='Star'
numSides='5' borderThickness='1'/>
<milestone date='2/3/2005' taskId='PD1' radius='10' color='333333' shape='Star'
numSides='5' borderThickness='1' />
</milestones>

</chart>
This XML leads to a chart as under:
131

Like all other FusionCharts chart, the Gantt charts' XML document too has <chart> as it's document element. By
specifying attributes of this element, you can set the cosmetic and functional properties of the chart.
Let's first see the attributes supported by the <chart> element:
<chart> element
bgColor='HexColorCode': This attribute sets the background color for the chart. You can set any hex color
code as the value of this attribute. Remember that you DO NOT need to assign a "#" at the beginning of the
hex color code. In fact, whenever you need to provide any hex color code in FusionCharts XML data document,
you do not have to assign the # at the beginning.
Default value: FFFFFF
bgAlpha='NumericalValue(0-100)': This attribute helps you set the alpha (transparency) of the graph.
Default value: 100
bgSWF='Path of SWF File': This attribute helps you load an external .swf file as a background for the
chart. For more information on this, please see Advanced Charting > Setting background SWFs.
Canvas Properties
canvasBgColor='HexColorCode': This attribute helps you set the background color of the canvas.
canvasBgAlpha='NumericalValue(0-100)': This attribute helps you set the alpha (transparency) of the
canvas.
canvasBorderColor='HexColorCode': This attribute helps you set the border color of the canvas.
canvasBorderThickness='NumericalValue(0-100)': This attribute helps you set the border thickness
General Properties
dateFormat='mm/dd/yyyy or dd/mm/yyyy or yyyy/mm/dd': This is the most important attribute, which
you'll need to specify for all the Gantt charts that you build. With the help of this attribute, you're basically
specifying the format in which you'll be providing your dates to FusionCharts in XML format.
animation='1/0': This attribute sets whether the Gantt task bars need to be animated or not.
showTaskStartDate='1/0': This attribute sets whether the start date of each task will be shown on the left
of the task bar.
132
showTaskEndDate='1/0': This attribute sets whether the end date of each task will be shown on the right of
the task bar.
showTaskNames='1/0': This attribute sets whether the name of each task will be shown over the task bar.
taskDatePadding='1/0': If you opt to show the task start or end date, this attribute helps you configure
the distance between the date textbox and the task bar.
extendCategoryBg='1/0': This attribute lets you set whether the background for the last sub-category
(date range on the top of chart) will extend till the bottom of the chart.
Gantt General Properties
ganttWidthPercent='Number between 0-100': The Gantt chart consists of two parts - the Gantt chart
and the data table (including process names). This attribute lets you set the width of the gantt part, in
percentage, with respect to the whole chart.
ganttLineColor='Hex Color': Using this attribute, you can set the color of the lines running through the
Gantt chart as background.
ganttLineThickness='Numerical Value': Using this attribute, you can set the thickness of the lines
running through the Gantt chart as background.
ganttLineAlpha='Numerical Value 0-100': Using this attribute, you can set the alpha (transparency) of
the lines running through the Gantt chart as background.
Data Table Properties
gridBorderColor='Hex Color': This attribute sets the color of the border of data table (which shows the
process names and additional information).
gridBorderAlpha='Numerical Value 0-100': This attribute sets the alpha of the border of data table
(which shows the process names and additional information).
gridResizeBarColor='Hex Color': If you show two columns of information in the data table, you'll find
that the data table is draggable i.e., you can resize each of the columns using a resize bar. This attribute helps
you set the color of that resize bar.
gridResizeBarThickness='Numeric Value': This attribute helps you set the thickness of the resize bar.
gridResizeBarAlpha='Numeric Value 0-100': This attribute helps you set the alpha of the resize bar.
Font Properties
baseFont='FontName': This attribute sets the base font family of the chart font which lies on the canvas
provided here.
baseFontSize='FontSize': This attribute sets the base font size of the chart i.e., all the values and the
baseFontColor='HexColorCode': This attribute sets the base font color of the chart i.e., all the values and
the names in the chart which lie on the canvas will be displayed using the font color provided here.
showhovercap='1/0': Option whether to show/hide hover caption box.
hoverCapBgColor='HexColorCode': Background color of the hover caption box.
hoverCapBorderColor='HexColorCode': Border color of the hover caption box.
hoverCapSepChar='Char': The character specified as the value of this attribute separates the name and
Now that we're done with <chart> element, let's shift to <categories> element.

133
Each <categories> element helps you define a date range on the top of the chart. Like, in our above chart, we had
two rows of date range - the first row showed the years 2004 and 2005, and the second row showed the month wise
breakdown of each year.
It is compulsory to have atleast one <categories> element on the chart, as that defines the starting and ending date
of the chart. The value which you put as startDate and endDate under the first <categories> element is deemed to
be the date span of the chart. The <categories> element can have the following attributes:
bgColor='Hex Color': Defines the background color for the same.
bgAlpha='Numeric Value 0-100': Define the background transparency level for the same.
font='Font Face': Defines the font face in which text will be rendered.
fontSize='Numeric Value': Defines the font size in which text will be rendered.
fontColor='Hex Color': Defines the color in which text will be rendered.
isBold='1/0': Sets whether the text will be shown as bold or not.
isUnderLine='1/0': Sets whether the text will be shown as underline.
verticalPadding='Numeric Value': Specifies the top margin.
align='left/center/right': Specifies the horizontal alignment of text.
vAlign='left/center/right': Specifies the vertical alignment of text.
Basically, you specify the attributes of <categories> element, so that all the <category> element within that
particular <categories> element can acquire these values, if not individually specified for each of them. For example,
you can set the font properties for an entire date range (vertical row of date). Then, you would not have to define the
font property for each part of date (like for each month). It will automatically take the values assigned for that
<categories>.
Let's now see the actual elements which help us set the date ranges - <category> element.

<category> element
The <category> element appear as children of <categories> element as under:
<categories bgColor='333333' fontColor='99cc00' isBold='1' fontSize='14' >
</categories>
In the above example, considering it as the first <categories> element of the chart, we've defined the chart's date
range from 1/9/2004 to 31/7/2005 (dates in dd/mm/yyyy format). To do so, we've used two <category> elements
and specified their individual date range and the name to be displayed on the top of the chart.
Similarly, if we wanted to show more detailed break-up of dates, we would introduce a new <categories> element
with it's children as under:
<categories bgColor='99cc00' bgAlpha='40' fontColor='333333' align='center' fontSize='10'
isBold='1'>
<category start='1/9/2004' end='30/9/2004' name='Sep' />
<category start='1/10/2004' end='31/10/2004' name='Oct' />
<category start='1/11/2004' end='30/11/2004' name='Nov' />
<category start='1/12/2004' end='31/12/2004' name='Dec' />
<category start='1/1/2005' end='31/1/2005' name='Jan' />
134
<category start='1/2/2005' end='28/2/2005' name='Feb' />
<category start='1/3/2005' end='31/3/2005' name='March' />
<category start='1/4/2005' end='30/4/2005' name='Apr' />
<category start='1/5/2005' end='31/5/2005' name='May' />
<category start='1/6/2005' end='30/6/2005' name='June' />
<category start='1/7/2005' end='31/7/2005' name='July' />
</categories>
As you can see in the code above, we're breaking down the dates into smaller values for display on the chart.
Let's quickly skim through the attributes of the <category> element:
start='Date': Specifies the start date of that date range.
end='Date': Specified the end date of the date range.
name='String Name': Specifies the name of the date range, that actually appears on the chart.
link='URL Encoded link': If you want the date range name on the chart to behave as a hyperlink, you
can specify the URL Encoded link here.
Let's now move to <processes> element, which help us define the processes on the chart.

<processes> element
The <processes> element and its children help us define the list of processes on the chart. Each Gantt chart depicts a
list of processes - you can specify all of them and configure their visual properties using this element and its attributes.
The following attributes are supported by the <processes> element:
headerText='String': This attribute helps you set the caption for the processes, that would appear in the
1st row of data table. For instance, in our chart, we've the header of processes set as "Leader".
headerFont='Font': Defines the font for the header.
headerFontSize='Size': Defines the font size for the header.
headerFontColor='Color': Defines the font color for the header.
headerIsBold='1/0': Sets whether the header is bold or not.
135
headerIsUnderline='1/0': Sets whether the header will appear with an underline.
headerAlign='left/center/right': Sets the horizontal align position of the header.
headerVAlign='left/center/right': Sets the vertical align position of the header.
headerBgColor='Color': Sets the background color of header cell.
headerBgAlpha='Numeric Value': Sets the background alpha of header cell.
width='Number': This is an optional value, using which you can set the exact width (in pixels) of the
processes column in the data table.
positionInGrid='Left/Right': This option lets you set whether the process column will appear as the
right most column of the data table or left most.
Like <categories>, the motive behind specifying attributes for <processes> element is to convey these properties to
all the <process> element contained within this element.

<process> element
The <process> element can have the following attributes:
name='Display Name': This attribute sets the name of the process, which will be displayed on the chart.
id='Alphanumeric Id': Each process needs to have an ID specified by you. Based on this id, the tasks
related to this process will be plotted against it.
link='URL Encoded link': If you wish to hyperlink each process name on the chart, you can use this
attribute to specify the link for each process name.
With this much in place, let's now see how we can specify more information alongside the process names, in the form
of a data table.

Data Table
Each Gantt chart can have one data table, which can show tabular information along side the process names. The table
will have as many rows as the number of processes that you've specified in the XML. The number of columns of this
table can be defined by you.
To create a data table, you use the <dataTable> element as under:
This element can have the following attributes:
136
To define a column inside this data table, we use the <datacolumn> element as under:
<dataColumn headerbgColor='333333' width='150' headerfontSize='16' headerAlign='left'
headerfontcolor='99cc00' bgColor='99cc00' headerText=' Team' align='left' bgAlpha='65'>
The <dataColumn> element can have the following attributes:
width='Numerical Value': This is an optional attribute which lets you specify the width for a particular
data column, in pixels. However, if you don't specify this, FusionCharts will automatically set it to the best
value.
headerText='Label': This attribute sets the display label of the header for that column.
headerLink='URL Encoded Link': If you need to specify a link for the header, you can use this attribute
to specify.
Now, inside each data column, to represent a row of text, you use the <text> element as under:
137
<dataColumn headerbgColor='333333' width='150' headerfontSize='16'
headerAlign='left' >
<text label=' PRODUCT MANAGER' />
<text label=' CORE DEVELOPMENT' />
<text label=' Q & A / DOC.' />
<text label=' WEB TEAM' />
</dataColumn>
</dataTable>
The <text> element can have the following attributes:
label='URL Encoded String label': This attribute sets the value that would be displayed in the chart, as
the contents of that specific cell.
link='URL Encoded link': If you need to hyperlink the content of the cell, you can use this attribute to
specify the link.
Now that we're done with data table too, we next move on to specify the main portion of the data - the data related to
task bars.

<tasks> element
The <tasks> element is used to group all the tasks that are to be depicted on the chart. This element can have the
following attributes:
color='Hex Color': This attribute helps you define the background color for the task bar. If you need to
show a gradiented background, just specify the list of colors here using a comma.
alpha='Numeric Value': This attribute helps you specify the transparency of the task bar.
showBorder='1/0': This attribute lets you specify whether a border would appear around the task bar.
borderColor='Hex Color': Color of the task bar border.
borderThickness='Numeric Value': Thickness of the task bar border.
showTaskNames='1/0': Configuration whether to show the names of the tasks over the task bars.
showTaskStartDate='1/0': Configuration whether to show the start dates of the tasks on the left of task
bars.
showTaskEndDate='1/0': Configuration whether to show the end dates of the tasks on the right side of the
task bars.
Now, to define each individual task, you need to create a <task> element for each task, as under:
138
<tasks>
<task name='Survey' hoverText='Market Survey' processId='1' start='7/9/2004'
end='10/10/2004' id='Srvy' color='99cc00' alpha='60' topPadding='19' />
<task name='Concept' hoverText= 'Develop Concept for Product' processId='1'
start='25/10/2004' end='9/11/2004' id='Cpt1' color='99cc00' alpha='60' />
.... More tasks ....
</tasks>
The <task> element can have the following attributes:
start='Date': This attribute sets the start date for this particular task. This attribute is compulsory.
end='Date': This attribute sets the end date for this particular task. This attribute is compulsory.
processId='Process Id': Each task needs to belong a process, as we had earlier indicated. For this
attribute, you need to specify the process id, against which you want to plot this task. Process id was earlier
assigned by you in the <process> element. You need to duplicate that same id here.
Id='Alphanumeric Value': Each task needs to have a id, so that it can be easily referenced back in XML.
You can set the id of the task using this attribute.
name='String Name': This attributes sets the name of the task, which will be displayed on the chart.
hoverText='hover caption text': If you want to display more information as the tool tip of this task bar,
you can specify that hover text here.
link='URL Encoded link': If you intend to provide a hyper link for the task bar, you can set the link in
this attribute.
animation='1/0': This attribute lets you set whether this particular task bar would animate or not.
color='Hex Color': This attribute helps you define the background color for the task bar. If you need to
show a gradiented background, just specify the list of colors here using a comma.
alpha='Numeric Value': This attribute helps you specify the transparency of the task bar.
showBorder='1/0': This attribute lets you specify whether a border would appear around the task bar.
borderColor='Hex Color': Color of the task bar border.
borderThickness='Numeric Value': Thickness of the task bar border.
borderAlpha='Numeric Value 0-100': Alpha of the task bar border.
showName='1/0': Configuration whether to show the name of this tasks over the task bar.
showStartDate='1/0': Configuration whether to show the start date of this task on the left of task bar.
showEndDate='1/0': Configuration whether to show the end date of this task on the right side of the task
bar.
height='Numeric Value': If you intend to specify an explicit height for the task bar, you can do so using
this attribute. Otherwise, FusionCharts automatically calculates the best possible value.
topPadding='Numeric Value': If you intend to specify an explicit top padding for the task bar, you can do
so using this attribute. Otherwise, FusionCharts automatically calculates the best possible value.
taskDatePadding='Numeric Value': If you intend to specify an explicit distance between task bar and
date textbox, you can do so using this attribute. Otherwise, FusionCharts automatically calculates the best
possible value.
And this should be enough to plot all your task bars on the chart. We'll next see how to render milestones on the Gantt
chart.

Milestones
To render milestones on the chart, you use the <mileStones> and <mileStone> element as under:
<milestones>
<milestone date='29/7/2005' taskId='Rls' radius='10' color='333333' shape='Star'
139
numSides='5' borderThickness='1' />
</milestones>
The <mileStone> element can have the following attributes:
date='Date': Date where you want the milestone to be placed.
taskId='Task Id': The id of the task over whose bar you want the milestone to be placed.
shape = 'star/polygon': Shape of the milestone.
numSides='Numeric Value 3-x': Number of sides that the milestone would have. For example, for a
diamond, you can set shape to star and then set this value to 4.
startAngle='Angle': Starting angle of the polygon/star drawn as milestone.
radius='Numeric value': Radius of the polygon/star drawn as milestone.
borderColor='Hex Color': Border color of the milestone.
borderThickness='Numeric Value': Border thickness of the milestone.
color='Hex Color': Background fill color of the milestone.
alpha='Numeric Value 0-100': Transparency level of the milestone.
Let's now look at the trendlines option that the Gantt chart offers.

Trend lines
To draw a trend line/zone on the chart, you use the <trendLines> and <line> element as under:
<trendlines>
<line start='28/6/2005' displayValue='Today' color='666666' isTrendZone='1' alpha='20' />
<line start='13/6/2005' end='23/6/2005' displayValue='Under Monitor' color='FF5904'
alpha='5' isTrendZone='1' />
</trendlines>
The <lines> element can have the following attributes:
start='Date': Start date for the trend zone.
end='Date': End date for the trend zone. If you intend to draw a trend line instead of a trend zone, then you
do not need to specify a value for this attribute.
displayValue='String Value': If you want to display your custom value beneath the trend line, you can
do so here. Example, you can show the trend line and label it as "Today".
color='Hex Color': Color of the trend line.
thickness='Numeric Value': Thickness (in pixels) of the trend line.
alpha='Numeric Value 0-100': Transparency level of the trend line/zone.
isTrendZone='1/0': Option to set whether it will appear as a trend zone or a trend line.
And with this, we move over to the last item supported by the Gantt Chart - connectors.

Task Connectors
Task connectors are used to connect various task bars on the chart, to indicate the flow of process. Like, using task
140

connectors, we can show the dependency of one task over another, or the general flow of the entire set of tasks.
To create connectors on the chart, we use the <connectors> and <connector> element as under:
<connectors>
<connector fromTaskId='Cpt1' toTaskId='Cpt2' color='99cc00' thickness='2'
<connector fromTaskId='PD1' toTaskId='PD2' color='99cc00' thickness='2'
<connector fromTaskId='DocOut' toTaskId='Doc' color='99cc00' thickness='2' />
<connector fromTaskId='QA1' toTaskId='beta' color='99cc00' thickness='2' />
<connector fromTaskId='Dvlp' toTaskId='QA2' color='99cc00' thickness='2' />
<connector fromTaskId='QA2' toTaskId='Rls' color='99cc00' thickness='2' />
</connectors>
The <connectors> element can have the following attributes (which applies to all connectors, unless otherwise
specified for each connector individually):
Color='Hex Code': Color of the connector
Thickness='Numeric Value': Thickness of the connector line in pixels.
Alpha='Numeric Value 0-100': Tranparency of the connector line.
isDashed='1/0': Configuration whether the connector line will appear as dashed/solid line.
And for each connector, you can specify the following attributes:
fromTaskId='Task Id': Id of the task (which you had earlier specified as an attribute of <task> element)
from where the connector will originate.
toTaskId='Task Id': Id of the task (which you had earlier specified as an attribute of <task> element)
from where the connector will terminate.
fromTaskConnectStart='1/0': Configuration whether the connector will join the originating task bar at the
start position or end position.
toTaskConnectStart='1/0': Configuration whether the connector will join the terminating task bar at the
start position or end position.
Color='Hex Code': Color of the connector.
Thickness='Numeric Value': Thickness of the connector line in pixels.
Alpha='Numeric Value 0-100': Tranparency of the connector line.
isDashed='1/0': Configuration whether the connector line will appear as dashed/solid line.

Fusion Charts Free

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fusion Charts Free

Uploaded by

Copyright:

Available Formats

FusionCharts Free - Chart XML

You might also like