Fusion Charts Free

7/27/2019 Fusion Charts Free

1/141

FusionCharts Free - Chart XML

Reference


2/141

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


3/141


2

1. FusionCharts Free - Chart XML APIFusionCharts 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


4/141


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


5/141


4

A 2D Column chart looks as under:

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

Attributes

The 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 hexcolor 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 datadocument, 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 seta background image (.swf) for the chart.


6/141


5

bgSWF="Path of SWF File" : This attribute helps you load an external .swf file as a background for thechart.

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

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 dataprovided by you.

Generic Properties

shownames="1/0": This attribute can have either of the two possible values: 1,0. It sets the configurationwhether the x-axis values (for the data sets) will be displayed or not. By default, this attribute assumes thevalue 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. Bydefault, 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 ornot.

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 nameprovided here.

baseFontSize="FontSize": This attribute sets the base font size of the chart i.e., all the values and thenames 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 valuesand 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 usingthe font name provided here.

outCnvBaseFontSze="FontSize" : This attribute sets the base font size of the chart i.e., all the values andthe 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


7/141


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 numberPrefixor numberSuffix, you'll need to URL Encode them. That

is, suppose you wish to have numberSuffixas %(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 numberafter truncating and rounding it - e.g., if formatNumberScale is set to 1, 10434 would become 1.04K (withdecimalPrecision 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 ina 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) valueson the chart would be rounded to.

limitsDecimalPrecision="2" :Number of decimal places to which upper and lower limit values on thechart 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 gridbands.

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.


8/141


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

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 andvalue 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, FusionChartswould 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 thechart

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

element

We now move on to the element which is a child element of the element and determines a set of data

which would appear on the graph.

A element looks as under:

Now let's study the the possible attributes of the element:

name="string"

Example: This attribute determines the name by which the set of data would be represented in the chart. In the aboveexample, the value of this attribute is "Jan" and therefore, this set of data would be represented on the chartwith the name "Jan".

value="NumericalValue" Example:

This attribute determines the numerical value for the set of data according to which the chart would be builtfor the concerned set of data.

color="HexCode"Example:

This attribute determines the color for the concerned set of data in which it would appear in the graph.

hoverText="String value"Example:

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


9/141


8

1.2 Pie 2D Chart

link="URL"Example:

This attribute defines the hotspots in your graph. The hotspots are links over the data sets. Please note thatyou'll need to URL Encode all the special characters (like ? and &) present in the link.All the server sidescripting languages provide a generic function to URL Encode any string - like in ASP and ASP.NET, we'veServer.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:

This attribute determines the transparency of a data set. The range for this attribute is 0 to 100. 0 meanscomplete 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 :

This attribute can either the value of 0 or 1. A value of 1 indicates that the name of this data set will bedisplayed in the graph whereas 0 indicates it won't be displayed. This attribute is particular useful when youwant to show/hide names of alternate data items or say every x (th) data item.

At the end of the element, you would find a "/" which signals that it has no more child element

Using the 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 element as under:

The element can have the following attributes:

startValue='NumericalValue' : The starting y-axis value for the trendline. Say, if you want to plot aslanted 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 wouldautomatically 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, youcan 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:


10/141


9


Attributes



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 ofthe hex color code. In fact, whenever you need to provide any hex color code in FusionCharts XML datadocument, 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 seta background image (.swf) for the chart.



caption="String" : This attribute determines the caption of the chart that would appear at the top of thechart.


Generic Properties

shownames="1/0": This attribute can have either of the two possible values: 1,0. It sets the configurationwhether the data names will be displayed or not alongside the pie.


11/141


10

showValues="1/0": This attribute can have either of the two possible values: 1,0. It sets the configurationwhether 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 controlwhether to show percentage values or actual values in the pie labels.

animation="1/0": This attribute sets whether the animation is to be played or whether the entire chartwould be rendered at one go.

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 canspecify 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 boxesfrom 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 forthis 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 theactual 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 theactual 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



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.


numberPrefix="$" : Using this attribute, you could add prefix to all the numbers visible on the graph. Forexample, 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. Forexample, 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 numberPrefixor numberSuffix, you'll need to URL Encode them. That


numberSuffix='%25'



12/141


11



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 separatorin a number.








hoverCapSepChar="Char": The character specified as the value of this attribute separates the name and

value displayed in the hover caption box.

element





name="string"Example:

This attribute determines the name by which the set of data would be represented in the chart. In the aboveexample, the value of this attribute is "Jan" and therefore, this set of data would be represented on the chartwith the name "Jan".

value="NumericalValue" Example: This attribute determines the numerical value for the set of data according to which the chart would be builtfor the concerned set of data.



hoverText="String value"

Example: Sometimes, you might just want to show the abbreviated names on the x-axis (to avoid cluttering or to makethe chart look more legible). However, you still have the option of showing the full name as tool tip using thisattribute. 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.

alpha="Numerical Value 0-100"Example: This attribute determines the transparency of a data set. The range for this attribute is 0 to 100. 0 meanscomplete transparency (the data set wont be shown on the graph) and 100 means opaque. This option isuseful when you want to highlight a particular set of data.

link="URL"Example:

This attribute defines the hotspots in your graph. The hotspots are links over the data sets. Please note thatyou'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'veServer.URLEncode(strURL) and so on.


13/141


12

1.3 Bar 2D Chart

To open a link in a new window, just put n-in front of the link e.g., link="n-

ShowDetails.asp%3FMonth=Jan" .

isSliced="1"Example : This attribute determines whether the pie appears as a part of the total circle or is sliced out as an individualitem (highlited).



14/141


13

A 2D bar chart looks as under:


Attributes



bgColor="HexColorCode" : This attribute sets the background color for the chart. You can set any hexcolor code as the value of this attribute. Remember that you DO NOT need to assign a "#" at the beginning ofthe hex color code. In fact, whenever you need to provide any hex color code in FusionCharts XML datadocument, 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


15/141


14

a background image (.swf) for the chart.


Canvas Properties






caption="String" : This attribute determines the caption of the chart that would appear at the top 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)





Generic Properties


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. Bydefault, this attribute assumes the value 1, which means that the values will be displayed.




showBarShadow="1/0": Whether the 2D shadow for the bars would be shown or not.

Font Properties








outCnvBaseFontColor="HexColorCode": This attribute sets the base font color of the chart i.e., all thevalues and the names in the chart which lie outside the canvas will be displayed using the font color provided


16/141


15

here.







numberSuffix='%25'






in a number.




Zero Plane











divLineThickness="NumericalValue" : Thickness (in pixels) of the grid divisional line. divLineAlpha="NumericalValue0-100" : Alpha (transparency) of the grid divisional line.




alternateVGridAlpha="NumericalValue0-100" : Alpha (transparency) of the alternate vertical grid

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.


17/141


16











Chart Margins

Chart Margins refers to the empty space left on the top, bottom, left and right of the chart. That means, FusionChartswould 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 thechart.

chartRightMargin="Numerical Value (in pixels)" :Empty space to be left on the right side of the

chart



element





name="string"


value="NumericalValue"

Example: This attribute determines the numerical value for the set of data according to which the chart would be builtfor the concerned set of data.

color="HexCode"

Example: This attribute determines the color for the concerned set of data in which it would appear in the graph.

hoverText="String value"Example: 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 thisattribute. 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.


18/141


17

1.4 Line 2D Chart

link="URL"Example:














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 wouldautomatically assume the same value as startValue.


displayValue='StringValue' : If you want to display a string caption for the trend line by its side, youcan use this attribute. Example: displayValue='Last Month High'. When you don't supply this attribute,

it automatically takes the value of startValue.





A 2D Line chart looks as under:


19/141


18


Attributes




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 seta background image (.swf) for the chart.


Canvas Properties


20/141


19


canvasBgAlpha="NumericalValue(0-100)" : This attribute helps you set the alpha (transparency) of the

canvas.










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 dataprovided 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 thevalue 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 configurationwhether the data numerical values will be displayed along with the columns, bars, lines and the pies. Bydefault, this attribute assumes the value 1, which means that the values will be displayed.




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 forthis 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 chartline. 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 chartline. That is, if you want to show the shadow 3 pixel below the actual line, set this attribute to 3. Similarly, ifyou want the shadow to appear above the actual line, set it to -3.


21/141


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 anchorsare 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 theradius, 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 (includingthe 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

baseFont="FontName": This attribute sets the base font family of the chart font which lies on the canvasi.e., all the values and the names in the chart which lie on the canvas will be displayed using the font nameprovided here.






outCnvBaseFontColor="HexColorCode": This attribute sets the base font color of the chart i.e., all thevalues and the names in the chart which lie outside the canvas will be displayed using the font color providedhere.



numberSuffix="p.a": Using this attribute, you could add prefix to all the numbers visible on the graph. Forexample, 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 numberPrefixor numberSuffix, you'll need to URL Encode them. That


numberSuffix='%25'

formatNumber="1/0": This configuration determines whether the numbers displayed on the chart will beformatted using commas, e.g., 40,000 if formatNumber='1' and 40000 if formatNumber='0 '







22/141


21


Zero Plane











divLineThickness="NumericalValue" : Thickness (in pixels) of the grid divisional line.

divLineAlpha="NumericalValue0-100" : Alpha (transparency) of the grid divisional line.






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.



alternateVGridAlpha="NumericalValue0-100" : Alpha (transparency) of the alternate vertical gridbands.








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


23/141


22




element





name="string"






Sometimes, you might just want to show the abbreviated names on the x-axis (to avoid cluttering or to makethe chart look more legible). However, you still have the option of showing the full name as tool tip using thisattribute. 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.




link="URL"Example:







24/141


23

1.5 Column 3D Chart






endValue='NumericalValue': The ending y-axis value for the trendline. Say, if you want to plot a slantedtrendline from value 102 to 109, the endValue would 109. If you do not specify a value for endValue, it wouldautomatically assume the same value as startValue.


displayValue='StringValue' : If you want to display a string caption for the trend line by its side, youcan use this attribute. Example: displayValue='Last Month High'. When you don't supply this attribute,it automatically takes the value of startValue.






25/141


24

A 3D Column chart looks as under:


Attributes





bgSWF="Path of SWF File" : This attribute helps you load an external .swf file as a background for the

chart.


26/141


25

Canvas Properties

canvasBgColor="HexColorCode" : This attribute helps you set the background color of the canvas. Thebackground 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 canvasbase.

canvasBaseDepth="Numerical Value" : This attribute helps you set the height (3D Depth) of the canvasbase.

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.










Generic Properties






Font Properties


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.


outCnvBaseFont = "FontName": This attribute sets the base font family of the chart font which lies outsidethe canvas i.e., all the values and the names in the chart which lie outside the canvas will be displayed usingthe 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 thevalues and the names in the chart which lie outside the canvas will be displayed using the font color provided


27/141


26

here.

Number Formatting Option






numberSuffix='%25'






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 forthe plane.






numdivlines="NumericalValue": This attribute sets the number of divisional lines to be drawn.


divLineThickness="NumericalValue" : Thickness (in pixels) of the grid divisional line.

divLineAlpha="NumericalValue0-100" : Alpha (transparency) of the grid divisional line.






hoverCapBgColor="HexColorCode" : Background color of the hover caption box. hoverCapBorderColor="HexColorCode" : Border color of the hover caption box.


28/141


27


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.




elementWe now move on to the element which is a child element of the element and determines a set of data




name="string"

Example:






Sometimes, you might just want to show the abbreviated names on the x-axis (to avoid cluttering or to makethe 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.

link="URL"Example:






showName="1"


29/141


28

1.6 Pie 3D Chart

Example :








endValue='NumericalValue': The ending y-axis value for the trendline. Say, if you want to plot a slantedtrendline from value 102 to 109, the endValue would 109. If you do not specify a value for endValue, it wouldautomatically assume the same value as startValue.


displayValue='StringValue' : If you want to display a string caption for the trend line by its side, youcan use this attribute. Example: displayValue='Last Month High'. When you don't supply this attribute,it automatically takes the value of startValue.






30/141


29

A 3D Pie chart looks as under:


Attributes









Generic Properties

shownames="1/0": This attribute can have either of the two possible values: 1,0. It sets the configurationwhether the data names will be displayed or not alongside the pie.

showValues="1/0": This attribute can have either of the two possible values: 1,0. It sets the configurationwhether 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


31/141


30

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.

pieSliceDepth="Numeric Value" : This attribute helps you set the 3D height (depth) of the pies on thechart (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






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 numberPrefixor numberSuffix, you'll need to URL Encode them. Thatis, suppose you wish to have numberSuffixas %(like 30%), you'll need to specify it as under:

numberSuffix='%25'



decimalSeparator=".": This option helps you specify the character to be used as the decimal separator in

a number.










element



32/141


31

1.7 Area 2D Chart




name="string"Example:






Sometimes, you might just want to show the abbreviated names on the x-axis (to avoid cluttering or to makethe chart look more legible). However, you still have the option of showing the full name as tool tip using thisattribute. 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.

link="URL"Example:


To open a link in a new window, just put n-in front of the link e.g., link="n-

ShowDetails.asp%3FMonth=Jan" .


A 2D Area chart looks as under:


33/141


32


Attributes






Canvas Properties


34/141


33












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 dataprovided by you.

Generic Properties






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 thethickness (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 forthis attribute.

areaAlpha="0-100" : Transparency of the area fill.

Font Properties



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 outsidethe canvas i.e., all the values and the names in the chart which lie outside the canvas will be displayed usingthe font name provided here.


35/141


34


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



numberSuffix="p.a": Using this attribute, you could add prefix to all the numbers visible on the graph. Forexample, 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 numberPrefixor numberSuffix, you'll need to URL Encode them. That


numberSuffix='%25'


formatNumberScale="1/0" :Configuration whether to add K (thousands) and M (millions) to a numberafter 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.




divLineDecimalPrecision="2": Number of decimal places to which all divisional line (horizontal) values

on the chart would be rounded to.


Zero Plane

The zero plane is a simpl

Documents

Fusion Charts Free