Fusion Charts

FusionCharts - Chart XML API

1
Table of Contents
1. FusionCharts - Chart XML API ............................................................................................................................. 3
1.1 Column 2D Chart .......................................................................................................................................... 7
1.2 Pie 2D Chart ................................................................................................................................................ 40
1.3 Bar 2D Chart ............................................................................................................................................... 61
1.4 Line 2D Chart .............................................................................................................................................. 94
1.5 Column 3D Chart ...................................................................................................................................... 129
1.6 Pie 3D Chart .............................................................................................................................................. 160
1.7 Area 2D Chart ........................................................................................................................................... 181
1.8 Doughnut 2D Chart ................................................................................................................................... 217
1.9 Doughnut 3D Chart ................................................................................................................................... 239
1.10 Multi-Series Column 2D Chart ................................................................................................................ 260
1.11 Multi-Series Column 3D Chart ................................................................................................................ 300
1.12 Multi-Series Line 2D Chart ...................................................................................................................... 338
1.13 Multi-Series Area 2D Chart ..................................................................................................................... 382
1.14 Multi-Series Bar 2D Chart ....................................................................................................................... 425
1.15 Multi-Series Bar 3D Chart ....................................................................................................................... 464
1.16 Stacked Column 2D Chart ....................................................................................................................... 501
1.17 Stacked Column 3D Chart ....................................................................................................................... 541
1.18 Stacked Area 2D Chart ............................................................................................................................ 579
1.19 Stacked Bar 2D Chart .............................................................................................................................. 623
1.20 Stacked Bar 3D Chart .............................................................................................................................. 662
1.21 2D Dual Y Combination Chart ................................................................................................................. 700
1.22 Multi-series Column 3D Line Dual Y Combination Chart ........................................................................ 750
1.23 Scroll Column 2D Chart........................................................................................................................... 798
1.24 Scroll Line 2D Chart ................................................................................................................................ 840
1.25 Scroll Area 2D Chart ............................................................................................................................... 885
1.26 Scroll Stacked Column 2D Chart ............................................................................................................. 929
1.27 Scroll Combination 2D (Dual Y) Chart ..................................................................................................... 971
1.28 Grid Component ................................................................................................................................... 1021
2. Addenda ....................................................................................................................................................... 1023
2.1 Plotting Discontinuous data ................................................................................................................... 1023
2.2 Gradients ................................................................................................................................................ 1031
2
2.3 Number Formatting in FusionCharts ...................................................................................................... 1033
2.4 Using formatted input numbers ............................................................................................................. 1043
2.5 Number Scaling ...................................................................................................................................... 1046
2.6 Number Formatting - Recursive Number Scaling ................................................................................... 1056
2.7 Using Currency Symbols on Chart .......................................................................................................... 1061
2.8 Using Special Punctuation on Chart ....................................................................................................... 1069
3
1. FusionCharts - Chart XML API
Note: FusionCharts is for registered users only. Charts marked with asterisk (*) are NOT supported.
Given below is the list of charts in FusionCharts v3.2 along with their JavaScript chart names (fallback
rendering on devices that do not support Flash Player). Also, for users who are upgrading from FusionCharts
FREE to v3.2, the corresponding FusionCharts FREE chart SWF names have been provided.
Note: PowerCharts, FusionWidgets and FusionMaps are NOT included in FusionCharts.
Chart Type SWF Name Equivalent JavaScript
Chart
FusionCharts FREE SWF
Single Series Charts
Column 3D Column3D.swf Column2D FCF_Column3D.swf
Column 2D Column2D.swf Column2D FCF_Column2D.swf
Line 2D Line.swf Line FCF_Line.swf
Area 2D Area2D.swf Area2D FCF_Area2D.swf
Bar 2D Bar2D.swf Bar2D FCF_Bar.swf
Pie 2D Pie2D.swf Pie2D FCF_Pie2D.swf
Pie 3D Pie3D.swf Pie2D FCF_Pie3D.swf
Doughnut
2D
Doughnut2D.swf Doughnut2D FCF_Doughnut2D.swf
Doughnut
3D
Doughnut3D.swf Doughnut2D N/A
Pareto 2D
(*)
Pareto2D.swf Pareto2D N/A
Pareto 3D
(*)
Pareto3D.swf Pareto2D N/A

Multi-series Charts
Multi-series
Column 2D
MSColumn2D.swf MSColumn2D FCF_MSColumn2D.swf
Multi-series
Column 3D
MSColumn3D.swf MSColumn2D FCF_MSColumn3D.swf
4
Multi-series
Line 2D
MSLine.swf MSLine FCF_MSLine.swf
Multi-series
Bar 2D
MSBar2D.swf MSBar2D FCF_MSBar2D.swf
Multi-series
Bar 3D
MSBar3D.swf MSBar2D N/A
Multi-series
Area 2D
MSArea.swf MSArea FCF_MSArea2D.swf
Marimekko
(*)
Marimekko.swf Marimekko N/A
Zoom Line
(*)
ZoomLine.swf ZoomLine N/A

Stacked Charts
Stacked
Column 3D
StackedColumn3D.swf StackedColumn2D FCF_StackedColumn3D.sw
f
Stacked
Column 2D
StackedColumn2D.swf StackedColumn2D FCF_StackedColumn2D.sw
f
Stacked Bar
2D
StackedBar2D.swf StackedBar2D FCF_StackedBar2D.swf
Stacked Bar
3D
StackedBar3D.swf StackedBar2D N/A
Stacked
Area 2D
StackedArea2D.swf StackedArea2D FCF_StackedArea2D.swf
Multi-series
Stacked
Column 2D
(*)
MSStackedColumn2D.swf N/A N/A

Combination Charts
True 3D
Chart
(Multi-
series 3D
Single Y
Combinatio
n chart -
Column +
MSCombi3D.swf MSCombi2D N/A
5
Line +
Area) (*)
Multi-series
2D Single Y
Combinatio
n Chart
(Column +
Line +
Area) (*)
MSCombi2D.swf MSCombi2D N/A
Multi-series
Column 3D
+ Multi-
series Line
- Single Y
Axis (*)
MSColumnLine3D.swf MSCombi2D N/A
Stacked
Column2D
+ Line
single Y
Axis (*)
StackedColumn2DLine.swf StackedColumn2DLine N/A
Stacked
Column3D
+ Line
single Y
Axis (*)
StackedColumn3DLine.swf StackedColumn2DLine N/A
Multi-series
2D Dual Y
Combinatio
n Chart
(Column +
Line +
Area)
MSCombiDY2D.swf MSCombiDY2D FCF_MSColumn2DLineDY.s
wf
Multi-series
Column 3D
+ Multi-
series Line
- Dual Y
Axis
MSColumn3DLineDY.swf MSCombiDY2D FCF_MSColumn3DLineDY.s
wf
Stacked
Column 3D
+ Line Dual
Y Axis (*)
StackedColumn3DLineDY.swf StackedColumn2DLineDua
lY
N/A
Multi-series
Stacked
MSStackedColumn2DLineDY.s
wf
N/A N/A
6
Column 2D
+ Line Dual
Y Axis (*)

XY Plot Charts
Scatter
Chart (*)
Scatter.swf Scatter N/A
Bubble
Chart (*)
Bubble.swf Bubble N/A

Scroll Charts
Scroll
Column 2D
ScrollColumn2D.swf ScrollColumn2D N/A
Scroll Line
2D
ScrollLine2D.swf ScrollLine2D N/A
Scroll Area
2D
ScrollArea2D.swf ScrollArea2D N/A
Scroll
Stacked
Column 2D
ScrollStackedColumn2D.swf
StackedArea2D (non
scroll)
N/A
Scroll
Combinatio
n 2D
(Single Y)
ScrollCombi2D.swf MSCombi2D (non scroll) N/A
Scroll
Combinatio
n 2D (Dual
Y)
ScrollCombiDY2D.swf
MSCombiDY2D (non
scroll)
N/A

Others
Single
Series Grid
Component
(*)
SSGrid.swf N/A N/A

7
1.1 Column 2D Chart

SWF: Column2D.swf
Quick Links (within this page)
Chart Data Others
Chart Image
Chart Objects
Functional Attributes
Titles and Axis Names
Chart Cosmetics
Divisional Lines/Grids
Tool-tip
Paddings and Margins
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Column 2D chart looks as under:

Sample XML / JSON for Column 2D chart:
8
XML
JSON

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue'
numberPrefix='$' showValues= '0'>

<set label='Jan' value='420000' />
<set label='Feb' value='910000' />
<set label='Mar' value='720000' />
<set label='Apr' value='550000' />
<set label='May' value='810000' />
<set label='Jun' value='510000' />
<set label='Jul' value='680000' />
<set label='Aug' value='620000' />
<set label='Sep' value='610000' />
<set label='Oct' value='490000' />
<set label='Nov' value='530000' />
<set label='Dec' value='330000' />

<trendLines>
<line startValue='700000' color='009933' displayvalue='Target' />
</trendLines>

<styles>

<definition>
<style name='CanvasAnim' type='animation' param='_xScale' start= '0'
duration='1' />
</definition>

<application>
<apply toObject='Canvas' styles='CanvasAnim' />
</application>

</styles>

</chart>
{
"chart":{
9
"caption":"Monthly Revenue",
"xaxisname":"Month",
"yaxisname":"Revenue",
"numberprefix":"$",
"showvalues":"0"
},
"data":[{
"label":"Jan",
"value":"420000"
},
{
"label":"Feb",
"value":"910000"
},
{
"label":"Mar",
"value":"720000"
},
{
"label":"Apr",
"value":"550000"
},
{
"label":"May",
"value":"810000"
},
{
"label":"Jun",
"value":"510000"
},
{
"label":"Jul",
"value":"680000"
},
{
"label":"Aug",
"value":"620000"
},
{
"label":"Sep",
10
"value":"610000"
},
{
"label":"Oct",
"value":"490000"
},
{
"label":"Nov",
"value":"530000"
},
{
"label":"Dec",
"value":"330000"
}
],
"trendlines":{
"line":[{
"startvalue":"700000",
"color":"009933",
"displayvalue":"Target"
}
]
},
"styles": {
"definition": [
{
"name": "CanvasAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}
],
"application": [
{
"toobject": "Canvas",
"styles": "CanvasAnim"
}
]
}
11
}
Back to top

Chart Objects

Object Name Description Features Supported Animation
Parameters
Supported
BACKGROUND BACKGROUND refers to the
entire background of the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
CANVAS In 2D Charts, CANVAS refers to
the area in which the actual
chart is plotted. It is represented
by a bounded rectangle. In 3D
charts, it refers to the 3D base
on which the columns are built.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
CAPTION CAPTION refers to the heading of
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
DATALABELS DATALABELS refer to the x-axis
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
DATAPLOT DATAPLOT refers to the actual
plot of the chart. For example,
Animation
Shadow
_alpha
_x
12
in Column 2D chart, columns are
referred to as DATAPLOT. In Pie
chart, it's the pies.
Glow
Bevel
Blur
_y
_xScale
_yScale
DATAVALUES DATAVALUES refer to the plot
values i.e., value of each data
(line, column, bar, pie etc.),
which is displayed beside the
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
DIVLINES DIVLINES are horizontal or
vertical lines running through
the canvas. Each divisional line
signifies a smaller unit of the
entire axis thus aiding the users
in interpreting the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_yScale
HGRID HGRID refers to alternate color
bands between two successive
horizontal divisional lines.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
SUBCAPTION SUBCAPTION refers to the sub-
heading of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
TOOLTIP TOOLTIP refers to the tool tip
shown when the mouse is
hovered over the data plots.
Font
TRENDLINES TRENDLINES refer to horizontal
lines spanning the chart canvas
which aid in interpretation of
data with respect to some pre-
determined value.
Animation
Shadow
Glow
Bevel
_alpha
_y
_xScale
_yScale
13
Blur
TRENDVALUES TRENDVALUES refer to the
display values of trend-lines (if
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
VLINES VLINES are vertical separator
lines that help you separate
blocks of data. These lines run
through the height of the chart,
thereby segregating data into
different blocks. In case of bar
charts, they are horizontal and
run through the width of chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
VLINELABELS Vlinelabels refer to any labels
that have been created for
vertical separator lines.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
XAXISNAME XAXISNAME refers to the x-axis
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
YAXISNAME YAXISNAME refers to the y-axis
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
14
YAXISVALUES YAXISVALUES refer to the limit
values or divisional line values,
which are displayed along the y-
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_rotation
Back to top

<chart> element Attributes

These attributes let you control a variety of functional elements on the chart. For example, you can opt
to show/hide data labels, data values, y-axis values. You can also set chart limits and extended
properties.
Attribute Name Type Range Description
animation Boolea
n
0/1 This attribute gives you the option to control
animation in your charts. If you do not want to
animate any part of the chart, set this as 0.
palette Numbe
r
1-5 FusionCharts v3 introduces the concept of
Color Palettes. Each chart has 5 pre-defined
color palettes which you can choose from. Each
palette renders the chart in a different color
theme. Valid values are 1-5.
paletteColors String List of hex color
codes separated
by comma
While the palette attribute allows to select a
palette theme that applies to chart
background, canvas, font and tool-tips, it does
not change the colors of data items (i.e.,
column, line, pie etc.). Using paletteColors
attribute, you can specify your custom list of
hex colors for the data items. The list of colors
have to be separated by comma e.g., <chart
paletteColors='FF0000,0372AB,FF5904..
.'>. The chart will cycle through the list of
specified colors and then render the data plot
15
accordingly.
To use the same set of colors throughout all
your charts in a web application, you can store
the list of palette colors in your application
globally and then provide the same in each
chart XML.
showAboutMenuItem Boolea
n
0/1 Setting this to 1 shows up a custom context
menu in the chart, which can be customized to
show your text and can be linked to your Url.
For e.g., you can set the context menu of the
chart to include "About your company name"
and then link to your company home page. By
default, the chart shows "About FusionCharts"
when right clicked.
aboutMenuItemLabel String The menu item label for the custom context
menu item.
aboutMenuItemLink String URL Link for the custom context menu item. You
can specify the link in FusionCharts Link format
to be able to open the same in new window,
pop-ups, frames or as JavaScript links.
showLabels Boolea
n
0/1 It sets the configuration whether the x-axis
labels will be displayed or not.
labelDisplay String AUTO Si
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
Using this attribute, you can customize the
alignment of data labels (x-axis labels). There
are 5 options: AUTO, WRAP, STAGGER, ROTATE
or NONE. By default, this attribute is set to
AUTO mode which means that the alignment of
the data labels is determined automatically
depending on the size of the chart. WRAP
wraps the label text if it is too long to fit in
one line. ROTATE rotates the labels vertically.
STAGGER divides the labels into multiple lines.
useEllipsesWhenOverfl
ow
Boolea
n
0/1 When enabled in auto mode, long data labels
are truncated by adding ellipses to prevent
them from overflowing the chart background.
16
Since v 3.2.1 The default value is 1.
rotateLabels Boolea
n
0/1 This attribute lets you set whether the data
labels will show up as rotated labels on the
chart.
slantLabels Boolea
n
0/1 If you've opted to show rotated labels on chart,
this attribute lets you set the configuration
whether the labels will show as slanted labels
or fully vertical ones.
labelStep Numbe
r
1 or above By default, all the labels are displayed on the
chart. However, if you've a set of streaming
data (like name of months or days of week),
you can opt to show every n-th label for better
clarity. This attribute just lets you do so. When
a value greater than 1 (n) is set to this
attribute, the first label from left and every
label next to the n-th position from left will be
displayed. e.g., a chart showing data for 12
months and set with labelStep='3' will show
labels for January, April, July and October. The
rest of the labels will be skipped.
staggerLines Numbe
r
2 or above If you've opted for STAGGER mode as
labelDisplay, using this attribute you can
control how many lines to stagger the label to.
By default, all labels are displayed in a single
line.
showValues Boolea
n
0/1 Sets the configuration whether data values will
be displayed along with the data plot on chart.
rotateValues Boolea
n
0/1 If you've opted to show data values, you can
rotate them using this attribute.
placeValuesInside Boolea
n
show them inside the columns using this
attribute. By default, the data values show
outside the column.
17
showYAxisValues Boolea
n
0/1 FusionCharts y-axis is divided into vertical
sections using div (divisional) lines. Each div
line assumes a value based on its position.
Using this attribute you can set whether to
show those div line (y-axis) values or not. This
attribute shows or hides the y-axis divisional
lines and limits.
showLimits Boolea
n
0/1 Whether to show chart limit values. If not
specified showYAxisValues attribute over-
rides this value.
showDivLineValues Boolea
n
0/1 Whether to show div line values. If not
rides this value.
yAxisValuesStep Numbe
r
1 or above By default, all div lines show their values.
However, you can opt to skip every x(th) div
line value using this attribute.
showShadow Boolea
n
0/1 Whether to show column shadows.
adjustDiv Boolea
n
0/1 FusionCharts automatically tries to adjust
divisional lines and limit values based on the
data provided. However, if you want to set
your explicit lower and upper limit values and
number of divisional lines, first set this
attribute to false. That will disable automatic
adjustment of divisional lines.
rotateYAxisName Boolea
n
0/1 If you do not wish to rotate y-axis name, set
this as 0. It specifically comes to use when
you've special characters (UTF8) in your y-axis
name that do not show up in rotated mode.
yAxisNameWidth Numbe
r
(In Pixels) If you opt to not rotate y-axis name, you can
choose a maximum width that will be applied
to y-axis name.
clickURL String The entire chart can now act as a hotspot. Use
18
this URL to define the hotspot link for the
chart. The link can be specified in FusionCharts
Link format.
defaultAnimation Boolea
n
0/1 By default, each chart animates some of its
elements. If you wish to switch off the default
animation patterns, you can set this attribute
to 0. It can be particularly useful when you
want to define your own animation patterns
using STYLE feature.
yAxisMinValue Numbe
r
This attribute helps you explicitly set the lower
limit of the chart. If you don't specify this
value, it is automatically calculated by
FusionCharts based on the data provided by
you.
yAxisMaxValue Numbe
r
This attribute helps you explicitly set the upper
you.
setAdaptiveYMin Boolea
n
0/1 This attribute lets you set whether the y-axis
lower limit will be 0 (in case of all positive
values on chart) or should the y-axis lower
limit adapt itself to a different figure based on
values provided to the chart.
centerYaxisName
Since v 3.2.2
Boolea
n
0/1 This attribute when set to '1', allows you to
align the y-axis name with respect to the
height of the chart. When set to '0', the y-axis
name is aligned with respect to the height of
the canvas.
Back to top

Chart Titles and Axis Names
Using these attributes, you can set the various headings and titles of chart like caption, sub-caption, x-
axis and y-axis names etc.
19
Attribute Name Type Description
caption String Caption of the chart.
subCaption String Sub-caption of the chart.
xAxisName String X-Axis Title of the Chart.
yAxisName String Y-Axis Title of the chart.
Back to top

Chart Cosmetics
The following attributes let you configure chart cosmetics like background color, background alpha,
canvas color & alpha etc.
bgColor Color This attribute sets the background color for
the chart. You can set any hex color code as
the value of this attribute. To specify a
gradient as background color, separate the
hex color codes of each color in the gradient
using comma. Example: FF5904,FFFFFF.
Remember to remove # and any spaces in
between. See Advanced charting > Using
Gradients(See 2.2) page for more details.
bgAlpha Number 0-100 Sets the alpha (transparency) for the
background. If you've opted for gradient
background, you need to set a list of
alpha(s) separated by comma. See
Advanced charting > Using Gradients(See
2.2) page for more details.
bgRatio Number 0-100 If you've opted for a gradient background,
this attribute lets you set the ratio of each
color constituent. See Advanced charting >
Using Gradients(See 2.2) page for more
details.
20
bgAngle Number 0-360 Sets the angle of the background color, in
case of a gradient. See Advanced charting >
details.
bgImage
or
bgSWF - deprecated
String To place any Flash movie as background of
the chart, enter the (path and) name of the
background SWF. It should be in the same
domain as the chart.
bgImageAlpha
or
bgSWFAlpha - deprecated
Number 0-100 Helps you specify alpha for the loaded
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
Helps you specify the mode in which the
background image is to be displayed.
Stretch - expands the image to fit the entire
chart area, without maintaining original
image constraints
Tile - the image is repeated as a pattern on
the entire chart area
Fit - fits the image proportionately on the
chart area
Fill -proportionately fills the entire chart
area with the image
Center - the image is positioned at the
center of the chart area
None - Default mode. None of the above
modes are applied
For more details click here.
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
Helps you to vertically align the background
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
Helps you to horizontally align the
background image.
21
bgImageScale
Since v3.2.2
Number 0-300 Helps you magnify the background
image.This attribute will only work when
the attribute bgImageDisplayMode is set
to none, center or tile.
canvasBgColor Color Sets Canvas background color. For Gradient
effect, enter colors separated by comma.
canvasBgAlpha Number Sets alpha for Canvas Background. For
gradient, enter alpha list separated by
commas.
canvasBgRatio Number 0-100 Helps you specify canvas background ratio
for gradients.
canvasBgAngle Number Helps you specify canvas background angle
in case of gradient.
canvasBorderColor Color Lets you specify canvas border color.
canvasBorderThickness Number 0-5 Lets you specify canvas border thickness.
canvasBorderAlpha Number 0-100 Lets you control transparency of canvas
border.
showBorder Boolean 0/1 Whether to show a border around the chart
or not.
borderColor Color Border color of the chart.
borderThickness Number In Pixels Border thickness of the chart.
borderAlpha Number 0-100 Border alpha of the chart.
showVLineLabelBorder Boolean 0/1 If you've opted to show a label for any of
your vLines in the chart, you can collectively
configure whether to show border for all
such labels using this attribute. If you want
to show label border for just a particular
vLine, you can over-ride this value by
specifying border configuration for that
specific vLine.
22
logoURL String URL You can load an external logo
(JPEG/PNG/SWF) on the chart once it has
rendered. This attribute lets you specify the
URL of the same. Owing to Flash Player
security settings, you can only specify logo
that are on the same sub-domain as that of
the SWF file of the chart.
logoPosition String TL, TR, BL,
BR, CC Where to position the logo on the chart:
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
CC - Center of screen
logoAlpha Number 0-100 Once the logo has loaded on the chart, you
can configure its opacity using this
attribute.
logoScale Number 0-300 You can also change the scale of externally
loaded logo at run-time by specifying a
value for this parameter.
logoLink String URL If you want to link the logo to an external
URL, specify the link in this attribute. The
link can be in FusionCharts Link format,
allowing you to link to new windows, pop-
ups, frames etc.
Back to top

Data Plot Cosmetics

These attributes let you configure how your plot (columns, lines, area, pie or any data that you're
plotting) will appear on the chart.

If the plots can show borders, you can control the border properties using the attributes listed below.
Or, if they support gradient fills, you can again configure various properties of the gradient using these
23
attributes.

Various other controls over plot cosmetics can be attained using this set of attributes.
useRoundEdges Boolean 0/1
If you wish to plot columns with round edges
and fill them with a glass effect gradient,
set this attribute to 1.
The following functionalities will not work
when this attribute is set to 1:
showShadow attribute doesn't work any
more. If you want to remove shadow from
columns, you'll have to over-ride the shadow
with a new shadow style (applied to
DATAPLOT) with alpha as 0.
Plot fill properties like gradient color, angle
etc. will not work any more, as the colors
for gradient are now calculated by the chart
itself.
Plot border properties also do not work in
this mode. Also, you cannot render the
border as dash in this mode.
showPlotBorder Boolean 0/1 Whether the column, area, pie etc. border
will show up.
plotBorderColor Color Color for column, area, pie border
plotBorderThickness Number 0-5 (Pixels) Thickness for column, area, pie border
plotBorderAlpha Number 0-100 Alpha for column, area, pie border
plotBorderDashed Boolean 0/1 Whether the plot border should appear as
dashed.
plotBorderDashLen Number In Pixels If plot border is to appear as dash, this
attribute lets you control the length of each
24
dash.
plotBorderDashGap Number In Pixels If plot border is to appear as dash, this
gap between two dash.
plotFillAngle Number 0-360 If you've opted to fill the plot (column, area
etc.) as gradient, this attribute lets you set
the fill angle for gradient.
plotFillRatio Number 0-100 If you've opted to fill the plot (column, area
the ratio for gradient.
plotFillAlpha Number 0-100 If you've opted to fill the plot (column, area
the fill alpha for gradient.
plotGradientColor Color Hex Color You can globally add a gradient color to the
entire plot of chart by specifying the second
color as this attribute. For example, if
you've specified individual colors for your
columns and now you want a gradient that
ends in white. You need to specify FFFFFF
(white) as this color and the chart will now
draw plots as gradient.
Back to top

Divisional Lines & Grids

Using this set of attributes, you can control the properties of divisional lines, zero plane and alternate
color bands.

Divisional Lines are horizontal or vertical lines running through the canvas. Each divisional line signifies a
smaller unit of the entire axis thus aiding the users in interpreting the chart.

The zero plane is a 2D/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.

25
Alternate color bands are colored blocks between two successive divisional lines.
numDivLines Number Numeric
value > 0
Number of horizontal axis division lines that
you want on the chart.
divLineColor Color Color for divisional lines.
divLineThickness Number 1-5 Thickness of divisional lines.
divLineAlpha Number 0-100 Alpha of divisional lines.
divLineIsDashed Boolean 0/1 Whether the divisional lines should display
as dash.
divLineDashLen Number In Pixels If the divisional lines are to be displayed as
dash, this attribute lets you control the
length of each dash.
divLineDashGap Number In Pixels If the divisional lines are to be displayed as
length of each gap between dash.
zeroPlaneColor Color Color for the Zero Plane. Zero Plane is the
line/plane that appears at 0 y-position on
canvas, when negative data is being shown
on the chart.
zeroPlaneThickness Number In Pixels Thickness of zero plane.
zeroPlaneAlpha Number 0-100 Alpha of zero plane.
showZeroPlaneValue
Since v 3.2.2 - SR3
Boolean 0/1 Allows you to show or hide the value on
which the zero plane exists on the y-axis.
By default, the value is displayed. This
attribute is not supported in JavaScript
charts.
showAlternateHGridColor Boolean 0/1 Whether to show alternate colored
horizontal grid bands.
26
alternateHGridColor Color Color of the alternate horizontal grid
bands.
alternateHGridAlpha Number Alpha (transparency) of the alternate
Back to top

Number Formatting
FusionCharts v3 offers you a lot of options to format your numbers on the chart.
Using the attributes below, you can control a myriad of options like:
Formatting of commas and decimals
Number prefixes and suffixes
Decimal places to which the numbers will round to
Scaling of numbers based on a user defined scale
Custom number input formats

formatNumber Boolean 0/1 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'. For more details,
please see Advanced Charting > Number
Formatting > Basics(See 2.3) page.
formatNumberScale Boolean 0/1 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, 1043 will
become 1.04K (with decimals set to 2
places). Same with numbers in millions - an
M will be added at the end. For more
details, please see Advanced Charting >
Number Formatting > Number Scaling (See
2.5) page.
27
defaultNumberScale String The default unit of the numbers that you're
providing to the chart. For more details,
Formatting > Number Scaling (See 2.5)
page.
numberScaleUnit String Unit of each block of the scale. For more
2.5) page.
numberScaleValue String Range of the various blocks that constitute
the scale. For more details, please see
Advanced Charting > Number Formatting
> Number Scaling (See 2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
Boolean 0/1 Whether to scale the number recursively?
For more details, please see Advanced
Charting > Number Formatting >
Recursive Number Scaling (See 2.6) page.
maxScaleRecursion
Since v 3.2.2 - SR3
Number

How many recursions to complete during
recursive scaling? -1 completes the entire
set of recursion. For more details see
> Recursive Number Scaling (See 2.6) page.
scaleSeparator
Since v 3.2.2 - SR3
String

What character to use to separate the
scales that generated after recursion? For
more details please see Advanced Charting
> Number Formatting > Recursive Number
Scaling (See 2.6) page.
numberPrefix String 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 like $40000, $50000. For
more details, please see Advanced
Basics(See 2.3) page.
28
numberSuffix String Character Using this attribute, you could add a suffix
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. For more details, please
see Advanced Charting > Number
decimalSeparator String Character This option helps you specify the character
to be used as the decimal separator in a
number. For more details, please see
> Basics(See 2.3) page.
thousandSeparator String Character This option helps you specify the character
to be used as the thousands separator in a
thousandSeparatorPosition
Since v 3.2.2 - SR3
Number This option helps you specify the position
of the thousand separator. For more
Number Formatting > Basics(See 2.3)
page.
inDecimalSeparator String Character In some countries, commas are used as
decimal separators and dots as thousand
separators. In XML, if you specify such
values, it will give an error while
converting to number. So, FusionCharts
accepts the input decimal and thousand
separator from user, so that it can convert
it accordingly into the required format.
This attribute lets you input the decimal
separator. For more details, please see
> Input Number Formatting(See 2.4) page.
inThousandSeparator String Character In some countries, commas are used as
29
This attribute lets you input the thousand
decimals Number 0-10 Number of decimal places to which all
numbers on the chart will be rounded to.
forceDecimals Boolean 0/1 Whether to add 0 padding at the end of
decimal numbers. For example, If you limit
the maximum number of decimal digits to
2, a number like 55.345 will be rounded to
55.34. This does not mean that all numbers
will be displayed with a fixed number of
decimal places. For instance 55 will not be
displayed as 55.00 and 55.1 will not
become 55.10. In order to have fixed
number of decimal places attached to all
the numbers, set this attribute to 1. For
forceYAxisValueDecimals
Since version 3.2
Boolean 0/1 Whether to forcefully attach decimal
places to all y-axis values. For example, If
you limit the maximum number of decimal
digits to 2, a number like 55.345 will be
rounded to 55.34. This does not mean that
all y-axis numbers will be displayed with a
fixed number of decimal places. For
instance 55 will not be displayed as 55.00
30
and 55.1 will not become 55.10. In order to
have fixed number of decimal places
attached to all y-axis numbers, set this
attribute to 1. For more details, please see
yAxisValueDecimals Number 0-10 If you've opted to not adjust div lines, you
can specify the div line values decimal
precision using this attribute. For more
page.
Back to top

Font Properties

Using the attributes below, you can define the generic font properties for all the text on the chart.
These attributes allow you a high level control over font properties.

If you intend to specify font properties for individual chart elements (like Caption, sub-caption etc.),
you'll need to use the STYLES feature of FusionCharts v3. Using STYLES, you can also specify advanced
font properties like Bold, Italics, HTML Mode etc.
baseFont String Font Name This attribute lets you set the font face
(family) of all the text (data labels, values
etc.) on chart. If you specify
outCnvBaseFont attribute also, then this
attribute controls only the font face of text
within the chart canvas bounds.
baseFontSize Number 0-72 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.
31
baseFontColor Color This attribute sets the base font color of the
displayed using the font color provided here.
outCnvBaseFont String Font Name 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.
outCnvBaseFontSize Number 0-72 This attribute sets the base font size of the
the chart which lie outside the canvas will
be displayed using the font size provided
here.
outCnvBaseFontColor Color This attribute sets the base font color of the
be displayed using the font color provided
here.
Back to top

Tool-tip
These attributes let you control the tool tip. You can set the background color, border color, separator
character and few other details.
showToolTip Boolean 0/1 Whether to show tool tip on chart.
toolTipBgColor Color Background Color for tool tip.
toolTipBorderColor Color Border Color for tool tip.
toolTipSepChar String The character specified as the value of this
attribute separates the name and value
32
displayed in tool tip.
showToolTipShadow Boolean 0/1 Whether to show shadow for tool-tips on the
chart.
Back to top

Chart Padding & Margins

The following attributes help you control chart margins and paddings.

FusionCharts v3 allows you manually customize the padding of various elements on the chart to allow
advanced manipulation and control over chart visualization. Padding in FusionCharts is always defined in
pixels, unless the attribute itself suggests some other scale (like plotSpacePercent).

You can also define the chart margins. Chart Margins refer to the empty space left on the top, bottom,
left and right of the chart. That means, FusionCharts will not plot anything in that space.

It's not necessary for you to specify any padding/margin values. FusionCharts automatically assumes the
best values for the same, if you do not specify the same.
captionPadding Number In Pixels This attribute lets you control the space (in
pixels) between the sub-caption and top of
the chart canvas. If the sub-caption is not
defined, it controls the space between
caption and top of chart canvas. If neither
caption, nor sub-caption is defined, this
padding does not come into play.
xAxisNamePadding Number In Pixels Using this, you can set the distance between
the top end of x-axis title and the bottom
end of data labels (or canvas, if data labels
are not to be shown).
yAxisNamePadding Number In Pixels Using this, you can set the distance between
the right end of y-axis title and the start of
y-axis values (or canvas, if the y-axis values
33
yAxisValuesPadding Number In Pixels This attribute helps you set the horizontal
space between the canvas left edge and the
y-axis values or trend line values (on
left/right side). This is particularly useful,
when you want more space between your
canvas and y-axis values.
labelPadding Number In Pixels This attribute sets the vertical space
between the labels and canvas bottom edge.
If you want more space between the canvas
and the x-axis labels, you can use this
attribute to control it.
valuePadding Number In Pixels It sets the vertical space between the end of
columns and start of value textboxes. This
basically helps you control the space you
want between your columns/anchors and
the value textboxes.
plotSpacePercent Number 0-80 (In
Percent)
On a column chart, there is spacing defined
between two columns. By default, the
spacing is set to 20% of canvas width. If you
intend to increase or decrease the spacing
between columns, you can do so using this
attribute. For example, if you wanted all
columns to stick to each other without any
space in between, you can set
plotSpacePercent to 0. Similarly, if you
want very thin columns, you can set
plotSpacePercent to its max value of 80.
chartLeftMargin Number In Pixels Amount of empty space that you want to put
on the left side of your chart. Nothing is
rendered in this space.
chartRightMargin Number In Pixels Amount of empty space that you want to put
on the right side of your chart. Nothing is
34
chartTopMargin Number In Pixels Amount of empty space that you want to put
on the top of your chart. Nothing is
chartBottomMargin Number In Pixels Amount of empty space that you want to put
on the bottom of your chart. Nothing is
canvasLeftMargin Number In Pixels This attribute lets you control the space
between the start of chart canvas and the
start (x) of chart. In case of 2D charts, the
canvas is the visible rectangular box. In case
of 3D charts, the canvas box is the imaginary
box around the 3D canvas.
Using this attribute, you can control the
amount of empty space between the chart
left side and canvas left side. By default,
FusionCharts automatically calculates this
space depending on the elements to be
placed on the chart. However, if you want
to over-ride this value with a higher value,
you can use this attribute to specify the
same. Please note that you cannot specify a
margin lower than what has been calculated
by the chart.
This attribute is particularly useful, when
you've multiple charts placed in a page and
want all their canvas start position to align
with each other - so in such a case, you can
set same margin value (a value large enough
that it doesn't get rejected by chart owing
to it being lower than the calculated value)
for all such charts in the page.
canvasRightMargin Number In Pixels Like canvasLeftMargin, this attribute lets
you set the space between end of canvas
and end of chart.
canvasTopMargin Number In Pixels Like canvasLeftMargin, this attribute lets
you set the space between top of canvas
35
and top of chart.
canvasBottomMargin Number In Pixels Like canvasLeftMargin, this attribute lets
you set the space between bottom of canvas
and bottom of chart.
Back to top

<set> element
Each <set> element (child of <chart> element) represents a set of data which is to be plotted on the
graph and determines a set of data which will appear on the chart.
For a single series chart, a typical <set> element will look like:
<set label='January' value='17400' />

label String This attribute determines the label for the
data item. The label appears on the x-axis
of chart.
value Number Numerical value for the data item. This
value will be plotted on the chart.
displayValue String If instead of the numerical value of this
data, you wish to display a custom string
value, you can specify the same here.
Examples are annotation for a data item
etc.
color Color Hex Code If you want to define your own colors for the
data items on chart, use this attribute to
specify color for the data item. This
attribute accepts hex color codes without #.
link String You can define links for individual data
items. That enables the end user to click on
data items (columns, lines, bars etc.) and
drill down to other pages. To define the link
for data items, use the link attribute. You
36
can define links that open in same window,
new window, pop-up window or frames.
Please see "Drill Down Charts >
FusionCharts Link format" for more
information. Also, you'll need to URL Encode
all the special characters (like ? and &)
present in the link.
toolText String By default, FusionCharts shows the data
item name and value as tool tip text for that
data item. But, if you want to display more
information for the data item as tool tip,
same.
showLabel Boolean 0/1 You can individually opt to show/hide labels
of individual data items using this attribute.
showValue Boolean 0/1 You can individually opt to show/hide values
dashed Boolean 0/1 Whether the border of this data item should
appear as dashed. This is particularly useful
when you want to highlight a data (such as
forecast or trend etc.).
alpha Number 0-100 This attribute determines the transparency
of a data item. The range for this attribute
is 0 to 100. 0 means complete transparency
(the data item wont be shown on the graph)
and 100 means opaque.
Back to top

Vertical data separator lines
vLines are vertical separator lines that help you separate blocks of data. These lines run through the
height of the chart, thereby segregating data into different blocks.
For example, if you're plotting a chart showing monthly sales from October 2005-Mar 2006, you might
want to plot a vertical separator line between Dec 2005 and January 2006 to indicate end of year.
37
The vertical lines are used as under:

<set label='Oct 2005' value='35456' />
<set label='Nov 2005' value='28556' />
<set label='Dec 2005' value='36556' />
<vLine color='FF5904' thickness='2' />
<set label='Jan 2006' value='45456' />
<set label='Feb 2006' value='35456' />
You can configure the cosmetics of vertical separator lines using the following attributes:
color Color Hex Color This attribute defines the color of vertical
separator line.
thickness Number In Pixels Thickness in pixels of the vertical separator
line.
alpha Number 0-100 Alpha of the vertical separator line.
dashed Boolean 0/1 Whether the vertical separator line should
appear as dashed.
dashLen Number In Pixels If the vertical separator line is to appear as
dashed, this attribute defines the length of
dash.
dashGap Number In Pixels If the vertical separator line is to appear as
dash gap.
label String Label for the vertical separator line, if to be
shown.
showLabelBorder Boolean 0/1 Whether to show a border around the vLine
label.
linePosition Number 0-1 Helps configure the position of vertical line
i.e., if a vLine is to be plotted between 2
points Jan and Feb, user can set any position
between 0 and 1 to indicate the relative
38
position of vLine between these two points
(0 means Jan and 1 means Feb). By default,
its 0.5 to show in between the points.
labelPosition Number 0-1 Helps configure the position of the vLine
label by setting a relative position between
0 and 1. In vertical charts, 0 means top of
canvas and 1 means bottom. In horizontal
charts, 0 means left of canvas and 1 means
right.
labelHAlign String left,
center,
right
Horizontal anchor point for the alignment of
vLine label.
labelVAlign String top,
middle,
bottom
Vertical anchor point for the alignment of
vLine label.
Back to top

Trend-lines
Using the <trendLines> element (and children <line> elements), you can define trend lines on the
chart.
Trend lines are horizontal lines spanning the chart canvas which aid in interpretation of data with
respect to some pre-determined value. For example, if you are plotting sales data of current year, you
might want to add previous year's average monthly sales as trend indicator for ease of comparison.
For each trend line on the chart, you need to define a <line> element under <trendLines> element
as under:
<trendLines>
<line startValue='895' color='FF0000' displayValue='Average' />
</trendLines>
You can control the cosmetic and functional properties of trend-lines using the following attributes:
startValue Number Numeric
Value
The starting value for the trendline. Say, if
you want to plot a slanted trendline from
39
value 102 to 109, the startValue will be
102.
endValue Number Numeric
Value
The ending y-axis value for the trendline.
Say, if you want to plot a slanted trendline
from value 102 to 109, the endValue will
be 109. If you do not specify a value for
endValue, it will automatically assume the
same value as startValue.
displayValue String 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.
color String Hex Code Color of the trend line and its associated
text.
isTrendZone Boolean 0/1 Whether the trend will display a line, or a
zone (filled colored rectangle).
showOnTop Boolean 0/1 Whether the trend line/zone will be
displayed over data plots or under them.
thickness Number In Pixels If you've opted to show the trend as a line,
this attribute lets you define the thickness
of trend line.
alpha Number 0-100 Alpha of the trend line.
dashed Boolean 0/1 If you've opted to show the trend as a line,
this attribute lets you define whether the
trend line will appear as dashed.
dashLen Number In Pixels If you've opted to show trend line as dash,
this attribute lets you control the length of
each dash.
dashGap Number In Pixels If you've opted to show trend line as dash,
40
each dash gap.
valueOnRight Boolean 0/1 Whether to show the trend line value on left
side or right side of chart. This is
particularly useful when the trend line
display values on the chart are colliding with
divisional lines values on the chart.
toolText String Custom tool-text for this trendline/zone.

1.2 Pie 2D Chart

SWF: Pie2D.swf
Chart Data Others
Chart Image
Chart Objects
Titles
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Pie / Doughnut Properties
Smart Labels and Lines
Number Formatting
Font Properties

Pie 2D chart looks as under:
41

Sample XML / JSON for Pie 2D chart:
XML
JSON
<chart caption='Company Revenue' showPercentValues='1'>
<set label='Services' value='26' />
<set label='Hardware' value='32' />
<set label='Software' value='42' />
</chart>
{
"chart":{
"caption":"Company Revenue",
"showpercentvalues":"1"
},
"data":[{
"label":"Services",
"value":"26"
},
{
"label":"Hardware",
"value":"32"
},
{
42
"label":"Software",
"value":"42"
}
]
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
_alpha
_rotation
43
Blur
DATALABELS DATALABELS refer to the pie-
labels of the data.
Font
Shadow
Glow
Bevel
Blur

Font
Back to top


to show/hide data labels, data values etc. You can also set chart limits and extended properties.
animation Boolean 0/1 This attribute gives you the option to control
palette Number 1-5 FusionCharts v3 introduces the concept of Color
Palettes. Each chart has 5 pre-defined color
palettes which you can choose from. Each palette
renders the chart in a different color theme. Valid
values are 1-5.
paletteColors String List of
hex color
codes
separated
by
comma
palette theme that applies to chart background,
canvas, font and tool-tips, it does not change the
colors of data items (i.e., column, line, pie etc.).
Using paletteColors attribute, you can specify
your custom list of hex colors for the data items.
The list of colors have to be separated by comma
44
e.g., <chart
paletteColors='FF0000,0372AB,FF5904...'>.
The chart will cycle through the list of specified
colors and then render the data plot accordingly.
To use the same set of colors throughout all your
charts in a web application, you can store the list of
palette colors in your application globally and then
provide the same in each chart XML.
showAboutMenuItem Boolean 0/1 Setting this to 1 shows up a custom context menu in
the chart, which can be customized to show your
text and can be linked to your Url. For e.g., you can
set the context menu of the chart to include "About
your company name" and then link to your company
home page. By default, the chart shows "About
FusionCharts" when right clicked.
aboutMenuItemLabel String The menu item label for the custom context menu
item.
aboutMenuItemLink String URL Link for the custom context menu item. You can
specify the link in FusionCharts Link format to be
able to open the same in new window, pop-ups,
frames or as JavaScript links.
showZeroPies Boolean 0/1 Configuration whether to show pies with 0 values
(and their values). Otherwise, they won't show up in
the chart.
showPercentValues Boolean 0/1 Whether to show percentage values in labels of the
chart.
showPercentInToolTip Boolean 0/1 Whether to show percentage values in tool tip.
showLabels Boolean 0/1 Whether to show labels on the chart.
showValues Boolean 0/1 Whether to show values on the chart.
labelSepChar String Character The character to separate the data label and data
values on the chart.
45
defaultAnimation Boolean 0/1 By default, each chart animates some of its
animation patterns, you can set this attribute to 0.
It can be particularly useful when you want to
define your own animation patterns using STYLE
feature.
clickURL String The entire chart can now act as a hotspot. Use this
URL to define the hotspot link for the chart. The
link can be specified in FusionCharts Link format.
Back to top

Chart Titles
Using these attributes, you can set the various headings and titles of chart like caption and sub-caption.
Back to top

Chart Cosmetics
The following attributes let you configure chart cosmetics like background color, background alpha etc.
or not.
46
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
47
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
BR, CC
Where to position the logo on the chart:
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
48
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

will show up.
plotFillAlpha Number 0-100 This attribute lets you set the fill alpha for
plot.
49
showShadow Boolean 0/1 Whether to show shadow for pie/doughnuts.
use3DLighting Boolean 0/1 Whether to use advanced gradients and
shadow effects to create better looking 3D
charts.
Back to top

The following attributes let you control various functionalities of pie/doughnut chart.
radius3D Number In Percent You can define the 3D Radius of chart in
percentage using this attribute. It basically
helps you set the bevel distance for the
pie/doughnut (if in 3D Lighting Mode).
slicingDistance Number In Pixels If you've opted to slice a particular
pie/doughnut slice, using this attribute you
can control the distance between the slice
and the center of chart.
pieRadius Number In Pixels This attribute lets you explicitly set the
outer radius of the chart. FusionCharts
automatically calculates the best fit pie
radius for the chart. This attribute is useful
if you want to enforce one of your own
values.
startingAngle Number 0-360 By default, the pie chart starts from angle 0
degree i.e., the first pie slice starts plotting
from 0 degree angle. If you want to change
the starting angle of the chart, use this
attribute.

It obeys the conventions of co-ordinate
geometry where 0 degrees means hand of a
clock at 3. Starting angle Increases anti-
clockwise.
50
enableRotation Boolean 0/1 The pie charts have three modes: Slicing,
Rotation and Link. By default, a chart starts
in Slicing mode. If you need to enable
rotation from XML, set this attribute to 1.
But, when links are defined, the chart
always works in Link mode irrespective of
the value of this attribute.
Back to top

Smart Labels & Lines

Starting FusionCharts v3, the pie and doughnut charts can now have smart labels and lines.

Smart labels/lines are data connector lines which connect the pie/doughnut slices to their respective
labels without over-lapping even in cases where there are lots of labels located near each other.

You can configure the smart labels/lines properties using the attributes below.
enableSmartLabels Boolean 0/1 Whether to use smart labels or not.
skipOverlapLabels Boolean 0/1 Whether to skip labels that are overlapping
even when using smart labels. If not, they
might overlap if there are too many labels.
isSmartLineSlanted Boolean 0/1 The smart lines (smart label connector
lines) can appear in two ways: Slanted or
Straight. This attribute lets you choose
between them.
smartLineColor Color Hex Code Color of smart label connector lines.
smartLineThickness Number In Pixels Thickness of smart label connector lines.
smartLineAlpha Number 0-100 Alpha of smart label connector lines.
labelDistance Number In Pixels This attribute helps you set the distance of
the label/value text boxes from the
51
pie/doughnut edge. This attribute will work
only when the attribute
enableSmartLabels is set to '0'.
smartLabelClearance Number In Pixels Clearance distance of a label (for sliced-in
pies) from an adjacent sliced out pies.
manageLabelOverflow Boolean 0/1 This attribute tries to manage overflow of
data labels. If enabled, data labels are
either wrapped or truncated with ellipses
to prevent them from overflowing out of
the chart canvas.
In case smartLabels is disabled, the labels
are wrapped to avoid the overflow. Since
smartLabels is disabled, the wrapped
labels might get overlapped.
When smartLabels is enabled,
management of the overflowing labels fit in
the "quadrant specific smart labeling
algorithm". Data labels try to wrap first. In
case, there is constrain of space in the
quadrant, the labels get truncated with
ellipses.
useEllipsesWhenOverflow
Since v 3.2.1
Boolean 0/1 When enabled, long data labels are
truncated by adding ellipses to prevent
them from overflowing the chart
background. The default value is 1. This
setting works only when
manageLabelOverflow is set to 1.
Back to top

Number Formatting
52

2.5) page.
page.
2.5) page.
53
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

more details see Advanced Charting >
Number Formatting > Recursive Number
54
Since v 3.2.2 - SR3
page.
55
forceDecimals Boolean 0-1 Whether to add 0 padding at the end of
decimal numbers. For example, if you set
decimals as 2 and a number is 23.4. If
forceDecimals is set to 1, FusionCharts will
convert the number to 23.40 (note the
extra 0 at the end). For more details,
Back to top

Font Properties


etc.) on chart.
Back to top
56

Legend Properties

In pie / doughnut charts, the name of each slice shows up in the legend of the chart. If you do not need
the legend, you can opt to hide the same.

Also, the legend can be placed at the bottom of the chart or to the right of the chart.

Using the attributes below, you can configure the functional and cosmetic properties of the legend.
showLegend
Since v 3.2
Boolean 0/1 Whether to show legend on the chart.
legendPosition
Since v 3.2
String BOTTOM
or
RIGHT
The legend can be plotted at two positions
on the chart - below the chart (BOTTOM)
and on the RIGHT side of the chart.
legendCaption
Since v 3.2
String You can add a caption for the entire
legend by setting the same here.
legendIconScale
Since v 3.2
Number Greater
than 0 and
less than
equal to 5
Scaling of legend icon is possible starting
FusionCharts v3.2. This attribute lets you
control the size of the legend icon.

The default scale value is 1. Anything less
than 1 reduces the size of the legend-icons
on the chart. Any value bigger than 1
enlarges the icons. e.g., 0.5 means half
the size, where as, 2 means twice the size.
legendBgColor
Since v 3.2
Color Hex Code Background color for the legend.
legendBgAlpha
Since v 3.2
Number 0-100 Background alpha for the legend.
legendBorderColor Color Hex Code Border Color for the legend.
57
Since v 3.2
legendBorderThickness
Since v 3.2
Number In Pixels Border thickness for the legend.
legendBorderAlpha
Since v 3.2
Number 0-100 Border alpha for the legend.
legendShadow
Since v 3.2
Boolean 0/1 Whether to show a shadow for legend.
legendAllowDrag
Since v 3.2
Boolean 0/1 The legend can be made drag-able by
setting this attribute to 1. End viewers of
the chart can drag the legend around on
the chart.
legendScrollBgColor
Since v 3.2
Color Hex Code If you've too many items on the legend, a
scroll bar shows up on the same. This
attribute lets you configure the
background color of the scroll bar.
legendScrollBarColor
Since v 3.2
attribute lets you configure the bar color
of the scroll bar.
legendScrollBtnColor
Since v 3.2
attribute lets you configure the color of
buttons of the scroll bar.
reverseLegend
Since v 3.2
Boolean 0/1 You can reverse the ordering of datasets in
the legend by setting this attribute to 1.
interactiveLegend
Since v 3.2
Boolean 0/1 This attribute lets you interact with the
legend in your chart. When you click a
particular legend key, the associated slice
slides out from the chart. Re-clicking the
key causes the slice to slide in.
58
legendNumColumns
Since v 3.2
Number Zero and
Positive
Integers
The legend items are arranged in columns.
Using this attribute, you can propose the
number of columns. This value undergoes
internal checking on judicious use of
white-space. In case, the value is found
improper, the chart auto-calculates the
number of columns. When set to 0, the
chart automatically decides the number of
columns.

The above is applicable when
legendPosition is set to BOTTOM. If you
have set RIGHT legendPosition, the
number of columns is always set to 1.
minimiseWrappingInLegend
Since v 3.2
Boolean 0/1 Whether to minimize legend item text
wrapping.
Back to top

Tool-tip
chart.
Back to top
59



advanced manipulation and control over chart visualization.


the pie. If the sub-caption is not defined, it
controls the space between caption and top
of the pie. If neither caption, nor sub-
caption is defined, this padding does not
come into play.
60
Back to top

<set> element
For a pie chart, a typical <set> element will look like:

borderColor Color Hex Code If you want to set border color of individual
pie/doughnut data items, you can specify
using this attribute.
borderAlpha Color Hex Code If you want to set border alpha of individual
isSliced Boolean 0/1 This attribute determines whether the pie
appears as a part of the total chart or is
sliced out as an individual item.
of chart.
etc.
61
same.

1.3 Bar 2D Chart

SWF: Bar2D.swf
62
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Bar 2D chart looks as under:

Sample XML / JSON for Bar 2D chart:
XML
JSON

63


<trendLines>
</trendLines>

<styles>

<definition>
<style name='CanvasAnim' type='animation' param='_xScale' start= '0'
duration='1' />
</definition>

<application>
</application>

</styles>

</chart>
{
"chart":{
"numberprefix":"$",
"showvalues":"0"
},
64
"data":[{
"label":"Jan",
"value":"420000"
},
{
"label":"Feb",
"value":"910000"
},
{
"label":"Mar",
"value":"720000"
},
{
"label":"Apr",
"value":"550000"
},
{
"label":"May",
"value":"810000"
},
{
"label":"Jun",
"value":"510000"
},
{
"label":"Jul",
"value":"680000"
},
{
"label":"Aug",
"value":"620000"
},
{
"label":"Sep",
"value":"610000"
},
{
"label":"Oct",
"value":"490000"
},
65
{
"label":"Nov",
"value":"530000"
},
{
"label":"Dec",
"value":"330000"
}
],
"trendlines":{
"line":[{
"color":"009933",
}
]
},
"styles": {
"definition": [
{
"param": "_xScale",
"start": "0",
"duration": "1"
}
],
"application": [
{
}
]
}
}
Back to top

Chart Objects

66
Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Font
_alpha
_x
67
data plot.
Shadow
Glow
Bevel
Blur
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
VGRID VGRID refers to vertical color
vertical divisional lines.
Animation
Shadow
Glow
_alpha
_x
_xScale
68
Bevel
Blur
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
69
Back to top


properties.
animation Boolea
n
values are 1-5.
hex color
codes
separate
d by
comma
e.g., <chart
paletteColors='FF0000,0372AB,FF5904...'>
. The chart will cycle through the list of specified
charts in a web application, you can store the list
of palette colors in your application globally and
then provide the same in each chart XML.
showAboutMenuItem Boolea 0/1 Setting this to 1 shows up a custom context menu
in the chart, which can be customized to show your
70
n text and can be linked to your Url. For e.g., you
can set the context menu of the chart to include
"About your company name" and then link to your
company home page. By default, the chart shows
"About FusionCharts" when right clicked.
item.
showLabels Boolea
n
0/1 It sets the configuration whether the x-axis labels
will be displayed or not.
labelStep Number 1 or
above
By default, all the labels are displayed on the
chart. However, if you've a set of streaming data
(like name of months or days of week), you can opt
to show every n-th label for better clarity. This
attribute just lets you do so. When a value greater
than 1 (n) is set to this attribute, the first label
from left and every label next to the n-th position
from left will be displayed. e.g., a chart showing
data for 12 months and set with labelStep='3'
will show labels for January, April, July and
October. The rest of the labels will be skipped.
maxLabelWidthPercent Number 1-100 Restricts the maximum length of data labels in
terms of percentage of the charts width that the
data labels can occupy. If a data label is longer
than the specified percentage width then it will
either be wrapped or get truncated, subject to
availability of vertical space. Unnecessary space is
not reserved for the data labels, in case all of them
are shorter than the specified maximum width.
useEllipsesWhenOverflo
w
Boolea
n
0/1 This attribute lets you set whether the overflowing
data labels will be truncated by adding ellipses.
71
Since v 3.2.1
showValues Boolea
n
0/1 Sets the configuration whether data values will be
displayed along with the data plot on chart.
n
0/1 If you've opted to show data values, you can show
them inside the columns using this attribute. By
default, the data values show outside the column.
n
0/1 FusionCharts y-axis is divided into vertical sections
using div (divisional) lines. Each div line assumes a
value based on its position. Using this attribute you
can set whether to show those div line (y-axis)
values or not. This attribute shows or hides the y-
axis divisional lines and limits.
showLimits Boolea
n
0/1 Whether to show chart limit values.If not specified
showYAxisValues attribute over-rides this value.
n
0/1 Whether to show div line values. If not specified
yAxisValuesStep Number 1 or
above
By default, all div lines show their values.
However, you can opt to skip every x(th) div line
value using this attribute.
showShadow Boolea
n
0/1 Whether to show bar shadows.
adjustDiv Boolea
n
0/1 FusionCharts automatically tries to adjust divisional
lines and limit values based on the data provided.
However, if you want to set your explicit lower and
upper limit values and number of divisional lines,
first set this attribute to false. That will disable
automatic adjustment of divisional lines.
rotateXAxisName Boolea
n
0/1 If you do not wish to rotate x-axis name, set this as
0. It specifically comes to use when you've special
characters (UTF8) in your x-axis name that do not
show up in rotated mode.
72
xAxisNameWidth Number (In
Pixels)
If you opt to not rotate x-axis name, you can
choose a maximum width that will be applied to x-
axis name.
n
feature.
yAxisMinValue Number This attribute helps you explicitly set the lower
limit of the chart. If you don't specify this value, it
is automatically calculated by FusionCharts based
on the data provided by you.
yAxisMaxValue Number This attribute helps you explicitly set the upper
n
0/1 This attribute lets you set whether the y-axis lower
limit will be 0 (in case of all positive values on
chart) or should the y-axis lower limit adapt itself
to a different figure based on values provided to
the chart.
centerXaxisName
Since v 3.2.2
Boolea
n
0/1 This attribute when set to '1', allows you to align
the x-axis name with respect to the height of the
chart. When set to '0', the x-axis name is aligned
with respect to the height of the canvas.
Back to top

73
Back to top

Chart Cosmetics
or not.
74
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
75
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
76
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


77
attributes.

If you wish to plot bars with round edges
bars, you'll have to over-ride the shadow
itself.
will show up.
dashed.
78
dash.
bars and now you want a gradient that ends
in white. You need to specify FFFFFF (white)
as this color and the chart will now draw
plots as gradient.
Back to top


color bands.


79

value > 0
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
showAlternateVGridColor Boolean 0/1 Whether to show alternate colored vertical
80
grid bands.
alternateVGridColor Color Color of the alternate vertical grid bands.
alternateVGridAlpha Number Alpha (transparency) of the alternate
vertical grid bands.
Back to top

Number Formatting

81
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

82
Since v 3.2.2 - SR3
page.
83
Since v 3.2
84
page.
Back to top

Font Properties


85
here.
here.
here.
Back to top

Tool-tip
86
chart.
Back to top





the x-axis title and left end of data labels
(or canvas, if data labels are not to be
shown).
the y-axis title and the start of y-axis values
87
(or canvas, if the y-axis values are not to be
shown).
yAxisValuesPadding Number In Pixels This attribute helps you set the vertical
space between the canvas bottom edge and
the y-axis values. This is particularly useful,
labelPadding Number In Pixels This attribute sets the horizontal space
between the labels and canvas left edge. If
you want more space between the canvas
valuePadding Number In Pixels It sets the horizontal space between the end
of bars and start of value textboxes. This
want between your bars and the value
textboxes.
Percent)
On a bar chart, there is spacing defined
between two bars. By default, the spacing is
set to 20% of canvas width. If you intend to
increase or decrease the spacing between
bars, you can do so using this attribute. For
example, if you wanted all bars to stick to
each other without any space in between,
you can set plotSpacePercent to 0.
Similarly, if you want very thin bars, you can
set plotSpacePercent to its max value of
80.
88
by the chart.
and end of chart.
89
and top of chart.
Back to top

<set> element

of chart.
etc.
90
same.
Back to top

91

separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
92
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
93
102.
Value
startValue.
text.
of trend line.
each dash.
94
each dash gap.

1.4 Line 2D Chart

SWF: Line.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Line 2D chart looks as under:
95

Sample XML / JSON for Line 2D chart:
XML
JSON



96
<trendLines>
</trendLines>

</chart>
{
"chart":{
"numberprefix":"$",
"showvalues":"0"
},
"data":[{
"label":"Jan",
"value":"420000"
},
{
"label":"Feb",
"value":"910000"
},
{
"label":"Mar",
"value":"720000"
},
{
"label":"Apr",
"value":"550000"
},
{
"label":"May",
"value":"810000"
},
{
"label":"Jun",
"value":"510000"
},
{
"label":"Jul",
"value":"680000"
97
},
{
"label":"Aug",
"value":"620000"
},
{
"label":"Sep",
"value":"610000"
},
{
"label":"Oct",
"value":"490000"
},
{
"label":"Nov",
"value":"530000"
},
{
"label":"Dec",
"value":"330000"
}
],
"trendlines":{
"line":[{
"color":"009933",
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
98
ANCHORS On line/area charts, ANCHORS
(or marker points) are polygons
which appear at the joint of two
consecutive lines/area points.
These are indicators to show the
position of data points. The
anchors handle tool tips and
links for the data points.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
_alpha
_x
_y
99
chart, it's the pies. Bevel
Blur
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
100
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
VDIVLINES VDIVLINES are vertical divisional
lines which aid in data
interpretation.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
_alpha
_x
_y
101
Bevel
Blur
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
animation Boolea
n
palette Numbe
r
102
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
menu item.
connectNullData Boolea
n
0/1 This attribute lets you control whether empty
data sets in your data will be connected to
each other OR do they appear as broken data
sets. Please see Advanced charting > Plotting
Discontinuous data(See 2.1) section for more
103
details on this.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
The default value is 1.
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
104
staggerLines Numbe
r
line.
showValues Boolea
n
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
If you've opted to show data values on the
chart, this attribute lets you adjust the vertical
alignment of data values with respect to
dataplots. By default, this attribute is set to
AUTO mode in which the alignment of each
data value is determined automatically based
on the position of each plot point. In ABOVE
mode, data values are displayed above the plot
points unless a plot point is too close to the
upper edge of the canvas while in BELOW
mode, data values are displayed below the plot
lower edge of the canvas.
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
showDivLineValues Boolea 0/1 Whether to show div line values. If not
105
n specified showYAxisValues attribute over-
rides this value.
r
adjustDiv Boolea
n
n
r
to y-axis name.
Link format.
n
yAxisMinValue Numbe
r
you.
106
yAxisMaxValue Numbe
r
you.
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

Back to top

Chart Cosmetics
107
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode String stretch,
tile, fit,
108
Since v3.2.2 fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
109
border.
or not.
specific vLine.
logoPosition String TL
TR
BL
BR
CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
110
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

showShadow Boolean 0/1 Whether to show shadow for the data plot.
lineColor Color Hex Code Color using which the lines on the chart will
be drawn.
lineThickness Number In Pixels Thickness of the lines on the chart.
lineAlpha Number 0-100 Alpha of the lines on the chart.
lineDashed Boolean 0/1 Configuration whether to show the lines on
the chart as dash.
111
lineDashLen Number In Pixels If the lines are to be shown as dashes, this
attribute defines the length of dash.
lineDashGap Number In Pixels If the lines are to be shown as dashes, this
attribute defines the length of dash gap.
Back to top

Anchors

On line/area charts, anchors (or marker points) are polygons which appear at the joint of two
consecutive lines/area points. These are indicators to show the position of data points.

The anchors handle tool tips and links for the data points. So, if you opt to not render anchors on a
chart, the tool tips and links won't function. You can, however, hide them by setting alpha to 0 and still
enable tool tips and links.

You can customize all the facets of anchors using the properties below.
drawAnchors Boolean 0/1 Whether to draw anchors on the chart. If
the anchors are not shown, then the tool tip
and links won't work.
anchorSides Number 3-20 This attribute sets the number of sides the
anchor will have. For e.g., an anchor with 3
sides will represent a triangle, with 4 it will
be a square and so on.
anchorRadius Number In Pixels This attribute sets the radius (in pixels) of
the anchor. Greater the radius, bigger will
be the anchor size.
anchorBorderColor Color Hex Code Lets you set the border color of anchors.
anchorBorderThickness Number In Pixels Helps you set border thickness of anchors.
anchorBgColor Color Hex Code Helps you set the background color of
anchors.
112
anchorAlpha Number 0-100 Helps you set the alpha of entire anchors. If
you need to hide the anchors on chart but
still enable tool tips, set this as 0.
anchorBgAlpha Number 0-100 Helps you set the alpha of anchor
background.
Back to top


color bands.



value > 0
as dash.
113
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
numVDivLines Number Number of vertical axis division lines
vDivLineColor Color Color of vertical axis division lines.
vDivLineThickness Number In Pixels Thickness of vertical axis division lines.
vDivLineAlpha Number 0-100 Alpha of vertical axis division lines.
vDivLineIsDashed Boolean 0/1 Whether vertical divisional lines appear as
dashed.
vDivLineDashLen Number In Pixels If vertical div lines are dashed, this
attribute lets you control the width of dash.
114
vDivLineDashGap Number In Pixels If vertical div lines are dashed, this
attribute lets you control the width of dash
gap.
showAlternateVGridColor Boolean 0/1 Whether to show alternate vertical colored
grid bands.
alternateVGridColor Color Color of alternate vertical colored grid
bands.
alternateVGridAlpha Number Alpha of alternate vertical colored grid
bands.
showZeroPlane Boolean 0/1 Whether to show the zero plane on chart (if
negative values are present).
Back to top

Number Formatting

115
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

116
Since v 3.2.2 - SR3
page.
117
118
Since v 3.2
page.
Back to top

Font Properties


119
here.
here.
here.
Back to top

Tool-tip
120
chart.
Back to top





canvasPadding Number In Pixels Lets you set the space between the canvas
border and first & last data points
121
122
by the chart.
and end of chart.
and top of chart.
123
Back to top

<set> element

of chart.
value Number Numerical value for the data item. This will
be plotted on the chart.
etc.
124
same.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
If you've opted to show a particular data
value on the chart, this attribute lets you
adjust the vertical alignment of individual
data values with respect to dataplots. By
default, this attribute is set to AUTO mode
in which the alignment of a data value is
determined automatically based on the
position of its plot point. In ABOVE mode, a
data value is displayed above the plot point
unless a plot point is too close to the upper
edge of the canvas while in BELOW mode, a
data value is displayed below the plot point
unless a plot point is too close to the lower
edge of the canvas.
125
anchorSides Number 3 or more If you want to configure data item specific
anchor properties, this attribute lets you
define the number of sides for the anchor of
that particular data item.
anchorRadius Number In Pixels If you want to configure data item specific
define the radius for the anchor of that
particular data item.
anchorBorderColor Color 0-100 If you want to configure data item specific
anchor properties, this attribute lets you set
the border color for the anchor of that
anchorBorderThickness Number In Pixels If you want to configure data item specific
the border thickness for the anchor of that
anchorBgColor Color Hex Code If you want to configure data item specific
the background color for the anchor of that
anchorAlpha Number 0-100 If you want to configure data item specific
the alpha for the anchor of that particular
data item.
anchorBgAlpha Number 0-100 If you want to configure data item specific
the background alpha for the anchor of that
Back to top
126


separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
127
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

Trend-lines
chart.
as under:
<trendLines>
128
</trendLines>
Value
102.
Value
startValue.
text.
of trend line.
129
each dash.
each dash gap.

1.5 Column 3D Chart

SWF: Column3D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Column 3D chart looks as under:
130

Sample XML / JSON for Column 3D chart:
XML
JSON



131
<trendLines>
</trendLines>

</chart>
{
"chart":{
"numberprefix":"$",
"showvalues":"0"
},
"data":[{
"label":"Jan",
"value":"420000"
},
{
"label":"Feb",
"value":"910000"
},
{
"label":"Mar",
"value":"720000"
},
{
"label":"Apr",
"value":"550000"
},
{
"label":"May",
"value":"810000"
},
{
"label":"Jun",
"value":"510000"
},
{
"label":"Jul",
"value":"680000"
132
},
{
"label":"Aug",
"value":"620000"
},
{
"label":"Sep",
"value":"610000"
},
{
"label":"Oct",
"value":"490000"
},
{
"label":"Nov",
"value":"530000"
},
{
"label":"Dec",
"value":"330000"
}
],
"trendlines":{
"line":[{
"color":"009933",
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
133
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
134
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
135
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
136
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
137
menu item.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
138
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
outside the column.
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
yAxisValuesStep Numbe 1 or above By default, all div lines show their values.
139
r However, you can opt to skip every x(th) div
showShadow Boolea
n
0/1 Whether to show column shadows.
adjustDiv Boolea
n
n
r
to y-axis name.
Link format.
maxColWidth Numbe
r
In Pixels Maximum allowed column width
use3DLighting Boolea
n
0/1 Whether to use advanced gradients and shadow
effects to create better looking 3D charts.
n
140
yAxisMinValue Numbe
r
you.
yAxisMaxValue Numbe
r
you.
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

141
Back to top

Chart Cosmetics
alpha(s) separated by comma.See Advanced
charting > Using Gradients(See 2.2) page for
more details.
details.
details.
bgImage
or
bgSWF - deprecated
142
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
canvasBgColor Color Sets Canvas background color.
canvasBgAlpha Number Sets alpha for Canvas Background.
canvasBaseColor Color Helps you specify the color for canvas base.
143
showCanvasBg Boolean Whether to show canvas background.
showCanvasBase Boolean Whether to show canvas base.
canvasBaseDepth Number In Pixels Height of canvas base (in pixels)
canvasBgDepth Number In Pixels Depth of Canvas Background
or not.
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
144
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

will show up.
145
overlapColumns Boolean Whether to overlap columns over each other
to give a richer 3D look. If there are too
many columns on the chart, it will
automatically overlap.
Back to top


color bands.



value > 0
as dash.
146
length of gaps between the dash.
on the chart.
zeroPlaneShowBorder Boolean Whether to show border of zero plane.
zeroPlaneBorderColor Color Sets the border color of zero plane.
showZeroPlaneValue
Since v 3.2.2 - SR3
which the zero plane exists on the y-axis. By
default, the value is displayed. This
charts.
Back to top

Number Formatting

147
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator String

148
Since v 3.2.2 - SR3 scales that generated after recursion? For
Since v 3.2.2 - SR3
page.
149
150
Since v 3.2
page.
Back to top

Font Properties


151
here.
here.
here.
Back to top

152
Tool-tip
chart.
Back to top





153
Percent)
154
by the chart.
155
and end of chart.
and top of chart.
Back to top

<set> element

of chart.
156
etc.
same.
Back to top
157


separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
158
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

Trend-lines
chart.
as under:
<trendLines>
159
</trendLines>
Value
102.
Value
startValue.
text.
of trend line.
160
each dash.
each dash gap.

1.6 Pie 3D Chart

SWF: Pie3D.swf
Chart Data Others
Chart Image
Chart Objects
Titles
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties

Pie 3D chart looks as under:
161

Sample XML / JSON for Pie 3D chart:
XML
JSON
<chart caption='Company Revenue' showPercentValues='1'>
</chart>
{
"chart":{
"showpercentvalues":"1"
},
"data":[{
"label":"Services",
"value":"26"
},
{
"label":"Hardware",
"value":"32"
},
{
"label":"Software",
162
"value":"42"
}
]
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y

163
DATALABELS DATALABELS refer to the pie-
labels of the chart.
Font
Shadow
Glow
Bevel
Blur

Font
Back to top


values are 1-5.
hex color
codes
separated
by
comma
e.g., <chart
164
item.
the chart.
chart.
165
feature.
Back to top

Chart Titles
Back to top

Chart Cosmetics
or not.
166
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
167
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
168
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

will show up.
plot.
169
charts.
Back to top

values.
startingAngle Number 0-360 By default, the pie chart starts from angle 0
degree i.e., the first pie slice starts plotting
from 0 degree angle. If you want to change
the starting angle of the chart, use this
attribute.

clockwise.
enableRotation Boolean 0/1 The pie charts have three modes: Slicing,
Rotation and Link. By default, a chart starts
in Slicing mode. If you need to enable
rotation from XML, set this attribute to 1.
But, when links are defined, the chart
170
pieInnerFaceAlpha Number 0-100 Alpha of the pie inner face
pieOuterFaceAlpha Number 0-100 Alpha of the pie outer face
pieYScale Number 30-80 This attribute alters the y-perspective of the
pie in percentage figures. 100 percent
means the full pie face is visible and 0
percent means only the side face is visible.
pieSliceDepth Number In Pixels This attribute controls the pie 3D Depth.
Back to top




between them.
171
pie/doughnut edge. This attribute will work
only when the attribute
enableSmartLabels is set to '0'.
the chart canvas.
ellipses.
Since v 3.2.1
Back to top

Number Formatting
172

2.5) page.
page.
2.5) page.
173
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

174
Since v 3.2.2 - SR3
page.
175
Back to top

Font Properties


etc.) on chart.
176
Back to top

Legend Properties

In pie / doughnut charts, the data label of each slice shows up in the legend of the chart. If you do not
need the legend, you can opt to hide the same.


showLegend
Since v 3.2
Boolean 0/1 Whether to show legend on the chart.
legendPosition
Since v 3.2
String BOTTOM
or
RIGHT
legendCaption
Since v 3.2
legendIconScale
Since v 3.2
Number Greater
than 0 and
less than
equal to 5

legendBgColor
Since v 3.2
legendBgAlpha Number 0-100 Background alpha for the legend.
177
Since v 3.2
legendBorderColor
Since v 3.2
Color Hex Code Border Color for the legend.
Since v 3.2
legendBorderAlpha
Since v 3.2
legendShadow
Since v 3.2
legendAllowDrag
Since v 3.2
the chart.
legendScrollBgColor
Since v 3.2
Since v 3.2
of the scroll bar.
Since v 3.2
reverseLegend
Since v 3.2
interactiveLegend
Since v 3.2
legend in your chart. When you click the
legend key of a sliced-in pie, it gets sliced
178
out and vice-versa.
legendNumColumns
Since v 3.2
Number Zero and
Positive
Integers
columns.

Since v 3.2
wrapping.
Back to top

Tool-tip
chart.
179
Back to top





the pie. If the sub-caption is not defined, it
controls the space between caption and top
of the pie. If neither caption, nor sub-
caption is defined, this padding does not
come into play.
180
Back to top

<set> element
graph and determines a set of data which will appear on the chart. In Pie chart each <set> element
represents a pie slice.
For a pie chart, a typical <set> element will look like:

of chart.
etc.
181
same.

1.7 Area 2D Chart

SWF: Area2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

182
Area 2D chart looks as under:

Sample XML / JSON for Area 2D chart:
XML
JSON


183

<trendLines>
</trendLines>

<styles>

<definition>
<style name='CanvasAnim' type='animation' param='_xScale' start='0'
duration='1' />
</definition>

<application>
</application>

</styles>

</chart>
{
"chart":{
"numberprefix":"$",
"showvalues":"0"
},
"data":[{
"label":"Jan",
"value":"420000"
},
{
"label":"Feb",
"value":"910000"
},
{
"label":"Mar",
"value":"720000"
},
184
{
"label":"Apr",
"value":"550000"
},
{
"label":"May",
"value":"810000"
},
{
"label":"Jun",
"value":"510000"
},
{
"label":"Jul",
"value":"680000"
},
{
"label":"Aug",
"value":"620000"
},
{
"label":"Sep",
"value":"610000"
},
{
"label":"Oct",
"value":"490000"
},
{
"label":"Nov",
"value":"530000"
},
{
"label":"Dec",
"value":"330000"
}
],
"trendlines":{
"line":[{
185
"color":"009933",
}
]
},
"styles": {
"definition": [
{
"param": "_xScale",
"start": "0",
"duration": "1"
}
],
"application": [
{
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
186
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Font
Shadow
Glow
_alpha
_x
_y
187
data plot. Bevel
Blur
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
188
interpretation.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
_alpha
_x
_y
189
Bevel
Blur
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
animation Boolea
n
palette Numbe
r
codes separated
by comma
190
accordingly.
chart XML.
n
when right clicked.
menu item.
n
details on this.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
191
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
staggerLines Numbe
r
line.
showValues Boolea 0/1 Sets the configuration whether data values will
192
n be displayed along with the data plot on chart.
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
r
adjustDiv Boolea
n
n
r
to y-axis name.
193
Link format.
n
yAxisMinValue Numbe
r
you.
yAxisMaxValue Numbe
r
you.
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

194
Back to top

Chart Cosmetics
195
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
background image.
196
right
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
or not.
197
specific vLine.
BR, CC Where to position the logo on the chart:
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics

These attributes let you configure how your plot (area in case of Area chart) will appear on the chart.

198
attributes.

will show up.
dashed.
dash.
199
dataplots and now you want a gradient that
showShadow Boolean 0/1 Whether to show shadow for the data plot.
plotFillColor Color Fill Color for the area (hex code)
Back to top

Anchors

On area charts, anchors (or marker points) are polygons which appear at the joint of two consecutive
lines/area points. These are indicators to show the position of data points.

In area charts, anchors are set transparent by default. In case you wish to show the anchor, use
anchorAlpha="100" attribute.

200
be the anchor size.
anchors.
background.
Back to top


color bands.


The zero plane is a 2D 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.

value > 0
201
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
202
dashed.
gap.
grid bands.
bands.
bands.
Back to top

Number Formatting

203
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

204
scaleSeparator
Since v 3.2.2 - SR3
String

Since v 3.2.2 - SR3
page.
205
206
Since v 3.2
page.
Back to top

Font Properties


207
here.
here.
here.
Back to top

208
Tool-tip
chart.
Back to top





209
210
canvasLeftMargin Number In Pixels
This attribute lets you control the space
by the chart.
211
and end of chart.
and top of chart.
Back to top

<set> element

of chart.
etc.
212
same.
anchorSides Number 3 or more If you want to configure data item specific
213
define the number of sides for the anchor of
that particular data item.
anchorRadius Number In Pixels If you want to configure data item specific
define the radius for the anchor of that
anchorBorderColor Color 0-100 If you want to configure data item specific
the border color for the anchor of that
anchorBorderThickness Number In Pixels If you want to configure data item specific
the border thickness for the anchor of that
anchorBgColor Color Hex Code If you want to configure data item specific
the background color for the anchor of that
anchorAlpha Number 0-100 If you want to configure data item specific
the alpha for the anchor of that particular
data item.
anchorBgAlpha Number 0-100 If you want to configure data item specific
the background alpha for the anchor of that
Back to top

214

separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
215
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
startValue Number Numeric The starting value for the trendline. Say, if
216
Value you want to plot a slanted trendline from
102.
Value
startValue.
text.
of trend line.
each dash.
217
each dash gap.

1.8 Doughnut 2D Chart

SWF: Doughnut2D.swf
Chart Data Others
Chart Image
Chart Objects
Titles
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties

Doughnut 2D chart looks as under:
218

Sample XML / JSON for Doughnut 2D chart:
XML
JSON

<chart caption='Company Revenue' showPercentageValues='1'>
</chart>

{
"chart":{
"showpercentagevalues":"1"
},
"data":[{
"label":"Services",
"value":"26"
},
{
219
"label":"Hardware",
"value":"32"
},
{
"label":"Software",
"value":"42"
}
]
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
DATAPLOT DATAPLOT refers to the actual Animation _alpha
220
Shadow
Glow
Bevel
Blur
_rotation
DATALABELS DATALABELS refer to the
doughnut labels of the data.
Font
Shadow
Glow
Bevel
Blur

Font
Back to top


values are 1-5.
hex color
codes
separated
221
by
comma
e.g., <chart
item.
the chart.
chart.
222
feature.
Back to top

Chart Titles
Back to top

Chart Cosmetics
or not.
223
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode String stretch,
tile, fit,
224
Since v3.2.2 fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
specific vLine.
225
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

226
will show up.
plot.
charts.
showShadow Boolean 0/1 Whether to show shadow for pie/doughnuts.
Back to top

values.
doughnutRadius Number In Pixels This attribute lets you explicitly set the
inner radius of the chart. FusionCharts
automatically calculates the best fit radius
for the chart. This attribute is useful if you
want to enforce one of your own values.
227
startingAngle Number 0-360 By default, the doughnut chart starts from
angle 0 degree i.e., the first doughnut slice
starts plotting from 0 degree angle. If you
want to change the starting angle of the
chart, use this attribute.

clockwise.
radius3D Number In Percent You can define the 3D Radius of chart in
percentage using this attribute. It basically
helps you set the bevel distance for the
pie/doughnut (if in 3D Lighting Mode).
enableRotation Boolean 0/1 The doughnut charts have three modes:
Slicing, Rotation and Link. By default, a
chart starts in Slicing mode. If you need to
enable rotation from XML, set this attribute
to 1. But, when links are defined, the chart
Back to top




228
pie/doughnut edge.
between them.
the chart canvas.
229
ellipses.
Since v 3.2.1
Back to top

Number Formatting

230
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

231
Since v 3.2.2 - SR3
page.
232
Back to top

Font Properties


233
etc.) on chart.
Back to top

Legend Properties



showLegend
Since v 3.2
Boolean 0/1 Whether to show legend for the chart (only
multi-series and combination charts).
legendPosition
Since v 3.2
String BOTTOM
or
RIGHT
legendCaption String You can add a caption for the entire
234
Since v 3.2
legendIconScale
Since v 3.2
Number Greater
than 0 and
less than
equal to 5

legendBgColor
Since v 3.2
legendBgAlpha
Since v 3.2
legendBorderColor
Since v 3.2
Since v 3.2
legendBorderAlpha
Since v 3.2
legendShadow
Since v 3.2
legendAllowDrag
Since v 3.2
the chart.
legendScrollBgColor
Since v 3.2
235
Since v 3.2
of the scroll bar.
Since v 3.2
reverseLegend
Since v 3.2
interactiveLegend
Since v 3.2
legendNumColumns
Since v 3.2
Number Zero and
Positive
Integers
columns.

Since v 3.2
wrapping.
Back to top

Tool-tip
236
chart.
Back to top





the doughnut. If the sub-caption is not
caption and top of the doughnut. If neither
237
Back to top

<set> element
For a doughnut chart, a typical <set> element will look like:

of chart.
238
etc.
same.
239
borderAlpha Color Hex Code If you want to set border alpha of individual

1.9 Doughnut 3D Chart

SWF: Doughnut3D.swf
Chart Data Others
Chart Image
Chart Objects
Titles
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<set> element
Plot Cosmetics
Number Formatting
Font Properties

Doughnut 3D chart looks as under:
240

Sample XML / JSON for Doughnut 3D chart:
XML
JSON

<chart caption='Company Revenue' showPercentageValues='1'>
</chart>
{
"chart":{
"showpercentagevalues":"1"
},
"data":[{
"label":"Services",
"value":"26"
},
{
"label":"Hardware",
"value":"32"
},
{
241
"label":"Software",
"value":"42"
}
]
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y

242
DATALABELS DATALABELS refer to the
doughnut labels of the data.
Font
Shadow
Glow
Bevel
Blur

Font
Back to top


values are 1-5.
hex color
codes
separated
by
comma
e.g., <chart
243
item.
the chart.
chart.
244
feature.
Back to top

Chart Titles
Back to top

Chart Cosmetics
or not.
245
between. See the gradient specification
page for more details.
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
246
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
specific vLine.
logoPosition String TL, TR, BL, Where to position the logo on the chart:
247
BR, CC TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

will show up.
248
plot.
charts.
Back to top

values.
doughnutRadius Number In Pixels This attribute lets you explicitly set the
inner radius of the chart. FusionCharts
automatically calculates the best fit radius
for the chart. This attribute is useful if you
want to enforce one of your own values.
startingAngle Number 0-360 By default, the doughnut chart starts from
angle 0 degree i.e., the first doughnut slice
starts plotting from 0 degree angle. If you
want to change the starting angle of the
249
chart, use this attribute.

clockwise.
enableRotation Boolean 0/1 The doughnut charts have three modes:
Slicing, Rotation and Link. By default, a
chart starts in Slicing mode. If you need to
enable rotation from XML, set this attribute
to 1. But, when links are defined, the chart
pieInnerFaceAlpha Number 0-100 Alpha of the pie inner face
pieOuterFaceAlpha Number 0-100 Alpha of the pie outer face
pieYScale Number 30-80 This attribute alters the y-perspective of the
pie in percentage figures. 100 percent
means the full pie face is visible and 0
percent means only the side face is visible.
pieSliceDepth Number In Pixels This attribute controls the pie 3D Depth.
Back to top




250
between them.
pie/doughnut edge.
the chart canvas.
ellipses.
useEllipsesWhenOverflow Boolean 0/1 When enabled, long data labels are
251
Since v 3.2.1 them from overflowing the chart
Back to top

Number Formatting

2.5) page.
252
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

253
Since v 3.2.2 - SR3
page.
254
Back to top

Font Properties


255
etc.) on chart.
Back to top

Legend Properties



showLegend
Since v 3.2
Boolean 0/1 Whether to show legend for the chart (only
multi-series and combination charts).
legendPosition
Since v 3.2
String BOTTOM
or
RIGHT
legendCaption
Since v 3.2
legendIconScale
Since v 3.2
Number Greater
than 0 and
256
less than
equal to 5

legendBgColor
Since v 3.2
legendBgAlpha
Since v 3.2
legendBorderColor
Since v 3.2
Since v 3.2
legendBorderAlpha
Since v 3.2
legendShadow
Since v 3.2
legendAllowDrag
Since v 3.2
the chart.
legendScrollBgColor
Since v 3.2
Since v 3.2
257
of the scroll bar.
Since v 3.2
reverseLegend
Since v 3.2
interactiveLegend
Since v 3.2
legendNumColumns
Since v 3.2
Number Zero and
Positive
Integers
columns.

Since v 3.2
wrapping.
Back to top

Tool-tip
258
chart.
Back to top





the doughnut. If the sub-caption is not
caption and top of the doughnut. If neither
259
Back to top

<set> element
For a doughnut chart, a typical <set> element will look like:

of chart.
260
etc.
same.

1.10 Multi-Series Column 2D Chart

SWF: MSColumn2D.swf
261
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<categories> element
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Multi-series Column 2D chart looks as under:

Sample XML /JSON for Multi-series Column 2D chart:
XML
JSON

<chart caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue'
262
showValues= '0'numberPrefix='$'>

<categories>
<category label='Jan' />
<category label='Feb' />
<category label='Mar' />
<category label='Apr' />
<category label='May' />
<category label='Jun' />
<category label='Jul' />
<category label='Aug' />
<category label='Sep' />
<category label='Oct' />
<category label='Nov' />
<category label='Dec' />
</categories>

<dataset seriesName='2006'>
<set value='27400' />
<set value='29800'/>
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='9800' />
<set value='11800' />
263
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>
</trendlines>

</chart>
{
"chart":{
"caption":"Business Results 2005 v 2006",
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
264
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"seriesname":"2006",
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
265
{
"value":"31800"
},
{
"value":"36700"
},
{
"value":"29700"
},
{
"value":"31900"
},
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
266
{
"value":"11800"
},
{
"value":"19700"
},
{
"value":"21700"
},
{
"value":"21900"
},
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
"displayvalue":"Target",
"showontop":"1"
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
267
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
268
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
LEGEND LEGEND is the object in which
the series names of all datasets
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
Animation
Font
_alpha
_x
269
any). Shadow
Glow
Bevel
Blur
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
_alpha
_x
_y
270
Bevel
Blur
Back to top


properties.
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
271
chart XML.
n
when right clicked.
menu item.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
272
chart.
slantLabels Boolea
n
labelStep Numbe
r
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
outside the column.
n
273
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
r
showShadow Boolea
n
0/1 Whether to show shadows for data plot.
adjustDiv Boolea
n
n
r
to y-axis name.
Link format.
274
n
yAxisMinValue Numbe
r
you.
yAxisMaxValue Numbe
r
you.
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

275
Back to top

Chart Cosmetics
or not.
276
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
image.
277
bottom
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
specific vLine.
278
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics
attributes.
279
itself.
will show up.
dashed.
dash.
280
Back to top

color bands.
value > 0
281
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
Back to top

282
Legend Properties
In multi-series charts, the series name of each dataset shows up in the legend of the chart. If you do not
showLegend Boolean 0/1 Whether to show legend on the chart.
legendIconScale
Since v 3.2
Number 0-5 Scaling of legend icon is possible starting
control the size of legend icon.
legendPosition String BOTTOM
or RIGHT
legendBgColor Color Hex Code Background color for the legend.
legendBorderThickness Number In Pixels Border thickness for the legend.
legendBorderAlpha Number 0-100 Border alpha for the legend.
legendShadow Boolean 0/1 Whether to show a shadow for legend.
legendAllowDrag Boolean 0/1 The legend can be made drag-able by
the chart.
legendScrollBgColor Color Hex Code If you've too many items on the legend, a
283
legendScrollBarColor Color Hex Code If you've too many items on the legend, a
of the scroll bar.
legendScrollBtnColor Color Hex Code If you've too many items on the legend, a
reverseLegend Boolean 0/1 You can reverse the ordering of datasets in
interactiveLegend
Since v 3.2
legend key, the dataplots associated with
that series are eliminated from the chart.
Re-clicking the key causes the dataplots to
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
If your chart contains multiple series, the
legend is displayed as a grid comprising of
multiple legend keys. With the help of this
attribute you can specify the number of
columns that are to be displayed in the
legend.
Since v 3.2
wrapping.
legendMarkerCircle
deprecated. Not applicable.
Boolean 0/1 Whether to use square legend keys or
circular ones.
Back to top

Number Formatting
284

2.5) page.
page.
2.5) page.
285
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

286
Since v 3.2.2 - SR3
page.
287
Since v 3.2
288
page.
Back to top

Font Properties
here.
289
here.
here.
Back to top

Tool-tip
seriesNameInToolTip Boolean 0/1 For multi-series charts, FusionCharts shows
the following information in tool tip (unless
tool text is explicitly defined): "Series
Name, Category Name, Data Value". This
attribute lets you control whether series
name will show up in tool tip or not.
chart.
290
Back to top

291
Percent)
legendPadding Number In Pixels Padding of legend from right/bottom side of
292
canvas
by the chart.
and end of chart.
and top of chart.
293
Back to top

The <categories> element lets you bunch together x-axis labels of the chart. For a multi-series chart,
it's necessary to provide data labels using <category> elements under <categories> element.
The following properties of <categories> element help you control the font properties of data labels.
font String Valid font
face
Lets you specify font face for the x-axis data
labels.
fontSize Number Lets you specify font size for the x-axis data
labels.
fontColor Color Hex Code Lets you specify font color for the x-axis
data labels.
Back to top

<category> element
Each <category> element represents an x-axis data label.
In multi-series charts, it's necessary to provide an equal number of <category> elements and data
items (<set> elements within each <dataset>). FusionCharts plots only those data items for which it
could find a respective <category> element.
You can specify the following attributes for <category> element:
of chart.
toolText String The label of each category shows up on the
x-axis. However, there might be cases
294
where you want to display short label (or
abbreviated label) on the axis and show the
full label as tool tip. This attribute lets you
specify the tool tip text for the label.
Back to top

In multi-series charts, it is used between <category> elements as under:

<categories>
<category label='Oct 2005' />
<category label='Nov 2005' />
<category label='Dec 2005' />
<category label='Jan 2006' />
<category label='Feb 2006' />
</categories>
separator line.
line.
appear as dashed.
295
dash.
dash gap.
shown.
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element
Each <dataset> element contains a series of data.
296
For example, if we're plotting a monthly sales comparison chart for 2 successive years, the first dataset
will contain the data for first year and the next one for the second year.
You can provide dataset level cosmetics so that all data within that dataset will be plotted in the same
color/alpha/etc.
Also, each dataset can be named using the seriesName attribute of <dataset> element. The series
name appears in the legend of the chart. In our previous example, the series name could have well been
2005 and 2006 for first and second dataset respectively.
Depending on the chart type, there are a number of properties which you can define for each
<dataset> element.
seriesName String Lets you specify the series name for a
particular dataset. For example, if you're
plotting a chart to indicate monthly sales
analysis for 2005 and 2006, the seriesName
for the first dataset will be 2005 and that of
the second will be 2006. The seriesName
of a dataset is shown in legend.
color Color Hex Code
(Or Comma
separated
list)
This attribute sets the color using which
columns, lines, area of that dataset will be
drawn. For column chart, you can specify a
list of comma separated hex codes to get a
gradient plot.
alpha String 0-100 or
Comma
Separated
List
This attribute sets the alpha (transparency)
of the entire dataset.
ratio String Comma
separated
list of ratios
If you've opted to show columns as
gradients, this attribute lets you control the
ratio of each color. See Advanced charting
> Using Gradients(See 2.2) page for more
details.
showValues Boolean 0/1 Whether to show the values for this dataset.
297
dashed Boolean 0/1 Whether this dataset will appear as dashed.
includeInLegend Boolean 0/1 Whether to include the seriesName of this
dataset in legend.
Back to top

<set> element
Each <set> element (child of <chart> or <dataset> element) represents a set of data which is to be
plotted on the graph and determines a set of data which will appear on the chart.
For a multi-series chart, it could look like:
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
In multi-series charts, you should again note that the number of <category> elements should be equal
to the number of data points in each data sets, i.e., if you mention twelve categories (twelve months),
the data for both years (2005 & 2006) should also contain twelve <set> elements (twelve rows of data).
etc.
color Color Hex Code For multi-series charts, you can define the
color of datasets at dataset level. However,
if you wish to highlight a particular data
element, you can specify its color at "set"
level using this attribute. This attribute
accepts hex color codes without #.
298
toolText String By default, FusionCharts shows the series
Name, Category Name and value as tool tip
text for that data item. But, if you want to
display more information for the data item
as tool tip, you can use this attribute to
specify the same.
This value over-rides the dataset level
value.
forecast or trend etc.). This value over-rides
the dataset level value.
alpha Number 0-100 For multi-series charts, you can define the
alpha of datasets at dataset level. However,
element, you can specify its alpha at "set"
level using this attribute.
Back to top

Trend-lines
299
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
startValue.
text.
300
of trend line.
each dash.
each dash gap.

1.11 Multi-Series Column 3D Chart

SWF: MSColumn3D.swf
Chart Data Others
Chart Image
Chart Objects
Sample XML Data
<category> element
<dataset> element
Number Formatting
Font Properties
Vertical Lines
Trend Lines
301
Chart Cosmetics
Legend
Tool-tip
<set> element
Plot Cosmetics

Multi-series Column 3D chart looks as under:

Sample XML / JSON for Multi-series Column 3D chart:
XML
JSON


<categories>
302
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>
303

<trendlines>
<line startValue='26000' color='91C728' displayValue='Target' />
</trendlines>

</chart>
{
"chart":{
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
304
"label":"Sep"
},
{
"label":"Oct"
},
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
},
305
{
"value":"29700"
},
{
"value":"31900"
},
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
},
306
{
"value":"21700"
},
{
"value":"21900"
},
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
CANVAS In 2D Charts, CANVAS refers to Animation _alpha
307
Shadow
Glow
Bevel
Blur
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
308
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
309
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
310
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
311
menu item.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
312
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
outside the column.
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
yAxisValuesStep Numbe 1 or above By default, all div lines show their values.
313
r However, you can opt to skip every x(th) div
showShadow Boolea
n
adjustDiv Boolea
n
n
r
to y-axis name.
Link format.
maxColWidth Numbe
r
n
n
314
yAxisMinValue Numbe
r
you.
yAxisMaxValue Numbe
r
you.
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

315
Back to top

Chart Cosmetics
or not.
details.
316
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
317
bgImageScale
Since v3.2.2
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
318
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics
attributes.
will show up.
319
Back to top

color bands.



value > 0
as dash.
320
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
Back to top

Legend Properties
legendIconScale
Since v 3.2
or RIGHT
321
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
322
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

323
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

324
Since v 3.2.2 - SR3
page.
325
326
Since v 3.2
page.
Back to top

Font Properties
327
here.
here.
here.
Back to top

Tool-tip
328
chart.
Back to top

329
Percent)
330
canvas
by the chart.
331
and end of chart.
and top of chart.
Back to top

face
labels.
labels.
data labels.
Back to top

332
<category> element
of chart.
Back to top


<categories>
333
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
334
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element
color/alpha/etc.
<dataset> element.
335
(Or Comma
separated
list)
drawn.
Comma
Separated
List
dataset in legend.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
336
etc.
specify the same.
value.
Back to top
337

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
startValue.
text.
338
of trend line.
each dash.
each dash gap.

1.12 Multi-Series Line 2D Chart

SWF: MSLine.swf
Chart Data Others
Chart Image
Chart Objects
Sample XML Data
<category> element
<dataset> element
Number Formatting
Font Properties
Vertical Lines
Trend Lines
339
Chart Cosmetics
Anchors
Legend
Tool-tip
<set> element
Plot Cosmetics

Multi-series Line chart looks as under:

Sample XML / JSON for Multi-series Line chart:
XML
JSON


<categories>
340
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
341
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart":{
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
342
{
"label":"Sep"
},
{
"label":"Oct"
},
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
343
},
{
"value":"29700"
},
{
"value":"31900"
},
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
344
},
{
"value":"21700"
},
{
"value":"21900"
},
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
"showontop":"1"
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
_alpha
_x
_y
_xScale
345
Blur _yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Font
_alpha
_x
346
data plot.
Shadow
Glow
Bevel
Blur
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
Animation
Shadow
Glow
_alpha
_y
_xScale
347
determined value. Bevel
Blur
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
interpretation.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
XAXISNAME XAXISNAME refers to the x-axis Animation _alpha
348
title of the chart. Font
Shadow
Glow
Bevel
Blur
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
animation Boolea
n
palette Numbe
r
349
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
menu item.
n
350
details on this.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
351
staggerLines Numbe
r
line.
showValues Boolea
n
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
0/1 Whether to show chart limit values.If not
352
rides this value.
n
rides this value.
r
showShadow Boolea
n
adjustDiv Boolea
n
n
r
to y-axis name.
Link format.
n
353
yAxisMinValue Numbe
r
you.
yAxisMaxValue Numbe
r
you.
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

354
Back to top

Chart Cosmetics
or not.
details.
355
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
356
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
specific vLine.
357
TR
BL
BR
CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics
attributes.
be drawn.
358
the chart as dash.
Back to top

Anchors
be the anchor size.
359
anchors.
background.
Back to top

color bands.
dashed.
360
gap.
grid bands.
bands.
bands.
value > 0
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
361
charts.
bands.
Back to top

Legend Properties
legendIconScale
Since v 3.2
or
RIGHT
362
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
363
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

364
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

365
Since v 3.2.2 - SR3
page.
366
367
Since v 3.2
page.
Back to top

Font Properties
368
here.
here.
here.
Back to top

Tool-tip
369
chart.
Back to top

370
371
canvas
by the chart.
372
and end of chart.
and top of chart.
Back to top

face
labels.
labels.
data labels.
Back to top

<category> element
373
of chart.
Back to top


<categories>
</categories>
374
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
right.
center,
vLine label.
375
right
middle,
bottom
vLine label.
Back to top

<dataset> element
color/alpha/etc.
<dataset> element.
dataset in legend.
(Or Comma
separated
list)
376
gradient plot.
Comma
Separated
List
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
This attribute lets you adjust the vertical
alignment of data values for all dataplots in
the dataset. The alignment is set with
respect to the position of the dataplots on
the chart. By default, the attribute is set to
data value is determined automatically
based on the position of each plot point. In
ABOVE mode, data values are displayed
above the plot points unless a plot point is
too close to the upper edge of the canvas.
While in BELOW mode, data values are
displayed below the plot points unless a plot
point is too close to the lower edge of the
canvas. The attribute will function only if
showValue attribute is set to 1 in this
particular dataset.
drawAnchors Boolean 0/1 Whether to draw anchors for the particular
dataset. If the anchors are not shown, then
the tool tip and links won't work for the
dataset.
anchorSides Number 3-20 Sets the number of sides that the anchors of
the particular dataset will have. For e.g., an
anchor with 3 sides will represent a triangle,
with 4 it will be a square and so on.
the anchors of the particular dataset.
377
Greater the radius, bigger will be the anchor
size.
anchorBorderColor Color Hex Code Lets you set the border color of anchors of
the particular dataset.
anchorBorderThickness Number In Pixels Helps you set border thickness of anchors of
anchors of the particular dataset.
anchorAlpha Number 0-100 Helps you set the alpha of entire anchors of
the particular dataset. If you need to hide
the anchors for the dataset but still enable
tool tips, set this as 0.
background of the particular dataset.
lineThickness Number In Pixels Thickness of the lines for the particular
dataset.
lineDashLen Number In Pixels If the lines are to be shown as dash for the
particular dataset, this attribute defines the
length of dash.
lineDashGap Number In Pixels If the lines are to be shown as dash for the
length of dash gap.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
378
.... and so on ....
</dataset>
etc.
379
specify the same.
value.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
edge of the canvas.
anchorSides Number 3-20 Lets you specify "set" specific sides of the
anchor.
anchorRadius Number In Pixels Lets you specify "set" specific radius (in
pixels) of the anchor.
anchorBorderColor Color Hex Code Lets you specify "set" specific border color
of the anchor.
anchorBorderThickness Number In Pixels Lets you specify "set" specific border
thickness of the anchor.
380
anchorBgColor Color Hex Code Lets you specify "set" specific background
color of the anchor.
anchorAlpha Number 0-100 Lets you specify "set" specific alpha of the
anchor.
anchorBgAlpha Number 0-100 Lets you specify "set" specific alpha of the
anchor background.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
endValue Number Numeric The ending y-axis value for the trendline.
381
Value Say, if you want to plot a slanted trendline
startValue.
text.
of trend line.
each dash.
each dash gap.
382

1.13 Multi-Series Area 2D Chart

SWF: MSArea.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Multi-series Area 2D chart looks as under:
383

Sample XML / JSON for Multi-series Area 2D chart:
XML
JSON


<categories>
384
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart":{
385
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
{
"label":"Nov"
},
{
386
"label":"Dec"
}
]
}
],
"dataset":[{
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
},
{
"value":"29700"
},
{
"value":"31900"
},
{
"value":"34800"
},
387
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
},
{
"value":"21700"
},
{
"value":"21900"
},
{
"value":"22900"
},
388
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
"showontop":"1"
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
389
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
390
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
391
interpretation.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
_alpha
_x
_y
392
Bevel
Blur
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
animation Boolea
n
palette Numbe
r
codes separated
by comma
393
accordingly.

chart XML.
n
when right clicked.
menu item.
n
details on this.
showLabels Boolea
n
nce v 3.2
WRAP
394
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
staggerLines Numbe
r
line.
395
showValues Boolea
n
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
r
showShadow Boolea
n
adjustDiv Boolea
n
n
396
r
to y-axis name.
Link format.
n
yAxisMinValue Numbe
r
you.
yAxisMaxValue Numbe
r
you.
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top
397

Back to top

Chart Cosmetics
or not.
398
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
399
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
400
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics
401
attributes.
will show up.
dashed.
dash.
dataplots and now you want a gradient that
402
Back to top

Anchors
be the anchor size.
anchors.
403
background.
Back to top

color bands.
value > 0
as dash.
404
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
dashed.
gap.
405
grid bands.
bands.
bands.
Back to top

Legend Properties
or RIGHT
legendIconScale
Since v 3.2
406
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
407
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

408
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

409
Since v 3.2.2 - SR3
page.
410
Since v 3.2
411
page.
Back to top

Font Properties
412
here.
here.
here.
Back to top

Tool-tip
413
chart.
Back to top

414
415
canvas

by the chart.

and end of chart.
and top of chart.
416
Back to top

face
labels.
labels.
data labels.
Back to top

<category> element
of chart.
417
Back to top


<categories>
</categories>
separator line.
line.
418
appear as dashed.
dash.
dash gap.
shown.
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top
419

<dataset> element
color/alpha/etc.
<dataset> element.
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
420
dataset in legend.
dataset.
size.
showPlotBorder Boolean 0/1 Whether to show the border of this dataset.
plotBorderColor Color Color for data plot border of this dataset
plotBorderThickness Number 0-5 (Pixels) Thickness for data plot border of this
dataset
421
plotBorderAlpha Number 0-100 Alpha for data plot border of this dataset
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
etc.
422
specify the same.
value.
anchor.
of the anchor.
423
anchor.
anchor background.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
424
startValue.
text.
of trend line.
each dash.
each dash gap.
425

1.14 Multi-Series Bar 2D Chart

SWF: MSBar2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Multi-series Bar 2D chart looks as under:
426

Sample XML / JSON for Multi-series Bar 2D chart:
XML
JSON


<categories>
427
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

428
</chart>
{
"chart":{
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
429
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
},
{
"value":"29700"
},
{
"value":"31900"
430
},
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
},
{
"value":"21700"
},
{
"value":"21900"
431
},
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
"showontop":"1"
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
_alpha
_x
_y
_xScale
432
Blur _yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_yScale
Animation
Font
_alpha
433
show up. Shadow
Glow
Bevel
Blur
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Shadow
Glow
Bevel
_alpha
_x
_y
_xScale
434
Blur
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


435
properties.
animation Boolea
n
values are 1-5.
hex color
codes
separate
d by
comma
e.g., <chart
n
0/1 Setting this to 1 shows up a custom context menu
text and can be linked to your Url. For e.g., you
436
item.
showLabels Boolea
n
above
w
Since v 3.2.1
Boolea
n
showValues Boolea
n
n
437
n
showLimits Boolea
n
0/1 Whether to show chart limit values. If not specified
n
above
showShadow Boolea
n
adjustDiv Boolea
n
n
Pixels)
axis name.
438
n
feature.
n
the chart.
centerXaxisName
Since v 3.2.2
Boolea
n
Back to top

439
Back to top

Chart Cosmetics
or not.
440
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign String left,
middle,
441
Since v3.2.2 right background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
specific vLine.
442
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics
attributes.
useRoundEdges Boolean 0/1 If you wish to plot bars with round edges
443
bars, you'll have to over-ride the shadow
itself.
will show up.
dashed.
dash.
444
bars and now you want a gradient that ends
in white. You need to specify FFFFFF (white)
as this color and the chart will now draw
plots as gradient.
Back to top

color bands.
value > 0
445
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
grid bands.
Back to top

Legend Properties
446
or RIGHT
legendIconScale
Since v 3.2
the chart.
447
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting
448

2.5) page.
page.
2.5) page.
449
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

450
Since v 3.2.2 - SR3
page.
451
Since v 3.2
page.
452
Back to top

Font Properties
here.
453
here.
here.
Back to top

Tool-tip
chart.
Back to top

454
shown).
shown).
455
textboxes.
Percent)
80.
canvas
456
by the chart.
and end of chart.
and top of chart.
Back to top

457
face
labels.
labels.
data labels.
Back to top

<category> element
of chart.
458
Back to top

height of the chart, thereby segregating data into different blocks. In case of bar charts, they are
horizontal and run through the width of chart.

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
459
dash gap.
shown.
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element
460
color/alpha/etc.
<dataset> element.
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
ratio String Comma
separated
list of ratios
details.
461
dataset in legend.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
etc.
462
specify the same.
value.
Back to top

Trend-lines
chart.
463
as under:
<trendLines>
</trendLines>
Value
102.
Value
startValue.
text.
464
of trend line.
each dash.
each dash gap.

1.15 Multi-Series Bar 3D Chart

SWF: MSBar3D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Multi-series Bar 3D chart looks as under:
465

Sample XML / JSON for Multi-series Bar 3D chart:
XML
JSON


<categories>
466
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
<line startValue='26000' color='91C728' displayValue='Target' />
</trendlines>

467
</chart>
{
"chart":{
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
468
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
},
{
"value":"29700"
},
{
"value":"31900"
469
},
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
},
{
"value":"21700"
},
{
"value":"21900"
470
},
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
_alpha
471
Blur
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
_alpha
472
show up. Shadow
Glow
Bevel
Blur
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
Animation _alpha
473
vertical separator lines. Font
Shadow
Glow
Bevel
Blur
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
474
animation Boolea
n
values are 1-5.
hex color
codes
separate
d by
comma
e.g., <chart
n
item.
475
showLabels Boolea
n
above
w
Since v 3.2.1
Boolea
n
showValues Boolea
n
n
n
476
above
showShadow Boolea
n
adjustDiv Boolea
n
n
Pixels)
axis name.
n
feature.
477
maxBarHeight Number In Pixels Maximum allowed bar height.
n
barDepth Number In Pixels By default, FusionCharts automatically allots a 3D
depth to each bar, based on the available space.
However, if you want to specify a custom depth (in
pixels) for any bar, you can use this attribute.
n
the chart.
centerXaxisName
Since v 3.2.2
Boolea
n
Back to top

478
Back to top

Chart Cosmetics
or not.
479
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
background image.
480
right
bgImageScale
Since v3.2.2
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
481
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics
attributes.
overlapBars Boolean Whether to overlap bars over each other to
give a richer 3D look. If there are too many
bars on the chart, it will automatically
overlap.
will show up.
482
Back to top

color bands.
value > 0
Number of vertical axis division lines that
as dash.
483
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
Back to top

Legend Properties
or RIGHT
legendIconScale
Since v 3.2
484
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
485
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

486
formatNumberScale is set to 1, 10434
will become 1.04K (with decimalPrecision
set to 2 places). Same with numbers in
millions - an M will be added at the end.
Charting > Number Formatting > Number
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

487
numberSuffix String Character Using this attribute, you could add prefix
Since v 3.2.2 - SR3
page.
488
489
Since v 3.2
page.
Back to top

Font Properties
490
here.
here.
here.
Back to top

Tool-tip
491
chart.
Back to top

pixels, until the attribute itself suggests some other scale (like plotSpacePercent).
492
x-axis title and canvas end.
the y-axis title and y-axis values.
textboxes.
Percent)
between two bar. By default, the spacing is
80.
493
canvasPadding Number In Pixels Allows you to set empty space on the top
and bottom side of bars on the chart canvas
canvas
by the chart.
494
and end of chart.
and top of chart.
Back to top

face
labels.
labels.
data labels.
Back to top

495
<category> element
of chart.
Back to top


<categories>
496
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
497
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element
color/alpha/etc.
<dataset> element.
498
(Or Comma
separated
list)
drawn.
Comma
Separated
List
dataset in legend.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
value.
499
etc.
color Color Hex Code For multi-series and combination charts, you
can define the color of datasets at dataset
level. However, if you wish to highlight a
particular data element, you can specify its
color at "set" level using this attribute. This
specify the same.
Back to top
500

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
each dash gap.
Value
102.
Value
startValue.
501
text.
of trend line.
each dash.

1.16 Stacked Column 2D Chart

SWF: StackedColumn2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

502
Stacked Column 2D chart looks as under:

Sample XML /JSON for Stacked Column 2D chart:
XML
JSON

<chart caption='Company Revenue' xAxisName='Month' yAxisName='Revenue' showValues=
'0'numberPrefix='$'>

<categories>
503
</categories>

<dataset seriesName='Product A'>
<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<dataset seriesName='Product B'>
<set value='11000' />
<set value='11800' />

<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

</chart>
504
{
"chart":{
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
{
505
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"seriesname":"Product A",
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
},
{
"value":"29700"
},
{
"value":"31900"
},
506
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"seriesname":"Product B",
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
},
{
"value":"21700"
},
{
"value":"21900"
},
507
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
"showontop":"1"
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
508
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
_alpha
_y
_xScale
509
Bevel
Blur
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
510
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


511
properties.
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
512
menu item.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
513
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
r
showShadow Boolea 0/1 Whether to show shadows for data plot.
514
n
adjustDiv Boolea
n
n
r
to y-axis name.
Link format.
showSum Boolea
n
0/1 If you want to show sum of all the columns in a
given stacked column, set this attribute to 1.
n
yAxisMinValue
Since v 3.2
Numbe
r
you.
yAxisMaxValue Numbe This attribute helps you explicitly set the upper
515
r limit of the chart. If you don't specify this
you.
stack100Percent
Since v 3.2
Boolea
n
0/1 Setting this attribute to 1 helps in depicting
the values in percentage figures.
showPercentValues
Since v 3.2
Boolea
n
0/1 Whether to show percentage figures in data
values of the chart.
showPercentInToolTip
Since v 3.2
Boolea
n
0/1 Whether to show percentage figures in tool tip.
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

Back to top

Chart Cosmetics
516
or not.
details.
details.
517
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
518
commas.
for gradients.
border.
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
519
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics
attributes.
useRoundEdges Boolean 0/1 If you wish to plot columns with round edges
520
itself.
will show up.
dashed.
dash.
521
Back to top

color bands.
value > 0
as dash.
522
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
Back to top

Legend Properties
In stacked charts, the series name of each dataset shows up in the legend of the chart. If you do not
523
or RIGHT
legendIconScale
Since v 3.2
the chart.
of the scroll bar.
524
reverseLegend Boolean 0/1 In a stacked chart, you can reverse the
ordering of datasets in the legend by
setting this attribute to 1.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

525
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion Number

526
Since v 3.2.2 - SR3 recursive scaling? -1 completes the entire
scaleSeparator
Since v 3.2.2 - SR3
String

527
Since v 3.2.2 - SR3
page.
528
Since v 3.2
page.
Back to top

Font Properties
529
here.
here.
here.
530
Back to top

Tool-tip
seriesNameInToolTip Boolean 0/1 For stacked charts, FusionCharts shows the
following information in tool tip (unless tool
text is explicitly defined): "Series Name,
Category Name, Data Value". This attribute
lets you control whether series name will
show up in tool tip or not.
chart.
Back to top




531

532
Percent)
canvas
533
by the chart.
and end of chart.
and top of chart.
Back to top


The <categories> element lets you bunch together x-axis labels of the chart. For a stacked chart, it's
necessary to provide data labels using <category> elements under <categories> element.

534
face
labels.
labels.
data labels.
Back to top

<category> element
In stacked charts, it's necessary to provide an equal number of <category> elements and data items
(<set> elements within each <dataset>). FusionCharts plots only those data items for which it could
find a respective <category> element.
of chart.
Back to top

535
In stacked charts, it is used between <category> elements as under:

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
536
shown.
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.

537

<dataset> element.
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
ratio String Comma
separated
list of ratios
details.
dataset in legend.
538
Back to top

<set> element
For a stacked chart, it could look like:
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
In stacked charts, you should again note that the number of <category> elements should be equal to
the number of data points in each data sets, i.e., if you mention twelve categories (twelve months), the
data for both years (2005 & 2006) should also contain twelve <set> elements (twelve rows of data).
etc.
color Color Hex Code For stacked charts, you can define the color
of datasets at dataset level. However, if you
wish to highlight a particular data element,
you can specify its color at "set" level using
this attribute. This attribute accepts hex
color codes without #.
539
specify the same.
value.
alpha Number 0-100 For stacked charts, you can define the alpha
you can specify its alpha at "set" level using
this attribute.
Back to top

Trend-lines
chart.
540
as under:
<trendLines>
</trendLines>
Value
102.
Value
startValue.
text.
of trend line.
541
each dash.
each dash gap.

1.17 Stacked Column 3D Chart

SWF: StackedColumn3D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines
542

Stacked Column 3D chart looks as under:

Sample XML / JSON for Stacked Column 3D chart:
XML
JSON


<categories>
543
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
<line startValue='42000' color='91C728' displayValue='Target'/>
</trendlines>

</chart>
544
{
"chart":{
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
{
545
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
},
{
"value":"29700"
},
{
"value":"31900"
},
546
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
},
{
"value":"21700"
},
{
"value":"21900"
},
547
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
548
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
show up.
Animation
Font
Shadow
Glow
Bevel
_alpha
549
Blur
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
_alpha
550
Bevel
Blur
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
animation Boolea
n
551
palette Numbe
r
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
menu item.
552
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
553
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
r
showShadow Boolea
n
adjustDiv Boolea
n
554
n
r
to y-axis name.
Link format.
maxColWidth Numbe
r
n
showSum Boolea
n
n
yAxisMinValue
Since v 3.2
Numbe
r
you.
yAxisMaxValue Numbe
r
555
you.
stack100Percent
Since v 3.2
Boolea
n
showPercentValues
Since v 3.2
Boolea
n
Since v 3.2
Boolea
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

Back to top

Chart Cosmetics
556
or not.
details.
details.
bgImage
or
557
bgSWF - deprecated domain as the chart.
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
558
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
559
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

will show up.
Back to top

560

color bands.



value > 0
as dash.
on the chart.
561
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
Back to top

Legend Properties



or RIGHT
legendIconScale
Since v 3.2
562
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
563
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

564
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

565
Since v 3.2.2 - SR3
page.
566
forceYAxisValueDecimals Boolean 0/1 Whether to forcefully attach decimal
567
Since v 3.2 you limit the maximum number of decimal
page.
Back to top

Font Properties


568
here.
here.
here.
Back to top

Tool-tip
569
chart.
Back to top





canvas
570
Percent)
571
by the chart.
572
and end of chart.
and top of chart.
Back to top



face
labels.
labels.
data labels.
Back to top
573

<category> element
of chart.
Back to top


<categories>
574
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
575
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.


<dataset> element.
576
(Or Comma
separated
list)
drawn.
Comma
Separated
List
dataset in legend.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
577
etc.
specify the same.
value.
578
this attribute.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
startValue.
579
text.
of trend line.
each dash.
each dash gap.

1.18 Stacked Area 2D Chart

SWF: StackedArea2D.swf
Chart Data Others
580
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Stacked Area 2D chart looks as under:

Sample XML / JSON for Stacked Area 2D chart:
XML
JSON

<chart caption='Company Revenue' xAxisName='Month' yAxisName='Revenue' showValues= '0'
numberPrefix='$'>

581
<categories>
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
582
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart": {
"caption": "Company Revenue",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
583
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesname": "Product A",
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
"value": "29600"
},
{
584
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
},
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"seriesname": "Product B",
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
},
{
"value": "11000"
},
585
{
"value": "9800"
},
{
"value": "11800"
},
{
"value": "19700"
},
{
"value": "21700"
},
{
"value": "21900"
},
{
"value": "22900"
},
{
"value": "20800"
}
]
}
],
"trendlines": [
{
"line": [
{
"startvalue": "42000",
"color": "91C728",
"displayvalue": "Target",
"showontop": "1"
}
]
}
]
}
Back to top

586
Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
_alpha
_x
_y
587
Bevel
Blur
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
_alpha
_x
_y
588
Glow
Bevel
Blur
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
interpretation.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
589
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


590
properties.
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
591
menu item.
n
details on this.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
592
labelStep Numbe
r
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
n
593
rides this value.
r
showShadow Boolea
n
adjustDiv Boolea
n
n
r
to y-axis name.
Link format.
n
yAxisMinValue
Since v 3.2
Numbe
r
594
you.
yAxisMaxValue Numbe
r
you.
stack100Percent
Since v 3.2
Boolea
n
showPercentValues
Since v 3.2
Boolea
n
Since v 3.2
Boolea
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

595
Back to top

Chart Cosmetics
or not.
details.
596
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
597
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
specific vLine.
598
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

will show up.
599
dashed.
dash.
Back to top

Anchors

600


be the anchor size.
anchors.
background.
Back to top


601
color bands.



dashed.
gap.
grid bands.
bands.
bands.
value > 0
602
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
Back to top
603

Legend Properties



or RIGHT
legendIconScale
Since v 3.2
the chart.
604
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top
605

Number Formatting

2.5) page.
page.
606
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

607
Since v 3.2.2 - SR3
page.
608
Since v 3.2
609
page.
Back to top

Font Properties


610
here.
here.
here.
Back to top

Tool-tip
611
chart.
Back to top





612
613
canvas
by the chart.
and end of chart.
and top of chart.
614
Back to top



face
labels.
labels.
data labels.
Back to top

<category> element
of chart.
615
Back to top


<categories>
</categories>
separator line.
line.
appear as dashed.
616
dash.
dash gap.
shown.
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element
617



color/alpha/etc.


<dataset> element.
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
618
includeInLegend Boolean 0/1 Whether to include the series name of this
dataset in legend.
dataset
dataset.
size.
619
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
etc.
620
specify the same.
value.
this attribute.
anchor.
621
of the anchor.
anchor.
anchor background.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
622
startValue.
text.
of trend line.
each dash.
each dash gap.
623

1.19 Stacked Bar 2D Chart

SWF: StackedBar2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Stacked Bar 2D chart looks as under:
624

Sample XML / JSON for Stacked Bar 2D chart:
XML
JSON

numberPrefix='$'>

<categories>
625
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

626
</chart>
{
"chart": {
"showvalues": "0",
"numberprefix": "$"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
627
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
},
{
628
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
},
{
"value": "11000"
},
{
"value": "9800"
},
{
"value": "11800"
},
{
"value": "19700"
},
629
{
"value": "21700"
},
{
"value": "21900"
},
{
"value": "22900"
},
{
"value": "20800"
}
]
}
],
"trendlines": [
{
"line": [
{
"color": "91C728",
"showontop": "1"
}
]
}
]
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
_alpha
_x
630
Glow
Bevel
Blur
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
DIVLINES DIVLINES are horizontal or Animation _alpha
631
Shadow
Glow
Bevel
Blur
_x
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
_alpha
_x
632
vertical divisional lines. Glow
Bevel
Blur
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
_alpha
_x
_y
633
Blur
Back to top


properties.
animation Boolea
n
values are 1-5.
hex color
codes
separate
d by
comma
e.g., <chart
634
n
item.
showLabels Boolea
n
above
useEllipsesWhenOverflo Boolea 0/1 This attribute lets you set whether the overflowing
635
w
Since v 3.2.1
n data labels will be truncated by adding ellipses.
showValues Boolea
n
n
showLimits Boolea
n
0/1 Whether to show chart limit values. If not specified
n
above
showShadow Boolea
n
adjustDiv Boolea
n
n
636
Pixels)
axis name.
showSum Boolea
n
0/1 If you want to show the sum of all bars in a given
stacked bar, set this attribute to 1.
n
feature.
yAxisMinValue
Since v 3.2
Number This attribute helps you explicitly set the lower
stack100Percent
Since v 3.2
Boolea
n
0/1 Setting this attribute to 1 helps in depicting the
values in percentage figures.
showPercentValues
Since v 3.2
Boolea
n
0/1 Whether to show percentage figures in data values
of the chart.
Since v 3.2
Boolea
n
centerXaxisName
Since v 3.2.2
Boolea
n
Back to top

637
Back to top

Chart Cosmetics
or not.
between. See the gradient specification
page for more details.
638
alpha(s) separated by comma. See the
gradient specification page for more details.
color constituent. See the gradient
specification page for more details.
case of a gradient. See the gradient
specification page for more details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
639
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
640
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


641
attributes.

itself.
will show up.
dashed.
642
dash.
Back to top


color bands.



643
value > 0
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
grid bands.
644
Back to top

Legend Properties



or RIGHT
legendIconScale
Since v 3.2
645
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
minimiseWrappingInLegend Boolean 0/1 Whether to minimize legend item text
646
Since v 3.2 wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

places). Same with numbers in millions - a
2.5) page.
647
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

648
Since v 3.2.2 - SR3
page.
649
Since v 3.2
650
page.
Back to top

Font Properties


651
here.
here.
here.
Back to top

Tool-tip
652
chart.
Back to top





shown).
shown).
653
Percent)
80.
654
canvas
by the chart.
and end of chart.
655
and top of chart.
Back to top



face
labels.
labels.
data labels.
Back to top

<category> element
656
of chart.
Back to top


<categories>
</categories>
657
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
right.
center,
658
right vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.


<dataset> element.
(Or Comma
separated
list)
659
gradient plot.
Comma
Separated
List
ratio String Comma
separated
list of ratios
details.
dataset in legend.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
660
etc.
specify the same.
value.
661
this attribute.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
662
startValue.
text.
of trend line.
each dash.
each dash gap.

1.20 Stacked Bar 3D Chart

SWF: StackedBar3D.swf
663
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Stacked Bar 3D chart looks as under:

Sample XML /JSON for Stacked Bar 3D chart:
664
XML
JSON


<categories>
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

665
<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart":{
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
666
},
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"data":[{
"value":"27400"
},
{
"value":"29800"
},
{
"value":"25800"
},
{
"value":"26800"
},
{
667
"value":"29600"
},
{
"value":"32600"
},
{
"value":"31800"
},
{
"value":"36700"
},
{
"value":"29700"
},
{
"value":"31900"
},
{
"value":"34800"
},
{
"value":"24800"
}
]
},
{
"data":[{
"value":"10000"
},
{
"value":"11500"
},
{
"value":"12500"
},
{
"value":"15000"
},
{
668
"value":"11000"
},
{
"value":"9800"
},
{
"value":"11800"
},
{
"value":"19700"
},
{
"value":"21700"
},
{
"value":"21900"
},
{
"value":"22900"
},
{
"value":"20800"
}
]
}
],
"trendlines":{
"line":[{
"color":"91C728",
}
]
}
}
Back to top

Chart Objects

669
Parameters
Supported
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
DATAVALUES DATAVALUES refer to the plot Animation _alpha
670
data plot.
Font
Shadow
Glow
Bevel
Blur
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Font
_alpha
_x
671
any). Shadow
Glow
Bevel
Blur
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
_alpha
_x
_y
672
Bevel
Blur
Back to top


properties.
animation Boolea
n
values are 1-5.
hex color
codes
separate
d by
comma
e.g., <chart
673
n
item.
showLabels Boolea
n
above
674
w
Since v 3.2.1
Boolea
n
showValues Boolea
n
n
n
n
feature.
yAxisMinValue
Since v 3.2
Number This attribute helps you explicitly set the lower
maxBarHeight Number In Pixels Maximum allowed bar height.
Pixels)
axis name.
675
above
showShadow Boolea
n
adjustDiv Boolea
n
n
n
barDepth Number In Pixels By default, FusionCharts automatically allots a 3D
depth to each bar, based on the available space.
However, if you want to specify a custom depth (in
pixels) for any bar, you can use this attribute.
showSum Boolea
n
0/1 Whether to show the sum of each stacked bar along
its side.
stack100Percent
Since v 3.2
Boolea
n
0/1 Setting this attribute to 1 helps in depicting the
values in percentage figures.
showPercentValues
Since v 3.2
Boolea
n
0/1 Whether to show percentage figures in data values
of the chart.
showPercentInToolTip Boolea 0/1 Whether to show percentage figures in tool tip.
676
Since v 3.2 n
centerXaxisName
Since v 3.2.2
Boolea
n
Back to top

Back to top

Chart Cosmetics
or not.
677
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
678
none chart area, without maintaining original
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
679
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

680
Data Plot Cosmetics


attributes.

overlapBars Boolean Whether to overlap bars over each other to
give a richer 3D look. If there are too many
bars on the chart, it will automatically
overlap.
will show up.
Back to top


color bands.


681

value > 0
Number of vertical axis division lines that
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
682
Back to top

Legend Properties



or RIGHT
legendIconScale
Since v 3.2
683
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
684
Back to top

Number Formatting

page.
685
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

686
Since v 3.2.2 - SR3
page.
687
Since v 3.2
688
page.
Back to top

Font Properties


689
here.
here.
here.
Back to top

Tool-tip
690
chart.
Back to top





x-axis title and canvas end.
the y-axis title and y-axis values.
691
canvasPadding Number In Pixels Allows you to set empty space on the top
and bottom side of bars on the chart canvas
canvas
692
by the chart.
and end of chart.
and top of chart.
Back to top



693
face
labels.
labels.
data labels.
Back to top

<category> element
of chart.
Back to top

694

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
695
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.

696

<dataset> element.
(Or Comma
separated
list)
drawn.
Comma
Separated
List
dataset in legend.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
697
.... and so on ....
</dataset>
value.
this attribute.
etc.
specify the same.
698
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
each dash gap.
Value
699
102.
Value
startValue.
text.
of trend line.
each dash.

700
1.21 2D Dual Y Combination Chart

SWF: MSCombiDY2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

2D Dual Y Combination chart looks as under:

Sample XML / JSON for 2D Dual Y Combination chart:
701
XML
JSON

<chart caption='Sales Volume' PYAxisName='Revenue' SYAxisName='Quantity' showvalues=

<categories>
</categories>

<dataset seriesName='Revenue'>
<set value='1700000' />
<set value='610000' />
<set value='1420000' />
<set value='1350000' />
<set value='2140000' />
<set value='1210000' />
<set value='1130000' />
<set value='1560000' />
<set value='2120000' />
<set value='900000' />
<set value='1320000' />
<set value='1010000' />
</dataset>

<dataset seriesName='Quantity' parentYAxis='S'>
<set value='340' />
<set value='120' />
702
<set value='280' />
<set value='270' />
<set value='430' />
<set value='240' />
<set value='230' />
<set value='310' />
<set value='430' />
<set value='180' />
<set value='260' />
<set value='200' />
</dataset>

<trendLines>
</trendLines>
</chart>
{
"chart":{
"caption":"Sales Volume",
"pyaxisname":"Revenue",
"syaxisname":"Quantity",
"showvalues":"0",
"numberprefix":"$"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
703
{
"label":"Jun"
},
{
"label":"Jul"
},
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"seriesname":"Revenue",
"data":[{
"value":"1700000"
},
{
"value":"610000"
},
{
"value":"1420000"
},
{
"value":"1350000"
},
{
"value":"2140000"
704
},
{
"value":"1210000"
},
{
"value":"1130000"
},
{
"value":"1560000"
},
{
"value":"2120000"
},
{
"value":"900000"
},
{
"value":"1320000"
},
{
"value":"1010000"
}
]
},
{
"seriesname":"Quantity",
"parentyaxis":"S",
"data":[{
"value":"340"
},
{
"value":"120"
},
{
"value":"280"
},
{
"value":"270"
},
{
705
"value":"430"
},
{
"value":"240"
},
{
"value":"230"
},
{
"value":"310"
},
{
"value":"430"
},
{
"value":"180"
},
{
"value":"260"
},
{
"value":"200"
}
]
}
],
"trendlines":{
"line":[{
"color":"009933",
}
]
}
}
Back to top

Description:
706

The 2D Dual Y Combination Chart allows you to plot 2D Columns, Lines & Area on the same chart against
2 y-axes. You can choose to plot any dataset as column, line or area and you can also choose the axis
(primary or secondary) to plot it on.

Primary axis refers to the left side axis of the chart. Secondary refers to the right side axis.

You can use this single chart to build nine types of charts:
Column (Primary) + Line (Secondary) Chart
Column (Primary) + Area (Secondary) Chart
Column (Primary) + Column (Secondary) Chart
Area (Primary) + Line (Secondary) Chart
Area (Primary) + Column (Secondary) Chart
Area (Primary) + Area (Secondary) Chart
Line (Primary) + Line (Secondary) Chart
Line (Primary) + Column (Secondary) Chart
Line (Primary) + Area (Secondary) Chart
Back to top

Chart Objects

Parameters
Supported
which appear at the joint of
two consecutive lines/area
points. These are indicators to
show the position of data
points. The anchors handle tool
tips and links for the data
points.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
_alpha
_x
707
Glow
Bevel
Blur
_y
_xScale
_yScale
chart is plotted. It is
represented by a bounded
rectangle. In 3D charts, it
refers to the 3D base on which
the columns are built.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
CAPTION CAPTION refers to the heading
of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
DATAPLOTAREA DATAPLOTAREA refers to the
area plot on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
DATAPLOTCOLUMN DATAPLOTCOLUMN refers to
the column plot on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
DATAPLOTLINE DATAPLOTLINE refers to the Animation _alpha
708
line plot on the chart. Shadow
Glow
Bevel
Blur
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
entire axis thus aiding the
users in interpreting the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
709
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
through the height of the
chart, thereby segregating data
into different blocks. In case of
bar charts, they are horizontal
and run through the width of
chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
_alpha
_x
_y
710
Blur
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
which are displayed along the
y-axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
animation Boolea
n
animation in your charts. If you do not want
to animate any part of the chart, set this as 0.
palette Numb
er
color palettes which you can choose from.
Each palette renders the chart in a different
color theme. Valid values are 1-5.
codes separated
While the palette attribute allows to select
a palette theme that applies to chart
711
by comma background, canvas, font and tool-tips, it
does not change the colors of data items (i.e.,
column, line, pie etc.). Using
paletteColors attribute, you can specify
your custom list of hex colors for the data
items. The list of colors have to be separated
by comma e.g., <chart
paletteColors='FF0000,0372AB,FF5904.
..'>. The chart will cycle through the list of
accordingly.
your charts in a web application, you can
store the list of palette colors in your
application globally and then provide the
same in each chart XML.
n
menu in the chart, which can be customized
to show your text and can be linked to your
Url. For e.g., you can set the context menu of
the chart to include "About your company
name" and then link to your company home
page. By default, the chart shows "About
menu item.
can specify the link in FusionCharts Link
format to be able to open the same in new
window, pop-ups, frames or as JavaScript
links.
n
712
details on this.
areaOverColumns Boolea
n
0/1 If you've both area and column plots on the
combination chart, this attribute lets you
configure whether area chart will appear over
column chart.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
are 5 options: AUTO, WRAP, STAGGER,
ROTATE or NONE. By default, this attribute is
set to AUTO mode which means that the
alignment of the data labels is determined
automatically depending on the size of the
chart. WRAP wraps the label text if it is too
long to fit in one line. ROTATE rotates the
labels vertically. STAGGER divides the labels
into multiple lines.
w
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
0/1 If you've opted to show rotated labels on
chart, this attribute lets you set the
configuration whether the labels will show as
slanted labels or fully vertical ones.
labelStep Numb
er
you can opt to show every n-th label for
better clarity. This attribute just lets you do
713
so. When a value greater than 1 (n) is set to
this attribute, the first label from left and
every label next to the n-th position from left
will be displayed. e.g., a chart showing data
for 12 months and set with labelStep='3'
October. The rest of the labels will be
skipped.
staggerLines Numb
er
control how many lines to stagger the label
to. By default, all labels are displayed in a
single line.
showValues Boolea
n
0/1 Sets the configuration whether data values
will be displayed along with the data plot on
chart.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
chart, this attribute lets you adjust the
vertical alignment of data values with respect
to dataplots. By default, this attribute is set
to AUTO mode in which the alignment of each
mode, data values are displayed above the
plot points unless a plot point is too close to
the upper edge of the canvas while in BELOW
mode, data values are displayed below the
the lower edge of the canvas.
rotateValues Boolea
n
n
outside the column.
714
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
showSecondaryLimits Boolea
n
0/1 Whether to show secondary axis chart limit
values.
showDivLineSecondaryV
alue
Boolea
n
0/1 Whether to show div line values for the
secondary y-axis.
n
yAxisValuesStep Numb
er
showShadow Boolea
n
adjustDiv Boolea
n
715
n
clickURL String The entire chart can now act as a hotspot.
Use this URL to define the hotspot link for the
chart. The link can be specified in
FusionCharts Link format.
PYAxisMaxValue Numb
er
This attribute helps you explicitly set the
upper limit of the primary y-axis. If you don't
specify this value, it is automatically
calculated by FusionCharts based on the data
provided by you.
SYAxisMinValue Numb
er
lower limit of the secondary y-axis. If you
don't specify this value, it is automatically
provided by you.
SYAxisMaxValue Numb
er
upper limit of the secondary y-axis. If you
provided by you.
PYAxisMinValue Numb
er
lower limit of the primary y-axis. If you don't
provided by you.
n
limit adapt itself to a different figure based
716
on values provided to the chart.
setAdaptiveSYMin Boolea
n
0/1 This attribute lets you set whether the
secondary y-axis lower limit will be 0 (in case
of all positive values on chart) or should the
y-axis lower limit adapt itself to a different
figure based on values provided to the chart.
syncAxisLimits Boolea
n
0/1 Setting this attribute to 1 lets you synchronize
the limits of both the primary and secondary
axes.
PYAxisNameWidth Numb
er
to primary y-axis name.
SYAxisNameWidth Numb
er
to secondary y-axis name.
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

717
SYAXisName String Secondary y-axis title
PYAxisName String Primary Y-Axis title.
Back to top

Chart Cosmetics
or not.
718
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
719
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
720
border.
specific vLine.
TR
BL
BR
CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
721
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

722
itself.
showPlotBorder Boolean 0/1 Whether the column, area border will show
up.
plotBorderColor Color Color for column, area border
plotBorderThickness Number 0-5 (Pixels) Thickness for column, area border
plotBorderAlpha Number 0-100 Alpha for column, area border
dashed.
dash.
723
be drawn.
the chart as dash.
Back to top

Anchors



724
be the anchor size.
anchors.
background.
Back to top


color bands.



value > 0
725
as dash.
on the chart.
showPZeroPlaneValue
Since v 3.2.2 - SR3
which the zero plane exists on the primary
y-axis. By default, the value is displayed.
This attribute is not supported in JavaScript
charts.
showSZeroPlaneValue
Since v 3.2.2 - SR3
which the zero plane exists on the
secondary y-axis. By default, the value is
displayed. This attribute is not supported in
JavaScript charts.
bands.
726
Back to top

Legend Properties
In combination charts, the series name of each dataset shows up in the legend of the chart. If you do
not need the legend, you can opt to hide the same.
or
RIGHT
legendIconScale
Since v 3.2
727
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
728
Back to top

Number Formatting

2.5) page.
page.
729
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
sScaleRecursively
Since v 3.2.2 - SR3
Boolean 0/1 To scale the numbers recursively only for
the secondary y-axis you need to set this
attribute to '1'. For more details, please
Formatting > Recursive number scaling
(See 2.6) page.
maxScaleRecursion
Since v 3.2.2 - SR3
Number

sMaxScaleRecursion
Since v 3.2.2 - SR3
Number

recursive scaling for the numbers of the
secondary y-axis? -1 completes the entire
scaleSeparator
Since v 3.2.2 - SR3
String

730
sScaleSeparator
Since v 3.2.2 - SR3
String

scales that generated after recursion for
the numbers of the secondary y-axis? For
Since v 3.2.2 - SR3
731
page.
732
Since v 3.2
forceSYAxisValueDecimals
Since v 3.2
places to all secondary y-axis values. For
example, If you limit the maximum number
of decimal digits to 2, a number like 55.345
will be rounded to 55.34. This does not
mean that all secondary y-axis numbers
secondary y-axis numbers, set this
733
page.
sFormatNumber Boolean 0/1 This configuration determines whether the
numbers belonging to secondary axis will
be formatted using commas, e.g., 40,000 if
sFormatNumber='1' and 40000 if
sFormatNumber= '0'. For more details,
sFormatNumberScale Boolean 0/1 Configuration whether to add K (thousands)
and M (millions) to a number belonging to
secondary axis after truncating and
rounding it - e.g., if
sFormatNumberScale is set to 1, 10434
sDefaultNumberScale String The default unit of the numbers belonging
to secondary axis. For more details, please
page.
sNumberScaleUnit String Unit of each block of the scale of
secondary y-axis.For more details, please
page.
sNumberScaleValue String Range of the various blocks that constitute
the scale for secondary y-axis. For more
734
2.5) page.
sNumberPrefix String Character Using this attribute, you could add prefix
to all the numbers belonging to secondary
axis. For more details, please see
sNumberSuffix String Character Using this attribute, you could add prefix
sDecimals Number 0-10 Number of decimal places to which all
be rounded to. For more details, please see
sYAxisValueDecimals Number 0-10 If you've opted to not adjust div lines, you
can specify the secondary div line values
decimal precision using this attribute. For
Back to top

Font Properties


735
here.
here.
here.
Back to top

Tool-tip
736
seriesNameInToolTip Boolean 0/1 For combination charts, FusionCharts shows
chart.
Back to top





737
Percent)
738
canvas
canvasPadding Number In Pixels Allows you to set empty space on the left
and right side of Line dataset or Area
dataset on the chart canvas. This setting
won't work if one or more Column datasets
are present.
739
by the chart.
and end of chart.
and top of chart.
Back to top

The <categories> element lets you bunch together x-axis labels of the chart. For a combination chart,
740
face
labels.
labels.
data labels.
Back to top

<category> element
In combination charts, it's necessary to provide an equal number of <category> elements and data
of chart.
Back to top

741
In combination charts, it is used between <category> elements as under:

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
742
shown.
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.

743

<dataset> element.
renderAs String COLUMN,
AREA or
LINE
This attribute defines what the particular
dataset will be plotted as. Valid values are
COLUMN, AREA or LINE.
parentYAxis String P or S This attribute allows you to set the parent
axis of the dataset - P (primary) or S
(secondary). Primary datasets are drawn
against the left y-axis and the secondary
against the right-axis.
showPlotBorder Boolean 0/1 Whether to show the border of this dataset
(area or column only).
(area or column only)
dataset (area or column only)
the second will be 2006. The seriesName of
a dataset is shown in legend.
(Or Comma
separated
744
list) list of comma separated hex codes to get a
gradient plot.
Comma
Separated
List
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
particular dataset.
dataset in legend. In combination charts,
this can be particularly useful when you've
used the area/line chart to plot a trend but
do not want the seriesName of that trend to
appear in legend.
dataset.
745
size.
dataset.
length of dash.
length of dash gap.
Back to top

<set> element
746
For a combination chart, it could look like:
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
In combination charts, you should again note that the number of <category> elements should be equal
anchor.
of the anchor.
anchor.
anchor background.
etc.
747
color Color Hex Code For combination charts, you can define the
specify the same.
value.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
748
edge of the canvas.
alpha Number 0-100 For combination charts, you can define the
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
parentYAxis String P/S Whether the trend line should be plotted
against the primary y-axis or secondary y-
axis. Possible values are "P" or "S".
749
Value
102.
Value
startValue.
text.
of trend line.
each dash.
750
each dash gap.

1.22 Multi-series Column 3D Line Dual Y
Combination Chart

SWF: MSColumn3DLineDY.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Multi-series Column 3D Line Dual Y Combination chart looks as under:
751

Sample XML / JSON for Multi-series Column 3D Line Dual Y Combination chart:
XML
JSON

<chart caption='Product Sales & Downloads' showValues= '0'PYAxisName='Sales'
SYAxisName='Total Downloads'>

<categories>
<category label='Jan'/>
<category label='Feb'/>
<category label='Mar'/>
<category label='Apr'/>
<category label='May'/>
<category label='Jun'/>
<category label='Jul'/>
<category label='Aug'/>
<category label='Sep'/>
<category label='Oct'/>
<category label='Nov'/>
<category label='Dec'/>
</categories>
752

<dataset seriesName='Product A Sales'>
<set value='230' />
<set value='245' />
<set value='250' />
<set value='245' />
<set value='350' />
<set value='330' />
<set value='360' />
<set value='340' />
<set value='230' />
<set value='220' />
<set value='200' />
<set value='190' />
</dataset>

<dataset seriesName='Product B Sales'>
<set value='130' />
<set value='145' />
<set value='50' />
<set value='115' />
<set value='190' />
<set value='130' />
<set value='160' />
<set value='140' />
<set value='130' />
<set value='120' />
<set value='140' />
<set value='80' />
</dataset>

<dataset seriesName='Total Downloads' parentYAxis='S'>
<set value='13000' />
<set value='14500' />
<set value='11500' />
<set value='10000' />
<set value='13000' />
<set value='16000' />
<set value='14000' />
753
<set value='13000' />
<set value='12000' />
<set value='10000' />
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart":{
"caption":"Product Sales & Downloads",
"showvalues":"0",
"pyaxisname":"Sales",
"syaxisname":"Total Downloads"
},
"categories":[{
"category":[{
"label":"Jan"
},
{
"label":"Feb"
},
{
"label":"Mar"
},
{
"label":"Apr"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul"
},
754
{
"label":"Aug"
},
{
"label":"Sep"
},
{
"label":"Oct"
},
{
"label":"Nov"
},
{
"label":"Dec"
}
]
}
],
"dataset":[{
"seriesname":"Product A Sales",
"data":[{
"value":"230"
},
{
"value":"245"
},
{
"value":"250"
},
{
"value":"245"
},
{
"value":"350"
},
{
"value":"330"
},
{
"value":"360"
755
},
{
"value":"340"
},
{
"value":"230"
},
{
"value":"220"
},
{
"value":"200"
},
{
"value":"190"
}
]
},
{
"seriesname":"Product B Sales",
"data":[{
"value":"130"
},
{
"value":"145"
},
{
"value":"50"
},
{
"value":"115"
},
{
"value":"190"
},
{
"value":"130"
},
{
"value":"160"
756
},
{
"value":"140"
},
{
"value":"130"
},
{
"value":"120"
},
{
"value":"140"
},
{
"value":"80"
}
]
},
{
"seriesname":"Total Downloads",
"parentyaxis":"S",
"data":[{
"value":"13000"
},
{
"value":"14500"
},
{
"value":"5000"
},
{
"value":"11500"
},
{
"value":"10000"
},
{
"value":"13000"
},
{
757
"value":"16000"
},
{
"value":"14000"
},
{
"value":"13000"
},
{
"value":"12000"
},
{
"value":"9000"
},
{
"value":"10000"
}
]
}
],
"trendlines":{
"line":[{
"startvalue":"300",
"color":"91C728",
}
]
}
}
Back to top

Chart Objects

Parameters
Supported
Animation _alpha
758
points.
Shadow
Glow
Bevel
Blur
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
_alpha
_yScale
759
Bevel
Blur
DATAPLOTLINE DATAPLOTLINE refers to the
line plot on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
760
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
761
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
animation Boolea
n
palette Numb
er
codes separated
by comma
background, canvas, font and tool-tips, it
762
accordingly.
n
menu item.
links.
showLabels Boolea
n
nce v 3.2
WRAP
763
STAGGER
ROTATE or
NONE
w
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numb
er
skipped.
staggerLines Numb
er
764
single line.
n
details on this.
showValues Boolea
n
chart.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
765
n
rides this value.
er
adjustDiv Boolea
n
n
values.
alue
Boolea
n
secondary y-axis.
maxColWidth Numb
er
n
0/1 Whether to use advanced gradients and
charts.
n
766
showShadow Boolea
n
PYAxisMaxValue Numb
er
provided by you.
PYAxisMinValue Numb
er
provided by you.
SYAxisMinValue Numb
er
provided by you.
SYAxisMaxValue Numb
er
provided by you.
n
n
n
767
axes.
n
er
er
use3DLineShift Boolea
n
0/1 By default, when a line dataset is rendered
over a column 3D dataset, the line dataset
shifts in the z-dimension to give a 3D
perspective. But, if you do not wish to add
the perspective to the line dataset, you may
set this attribute as 0.
primaryAxisOnLeft
Since v 3.2
Boolea
n
0/1 Setting this attribute to 0 helps in reversing
the position of primary axis.
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

768
Back to top

Chart Cosmetics
or not.
769
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
770
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
specific vLine.
771
TR
BL
BR
CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

772
will show up.
be drawn.
the chart as dash.
Back to top

Anchors


773

be the anchor size.
anchors.
background.
Back to top


color bands.

774


value > 0
as dash.
on the chart.
showPZeroPlaneValue
Since v 3.2.2 - SR3
charts.
showSZeroPlaneValue Boolean 0/1 Allows you to show or hide the value on
775
Since v 3.2.2 - SR3 which the zero plane exists on the
JavaScript charts.
Back to top

Legend Properties
In combination charts, the series name of each dataset shows up in the legend of the chart. If you do
not need the legend, you can opt to hide the same.
or
RIGHT
legendIconScale
Since v 3.2
776
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
777
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

778
2.5) page.
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
sScaleRecursively
Since v 3.2.2 - SR3
Boolean 0/1 To scale the numbers recursively only for the
secondary y-axis you need to set this attribute
to '1'. For more details, please see Advanced
Charting > Number Formatting > Recursive
number scaling (See 2.6) page.
maxScaleRecursion
Since v 3.2.2 - SR3
Number

sMaxScaleRecursion
Since v 3.2.2 - SR3
Number

779
scaleSeparator
Since v 3.2.2 - SR3
String

sScaleSeparator
Since v 3.2.2 - SR3
String

780
Since v 3.2.2 - SR3
page.
781
Since v 3.2
Since v 3.2
782
page.
page.
secondary y-axis. For more details, please
783
page.
2.5) page.
Back to top

Font Properties

784

here.
here.
785
here.
Back to top

Tool-tip
seriesNameInToolTip Boolean 0/1 For combination charts, FusionCharts shows
chart.
Back to top



786


canvas
787
Percent)
788
by the chart.
and end of chart.
and top of chart.
Back to top

The <categories> element lets you bunch together x-axis labels of the chart. For a combination chart,
789
face
labels.
labels.
data labels.
Back to top

<category> element
In combination charts, it's necessary to provide an equal number of <category> elements and data
of chart.
Back to top
790

In combination charts, it is used between <category> elements as under:

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
791
shown.
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.
792


<dataset> element.
(secondary). Primary datasets are drawn as
on the left y-axis and secondary on the right
y-axis. In 3D Column (or stacked Column) +
Line Combination Charts, the columns draw
against primary y-axis and the lines against
secondary y-axis. In 2D dual Y combination
charts, you can choose which dataset to
render against which y-axis.
the second will be 2006. The seriesName of
a dataset is shown in legend.
(Or Comma
separated
list)
drawn.
Comma
Separated
List
793
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
particular dataset.
dataset in legend. In combination charts,
this can be particularly useful when you've
used the area/line chart to plot a trend but
do not want the seriesName of that trend
to appear in legend.
dataset.
size.
794
dataset.
length of dash.
length of dash gap.
Back to top

<set> element
For a combination chart, it could look like:
<set value='35445' />
<set value='35675' />
.... and so on ....
795
</dataset>
In combination charts, you should again note that the number of <category> elements should be equal
dashed Boolean 0/1 Whether the line should appear as dashed.
anchor.
of the anchor.
anchor.
anchor background.
etc.
color Color Hex Code For combination charts, you can define the
796
specify the same.
value.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
797
edge of the canvas.
alpha Number 0-100 For combination charts, you can define the
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
798
startValue.
text.
of trend line.
each dash.
each dash gap.

1.23 Scroll Column 2D Chart

SWF: ScrollColumn2D.swf
799
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Scroll Bar Properties
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Scroll Column 2D chart looks as under:

Sample XML / JSON for Scroll Column 2D chart:
XML
JSON

800
showValues= '0' numberPrefix='$' useRoundEdges='1'>

<categories>
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
801
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart": {
"caption": "Business Results 2005 v 2006",
"showvalues": "0",
"numberprefix": "$",
"useroundedges": "1"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
802
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesname": "2006",
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
803
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
},
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
},
804
{
"value": "11000"
},
{
"value": "9800"
},
{
"value": "11800"
},
{
"value": "19700"
},
{
"value": "21700"
},
{
"value": "21900"
},
{
"value": "22900"
},
{
"value": "20800"
}
]
}
],
"trendlines": [
{
"line": [
{
"color": "91C728",
"showontop": "1"
}
]
}
]
}
805
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Shadow
Glow
_alpha
_xScale
_yScale
806
Blur
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
SCROLLPANE SCROLLPANE refers to the scroll
bar on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
_alpha
_x
_y
807
Glow
Bevel
Blur
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
_alpha
_x
808
Shadow
Glow
Bevel
Blur
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
numVisiblePlot Numbe
r
2-number of
data items
present in XML
This attribute lets you control how the number
of columns to show in the visible area of the
scroll pane.
For example, if you're plotting a chart with 10
columns each in 3 dataset, totaling to 30
columns, and you wish to show only 10 columns
in the visible area, set this attribute as 10. You
will now see only 10 columns in the chart - rest
809
of the columns will be visible upon scrolling.
If you want to show all the columns on the
chart irrespective of the number of data points
in your XML data document, set this attribute
as 0.
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
chart XML.
n
810
when right clicked.
menu item.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe 1 or above By default, all the labels are displayed on the
811
r chart. However, if you've a set of streaming
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
outside the column.
n
lines and limits.
showLimits Boolea
n
rides this value.
812
n
rides this value.
r
showShadow Boolea
n
adjustDiv Boolea
n
Link format.
n
r
to y-axis name.
n
yAxisMaxValue Numbe This attribute helps you explicitly set the upper
813
r limit of the chart. If you don't specify this
you.
yAxisMinValue Numbe
r
you.
n
scrollToEnd Boolea
n
0/1 When the chart renders, you can opt to scroll
to the end of the chart (to show data at
extreme right) by setting this attribute as 1.
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

814
Back to top

Chart Cosmetics
or not.
815
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
background image.
816
right
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
specific vLine.
817
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

818
itself.
will show up.
dashed.
dash.
819
Back to top

Scroll Properties
The following attributes let you set the scroll bar properties.
scrollColor Color Hex Code Color for scroll bar.
scrollHeight Number In Pixels Required height for scroll bar.
scrollPadding Number In Pixels Distance between the end of canvas (bottom
part) and start of scroll bar.
scrollBtnWidth Number In Pixels Width of both scroll bar buttons (left &
right).
scrollBtnPadding Number In Pixels Padding between the scroll buttons and the
scroll track (background).
820
Back to top


color bands.



value > 0
as dash.
821
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
Back to top

Legend Properties

In scroll charts, the series name of each dataset shows up in the legend of the chart. If you do not need


or RIGHT
822
legendIconScale
Since v 3.2
the chart.
of the scroll bar.
823
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

824
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

825
scaleSeparator
Since v 3.2.2 - SR3
String

Since v 3.2.2 - SR3
page.
826
827
Since v 3.2
page.
Back to top

Font Properties


828
here.
here.
here.
Back to top

829
Tool-tip
seriesNameInToolTip Boolean 0/1 For scroll charts, FusionCharts shows the
chart.
Back to top





830
831
Percent)
canvas
832
by the chart.
and end of chart.
and top of chart.
Back to top

The <categories> element lets you bunch together x-axis labels of the chart. For a scroll chart, it's
face
labels.
833
labels.
data labels.
Back to top

<category> element
In scroll charts, it's necessary to provide an equal number of <category> elements and data items
of chart.
Back to top

834
In scroll charts, it is used between <category> elements as under:

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
835
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.


836
<dataset> element.
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
ratio String Comma
separated
list of ratios
details.
dataset in legend.
Back to top

<set> element
837
For a scroll chart, it could look like:
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
In scroll charts, you should again note that the number of <category> elements should be equal to the
number of data points in each data sets, i.e., if you mention twelve categories (twelve months), the
alpha Number 0-100 For scroll charts, you can define the alpha
this attribute.
value.
etc.
color Color Hex Code For scroll charts, you can define the color of
838
datasets at dataset level. However, if you
specify the same.
Back to top

Trend-lines
chart.
as under:
<trendLines>
839
</trendLines>
each dash gap.
startValue.
text.
of trend line.
840
each dash.
Value
102.
Value

1.24 Scroll Line 2D Chart

SWF: ScrollLine2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Scroll Line 2D chart looks as under:
841

Sample XML / JSON for Scroll Line 2D chart:
XML
JSON

showValues= '0' numberPrefix='$'
numVisiblePlot='6'>

<categories>
842
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart": {
843
"showvalues": "0",
"numvisibleplot": "6"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
844
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
},
{
"value": "29700"
},
845
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
},
{
"value": "11000"
},
{
"value": "9800"
},
{
"value": "11800"
},
{
"value": "19700"
},
{
"value": "21700"
846
},
{
"value": "21900"
},
{
"value": "22900"
},
{
"value": "20800"
}
]
}
],
"trendlines": [
{
"line": [
{
"color": "91C728",
"showontop": "1"
}
]
}
]
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
_alpha
_xScale
_yScale
847
Blur
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Shadow
Glow
Bevel
Blur
_alpha
_xScale
_yScale
Animation
Font
_alpha
848
data plot.
Shadow
Glow
Bevel
Blur
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
bar on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
TOOLTIP TOOLTIP refers to the tool tip Font
849
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
interpretation.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
Animation
Font
_alpha
850
vertical separator lines. Shadow
Glow
Bevel
Blur
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
851
r
2-number of
data items
present in XML
This attribute lets you control how many data
plots will appear in the visible area of the
scroll pane.
data items in each dataset, and you wish to
show only 10 data items in the visible area, set
this attribute as 10. You will now see only 10
data points on the chart - rest of the data
points will be visible upon scrolling.
If you want to show all the data points on the
as 0.
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
852
chart XML.
n
when right clicked.
menu item.
n
details on this.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
853
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
staggerLines Numbe
r
line.
showValues Boolea
n
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
854
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
n
yAxisMaxValue Numbe
r
you.
855
yAxisMinValue Numbe
r
you.
r
to y-axis name.
Link format.
r
showShadow Boolea
n
adjustDiv Boolea
n
n
n
856
scrollToEnd Boolea
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

Back to top

Chart Cosmetics
or not.
857
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
858
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
859
border.
specific vLine.
TR
BL
BR
CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
860
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

be drawn.
the chart as dash.
Back to top
861

Scroll Properties
right).
Back to top

Anchors



862
be the anchor size.
anchors.
background.
Back to top


color bands.



863
dashed.
gap.
grid bands.
bands.
bands.
value > 0
as dash.
864
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
Back to top

Legend Properties



865
or
RIGHT
legendIconScale
Since v 3.2
the chart.
of the scroll bar.
866
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting
867

page.
numberScaleUnit String Unit of each block of the scale.For more
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
868
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

869
Since v 3.2.2 - SR3
page.
870
Since v 3.2
page.
Back to top

Font Properties
871


here.
here.
872
here.
Back to top

Tool-tip
chart.
Back to top



873


874
canvas
875
by the chart.
and end of chart.
and top of chart.
Back to top

face
labels.
labels.
876
data labels.
Back to top

<category> element
of chart.
Back to top

877

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
878
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.


<dataset> element.
879
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
particular dataset.
880
dataset in legend.
dataset.
size.
dataset.
length of dash.
length of dash gap.
881
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
etc.
882
specify the same.
value.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
edge of the canvas.
883
this attribute.
anchor background.
anchor.
anchor.
of the anchor.
Back to top

Trend-lines
chart.
884
as under:
<trendLines>
</trendLines>
text.
of trend line.
each dash.
885
each dash gap.
Value
102.
Value
startValue.

1.25 Scroll Area 2D Chart

SWF: ScrollArea2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Legend
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines
886
Tool-tip

Scroll Area 2D chart looks as under:

Sample XML / JSON for Scroll Area 2D chart:
XML
JSON

showValues= '0' numberPrefix='$'
numVisiblePlot='6'>

<categories>
887
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>

<trendlines>
888
</trendlines>

</chart>
{
"chart": {
"showvalues": "0",
"numvisibleplot": "6"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
889
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
890
"value": "36700"
},
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
},
{
"value": "11000"
},
{
"value": "9800"
},
{
"value": "11800"
},
891
{
"value": "19700"
},
{
"value": "21700"
},
{
"value": "21900"
},
{
"value": "22900"
},
{
"value": "20800"
}
]
}
],
"trendlines": [
{
"line": [
{
"color": "91C728",
"showontop": "1"
}
]
}
]
}
Back to top

Chart Objects

Parameters
Supported
892
Animation
Shadow
Glow
Bevel
Blur
_alpha
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Shadow
Glow
_alpha
_xScale
_yScale
893
Blur
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
bar on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
_alpha
_x
_y
894
Glow
Bevel
Blur
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
interpretation.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
895
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


896
properties.
r
2-number of
data items
present in XML
This attribute lets you control how many data
plots will appear in the visible area of the
scroll pane.
data items in each dataset, and you wish to
show only 10 data items in the visible area, set
this attribute as 10. You will now see only 10
data points on the chart - rest of the data
points will be visible upon scrolling.
If you want to show all the data points on the
as 0.
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
897
chart XML.
n
when right clicked.
menu item.
n
details on this.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
898
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
899
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
n
yAxisMaxValue Numbe
r
you.
yAxisMinValue Numbe
r
you.
r
to y-axis name.
900
Link format.
r
showShadow Boolea
n
adjustDiv Boolea
n
n
n
scrollToEnd Boolea
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

901
Back to top

Chart Cosmetics
or not.
902
details.
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
903
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
commas.
for gradients.
border.
904
specific vLine.
BR, CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics

905

attributes.

will show up.
dashed.
dash.
906
Back to top

Scroll Properties
right).
Back to top

Anchors



907
background.
be the anchor size.
anchors.
Back to top


color bands.


908

dashed.
gap.
grid bands.
bands.
bands.
value > 0
909
as dash.
on the chart.
showZeroPlaneValue
Since v 3.2.2 - SR3
attribute in not supported in JavaScript
charts.
bands.
Back to top

Legend Properties

910


or RIGHT
legendIconScale
Since v 3.2
the chart.
911
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting
912

page.
2.5) page.
913
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

914
Since v 3.2.2 - SR3
page.
915
Since v 3.2
916
page.
Back to top

Font Properties


here.
917
here.
here.
Back to top

Tool-tip
chart.
Back to top
918





919
canvas
920
by the chart.
and end of chart.
and top of chart.
Back to top

921
face
labels.
labels.
data labels.
Back to top

<category> element
of chart.
Back to top

922

<categories>
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
923
label.
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.

924

<dataset> element.
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
dataset in legend.
925
dataset.
size.
dataset
Back to top

<set> element
<set value='35445' />
<set value='35675' />
926
.... and so on ....
</dataset>
anchor background.
of the anchor.
anchor.
anchor.
this attribute.
927
specify the same.
value.
etc.
928
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
each dash gap.
of trend line.
929
each dash.
Value
102.
Value
startValue.
text.

1.26 Scroll Stacked Column 2D Chart

SWF: ScrollStackedColumn2D.swf
Chart Data Others
Chart Image Sample XML Data Number Formatting
930
Chart Objects
Chart Cosmetics
Legend
Tool-tip
<category> element
<dataset> element
<set> element
Plot Cosmetics
Font Properties
Vertical Lines
Trend Lines

Scroll Stacked Column 2D chart looks as under:

Sample XML / JSON for Scroll Stacked Column 2D chart:
XML
JSON

numberPrefix='$' useRoundEdges='1'>

<categories>
931
</categories>

<set value='27400' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>

<set value='11000' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
932
<set value='20800' />
</dataset>

<trendlines>
</trendlines>

</chart>
{
"chart": {
"showvalues": "0",
"useroundedges": "1"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
933
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
"value": "29600"
},
{
"value": "32600"
934
},
{
"value": "31800"
},
{
"value": "36700"
},
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
},
{
"value": "11000"
},
{
935
"value": "9800"
},
{
"value": "11800"
},
{
"value": "19700"
},
{
"value": "21700"
},
{
"value": "21900"
},
{
"value": "22900"
},
{
"value": "20800"
}
]
}
],
"trendlines": [
{
"line": [
{
"color": "91C728",
"showontop": "1"
}
]
}
]
}
Back to top

Chart Objects
936

Parameters
Supported
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Shadow
Glow
Bevel
Blur
_alpha
_xScale
_yScale
Animation _alpha
937
data plot.
Font
Shadow
Glow
Bevel
Blur
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
bar on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
938
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
939
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
axis of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
r
2-number of
data items
present in XML
This attribute lets you control how the number
of columns to show in the visible area of the
scroll pane.
columns, and you wish to show only 10 columns
in the visible area, set this attribute as 10. You
will now see only 10 columns in the chart - rest
of the columns will be visible upon scrolling.
940
as 0.
animation Boolea
n
palette Numbe
r
codes separated
by comma
accordingly.
chart XML.
n
when right clicked.
941
menu item.
showLabels Boolea
n
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
ow
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numbe
r
942
staggerLines Numbe
r
line.
showValues Boolea
n
rotateValues Boolea
n
n
lines and limits.
showLimits Boolea
n
rides this value.
n
rides this value.
r
showShadow Boolea
n
943
n
yAxisMinValue
Since v 3.2
Numbe
r
you.
yAxisMaxValue Numbe
r
you.
showSum Boolea
n
adjustDiv Boolea
n
n
r
to y-axis name.
944
Link format.
scrollToEnd Boolea
n
stack100Percent Boolea
n
showPercentValues Boolea
n
0/1 Whether to show percentage values in data
labels of the chart.
showPercentInToolTip Boolea
n
0/1 Whether to show percentage values in tool tip.
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

Back to top

945
Chart Cosmetics
or not.
details.
946
details.
bgImage
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
947
commas.
for gradients.
border.
specific vLine.
BR, CC
TL - Top-left
948
TR - Top-right
BR - Bottom right
BL - Bottom left
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

949
itself.
will show up.
dashed.
dash.
950
Back to top

Scroll Properties
right).
Back to top


951
color bands.



value > 0
as dash.
on the chart.
952
showZeroPlaneValue
Since v 3.2.2 - SR3
charts.
bands.
Back to top

Legend Properties



or RIGHT
legendIconScale
Since v 3.2
953
the chart.
of the scroll bar.
interactiveLegend
Since v 3.2
reappear.
954
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting

955
page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
maxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

956
Since v 3.2.2 - SR3
page.
957
958
Since v 3.2
page.
Back to top

Font Properties


959
here.
here.
here.
Back to top

Tool-tip
960
chart.
Back to top





961
Percent)
962
canvas
963
by the chart.
and end of chart.
and top of chart.
Back to top

face
labels.
labels.
data labels.
964
Back to top

<category> element
of chart.
Back to top


<categories>
965
</categories>
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
966
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.


<dataset> element.
967
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
ratio String Comma
separated
list of ratios
details.
dataset in legend.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
968
this attribute.
value.
etc.
969
specify the same.
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
970
of trend line.
each dash.
each dash gap.
Value
102.
Value
971
startValue.
text.

1.27 Scroll Combination 2D (Dual Y) Chart

SWF: ScrollCombiDY2D.swf
Chart Data Others
Chart Image
Chart Objects
Chart Cosmetics
Anchors
Legend
Tool-tip
Sample XML Data
<category> element
<dataset> element
<set> element
Plot Cosmetics
Number Formatting
Font Properties
Vertical Lines
Trend Lines

Scroll Combination 2D (Dual Y) chart looks as under:
972

Sample XML / JSON for Scroll Combination 2D (Dual Y) chart:
XML
JSON

<chart caption='Sales Volume' PYAxisName='Revenue' SYAxisName='Quantity' showvalues=
'0' numberPrefix='$' numVisiblePlot='8'
useRoundEdges='1' palette='4'>

<categories>
</categories>
973

<dataset seriesName='Quantity' parentYAxis='S'>
<set value='340' />
<set value='120' />
<set value='280' />
<set value='270' />
<set value='430' />
<set value='240' />
<set value='230' />
<set value='310' />
<set value='430' />
<set value='180' />
<set value='260' />
<set value='200' />
</dataset>

<dataset seriesName='Revenue'>
<set value='1700000' />
<set value='610000' />
<set value='1420000' />
<set value='1350000' />
<set value='2140000' />
<set value='1210000' />
<set value='1130000' />
<set value='1560000' />
<set value='2120000' />
<set value='900000' />
<set value='1320000' />
<set value='1010000' />
</dataset>

<trendLines>
</trendLines>

</chart>
{
"chart": {
"caption": "Sales Volume",
"pyaxisname": "Revenue",
974
"syaxisname": "Quantity",
"showvalues": "0",
"numvisibleplot": "8",
"useroundedges": "1",
"palette": "4"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
975
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesname": "Quantity",
"parentyaxis": "S",
"data": [
{
"value": "340"
},
{
"value": "120"
},
{
"value": "280"
},
{
"value": "270"
},
{
"value": "430"
},
{
"value": "240"
},
{
"value": "230"
},
{
"value": "310"
},
{
"value": "430"
976
},
{
"value": "180"
},
{
"value": "260"
},
{
"value": "200"
}
]
},
{
"seriesname": "Revenue",
"data": [
{
"value": "1700000"
},
{
"value": "610000"
},
{
"value": "1420000"
},
{
"value": "1350000"
},
{
"value": "2140000"
},
{
"value": "1210000"
},
{
"value": "1130000"
},
{
"value": "1560000"
},
{
977
"value": "2120000"
},
{
"value": "900000"
},
{
"value": "1320000"
},
{
"value": "1010000"
}
]
}
],
"trendlines": [
{
"line": [
{
"color": "009933",
"displayvalue": "Target"
}
]
}
]
}
Back to top

Chart Objects

Parameters
Supported
Animation
Shadow
Glow
Bevel
_alpha
_xScale
_yScale
978
points.
Blur
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
_xScale
_yScale
of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
labels of the data.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
DATAPLOTAREA DATAPLOTAREA refers to the
area plot on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_xScale
_yScale
979
Animation
Shadow
Glow
Bevel
Blur
_alpha
_xScale
_yScale
DATAPLOTLINE DATAPLOTLINE refers to the
line plot on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_xScale
_yScale
data plot.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
show up.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
980
SCROLLPANE SCROLLPANE refers to the
scroll bar on the chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Font
determined value.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_y
_xScale
_yScale
any).
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
chart.
Animation
Shadow
Glow
Bevel
Blur
_alpha
_yScale
981
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
title of the chart.
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Animation
Font
Shadow
Glow
Bevel
Blur
_alpha
_x
_y
Back to top


properties.
982
numVisiblePlot Numb
er
2-number of
data items
present in XML
This attribute lets you control how the
number of columns to show in the visible area
of the scroll pane.
columns, and you wish to show only 10
columns in the visible area, set this attribute
as 10. You will now see only 10 columns in the
chart - rest of the columns will be visible
upon scrolling.
chart irrespective of the number of data
points in your XML data document, set this
attribute as 0.
animation Boolea
n
palette Numb
er
codes separated
by comma
background, canvas, font and tool-tips, it
983
accordingly.
n
menu item.
links.
n
details on this.
areaOverColumns Boolea
n
0/1 If you've both area and column plots on the
combination chart, this attribute lets you
configure whether area chart will appear over
column chart.
showLabels Boolea
n
984
nce v 3.2
WRAP
STAGGER
ROTATE or
NONE
w
Since v 3.2.1
Boolea
n
rotateLabels Boolea
n
chart.
slantLabels Boolea
n
labelStep Numb
er
skipped.
staggerLines Numb 2 or above If you've opted for STAGGER mode as
985
er labelDisplay, using this attribute you can
single line.
showValues Boolea
n
chart.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
rotateValues Boolea
n
n
outside the column.
n
lines and limits.
showLimits Boolea
n
986
rides this value.
n
rides this value.
n
values.
alue
Boolea
n
secondary y-axis.
adjustDiv Boolea
n
n
er
showShadow Boolea
n
n
987
PYAxisMaxValue Numb
er
provided by you.
SYAxisMinValue Numb
er
provided by you.
SYAxisMaxValue Numb
er
provided by you.
PYAxisMinValue Numb
er
provided by you.
n
n
n
axes.
988
er
er
scrollToEnd Boolea
n
centerYaxisName
Since v 3.2.2
Boolea
n
the canvas.
Back to top

Back to top

Chart Cosmetics
989
or not.
details.
details.
bgImage String To place any Flash movie as background of
990
or
bgSWF - deprecated
bgImageAlpha
or
background SWF.
bgImageDisplayMode
Since v3.2.2
String stretch,
tile, fit,
fill, center,
none
image constraints
chart area
area with the image
modes are applied
bgImageVAlign
Since v3.2.2
String top,
middle,
bottom
image.
bgImageHAlign
Since v3.2.2
String left,
middle,
right
background image.
bgImageScale
Since v3.2.2
991
commas.
for gradients.
border.
specific vLine.
TR
BL
BR
CC
TL - Top-left
TR - Top-right
BR - Bottom right
BL - Bottom left
992
attribute.
ups, frames etc.
Back to top

Data Plot Cosmetics


attributes.

993
itself.
showPlotBorder Boolean 0/1 Whether the column, area border will show
up.
plotBorderColor Color Color for column, area border
plotBorderThickness Number 0-5 (Pixels) Thickness for column, area border
plotBorderAlpha Number 0-100 Alpha for column, area border
dashed.
dash.
994
be drawn.
the chart as dash.
Back to top

Scroll Properties
right).
995
Back to top

Anchors



be the anchor size.
anchors.
996
background.
Back to top


color bands.



value > 0
as dash.
997
on the chart.
showPZeroPlaneValue
Since v 3.2.2 - SR3
charts.
showSZeroPlaneValue
Since v 3.2.2 - SR3
which the zero plane exists on the
JavaScript charts.
bands.
Back to top

Legend Properties



998
or
RIGHT
legendIconScale
Since v 3.2
the chart.
of the scroll bar.
999
interactiveLegend
Since v 3.2
reappear.
legendNumColumns
Since v 3.2
Number Positive
Integer
legend.
Since v 3.2
wrapping.
legendMarkerCircle
circular ones.
Back to top

Number Formatting
1000

page.
2.5) page.
scaleRecursively
Since v 3.2.2 - SR3
1001
Recursive number scaling (See 2.6) page.
sScaleRecursively
Since v 3.2.2 - SR3
Boolean 0/1 To scale the numbers recursively only for
the secondary y-axis you need to set this
attribute to '1'. For more details, please
Formatting > Recursive number scaling
(See 2.6) page.
maxScaleRecursion
Since v 3.2.2 - SR3
Number

sMaxScaleRecursion
Since v 3.2.2 - SR3
Number

scaleSeparator
Since v 3.2.2 - SR3
String

sScaleSeparator
Since v 3.2.2 - SR3
String

1002
Since v 3.2.2 - SR3
page.
1003
Since v 3.2
1004
Since v 3.2
page.
1005
millions - a M will be added at the end. For
page.
secondary y-axis. For more details, please
page.
2.5) page.
1006
Back to top

Font Properties


1007
here.
here.
here.
Back to top

Tool-tip
1008
chart.
Back to top





1009
Percent)
1010
canvas
canvasPadding Number In Pixels Allows you to set empty space on the left
and right side of columns on the chart
canvas
by the chart.
1011
and end of chart.
and top of chart.
Back to top

face
labels.
labels.
data labels.
Back to top

<category> element
1012
of chart.
Back to top


<categories>
</categories>
1013
separator line.
line.
appear as dashed.
dash.
dash gap.
shown.
label.
1014
right.
center,
right
vLine label.
middle,
bottom
vLine label.
Back to top

<dataset> element



color/alpha/etc.


<dataset> element.
renderAs String COLUMN,
AREA or
LINE
This attribute defines what the particular
dataset will be plotted as. Valid values are
COLUMN, AREA or LINE.
(secondary). Primary datasets are drawn
against the left y-axis and the secondary
1015
against the right-axis.
showPlotBorder Boolean 0/1 Whether to show the border of this dataset
(area or column only).
dataset (area or column only)
(Or Comma
separated
list)
gradient plot.
Comma
Separated
List
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
1016
particular dataset.
dataset in legend.
dataset.
size.
1017
dataset.
length of dash.
length of dash gap.
Back to top

<set> element
<set value='35445' />
<set value='35675' />
.... and so on ....
</dataset>
anchor.
1018
this attribute.
specify the same.
value.
valuePosition
Since v 3.2
String ABOVE
BELOW
AUTO
1019
edge of the canvas.
of the anchor.
anchor.
anchor background.
etc.
1020
Back to top

Trend-lines
chart.
as under:
<trendLines>
</trendLines>
Value
102.
Value
1021
startValue.
text.
of trend line.
each dash.
each dash gap.

1.28 Grid Component
Parameter Name Type Description
showPercentValues Boolean Whether to show the numbers on grid as percentage or actual
values
numberItemsPerPage Number Number of data items that you want to display in one particular
page. Use this attribute if you want to force your own value. Else,
FusionCharts calculates the best fit value.
showShadow Boolean Whether to show shadow for color boxes and navigation buttons.
1022

Background Properties
bgColor Color If you want the grid to have a different background color from
chart, use this attribute to specify the same.
bgAlpha Number If you want the grid to have a different background alpha from
bgRatio Number If you want the grid to have a different background ratio from
bgAngle Number If you want the grid to have a different background angle from

Border Properties
showBorder Boolean Whether to show border for the grid.
borderColor Color If you want the grid to have a different border color from chart,
use this attribute to specify the same.
borderThickness Number If you want the grid to have a different border thickness from
borderAlpha Number If you want the grid to have a different border alpha from chart,
use this attribute to specify the same.

Font Properties
baseFont Font If you want the grid to have a different font face from chart, use
this attribute to specify the same.
baseFontSize Number If you want the grid to have a different font size from chart, use
baseFontColor Color If you want the grid to have a different font color from chart, use

Alternate data rows and divider properties
alternateRowBgColor Color Background color of alternate data rows
alternateRowBgAlpha Number Transparency of alternate data rows

listRowDividerThickness Number Thickness of the line separating two data rows
1023
listRowDividerColor Color Color of the line separating two data rows
listRowDividerAlpha Number Alpha of the line separating two data rows.

colorBoxWidth Number Width of the rectangular color box indicating each data item.
colorBoxHeight Number Height of the rectangular color box indicating each data item.

Navigation button properties
navButtonRadius Number Radius (in pixels) of the navigation button(s), which appears when
paging is required.
navButtonColor Color Color of the navigation button(s), which appears when paging is
required.
navButtonHoverColor Color Hover color of the navigation button(s), which appears when
paging is required.

Paddings
textVerticalPadding Number Vertical padding (space in pixels) between the list row divider
line and the text between the lines.
navButtonPadding Number Vertical padding (space in pixels) between the last data item and
the navigation buttons. The navigation buttons appear only when
paging is required.
colorBoxPadding Number Horizontal distance between the left edge of the grid and the
color box (indicating data color).
valueColumnPadding Number Horizontal distance between the data value and the right edge.
nameColumnPadding Number Horizontal distance between the data name and the right edge of
color box.

2. Addenda
2.1 Plotting Discontinuous data
You might often want to plot charts with incomplete data points - that is, missing data. For example, when
plotting a monthly sales chart, you might not have data for all the months. So, you might just want to
indicate the missing data with a blank space on the chart not plotting anything at that particular place.
1024
FusionCharts lets you do this very easily.
Consider the following XML:
XML
JSON
<chart >
<set label='May' />
<set label='Jun' />
</chart>
{
"chart":{},
"data":[{
"label":"Jan",
"value":"420"
},
{
"label":"Feb",
"value":"295"
},
{
"label":"Mar",
"value":"523"
},
{
"label":"Apr",
"value":"473"
},
{
"label":"May"
1025
},
{
"label":"Jun"
},
{
"label":"Jul",
"value":"354"
},
{
"label":"Aug",
"value":"457"
},
{
"label":"Sep",
"value":"127"
},
{
"label":"Oct",
"value":"354"
},
{
"label":"Nov",
"value":"485"
},
{
"label":"Dec",
"value":"486"
}
]
}
Here, we do not have data for May and June. So, we are not providing any value attribute for the same.
The chart will look as under:
1026

You can see that there are no columns for May and June in this chart.
If you run the same data against a Line chart, you will see the following output:

The line chart shows a break for May and Jun, as there is no data for the same. If you do not even have
data labels for the missing data, you can write empty set elements for the missing data as under:
XML
JSON
<set />
"data":[{}
]

Connecting Null Data
In our above Line chart, we were showing a break for the months of May and June. If you do not want to
show this break for May and Jun, and want April to directly connect to July, you can do so using the newly
introduced connectNullData attribute in v3.
To do so, you just need to set <chart ... connectNullData='1' ..> and the chart will now look as
under:
1027

This attribute is valid for all the Line and Area charts.
The complete XML data for chart reproduced again, as under:
XML
JSON
<chart showValues='0' connectNullData='1'>
<set label='May' />
<set label='Jun' />
</chart>
{
"chart":{
"showvalues":"0",
"connectnulldata":"1"
},
"data":[{
"label":"Jan",
"value":"420"
},
{
"label":"Feb",
1028
"value":"295"
},
{
"label":"Mar",
"value":"523"
},
{
"label":"Apr",
"value":"473"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul",
"value":"354"
},
{
"label":"Aug",
"value":"457"
},
{
"label":"Sep",
"value":"127"
},
{
"label":"Oct",
"value":"354"
},
{
"label":"Nov",
"value":"485"
},
{
"label":"Dec",
"value":"486"
}
1029
]
}
Or, if you want to highlight this break while connecting, you can use the dashed feature as under:
XML
JSON
<chart showValues='0' connectNullData='1' lineDashGap='6'>
<set label='Apr' value='473' dashed='1'/>
<set label='May' />
<set label='Jun' />
</chart>
{
"chart":{
"showvalues":"0",
"connectnulldata":"1",
"linedashgap":"6"
},
"data":[{
"label":"Jan",
"value":"420"
},
{
"label":"Feb",
"value":"295"
},
{
"label":"Mar",
"value":"523"
},
{
"label":"Apr",
1030
"value":"473",
"dashed":"1"
},
{
"label":"May"
},
{
"label":"Jun"
},
{
"label":"Jul",
"value":"354"
},
{
"label":"Aug",
"value":"457"
},
{
"label":"Sep",
"value":"127"
},
{
"label":"Oct",
"value":"354"
},
{
"label":"Nov",
"value":"485"
},
{
"label":"Dec",
"value":"486"
}
]
}
This will result in the following chart:
1031

2.2 Gradients
FusionCharts v3 introduces gradient fill for various chart elements like background, canvas, plot etc. You
can now fill these chart objects using gradient patterns, whose properties can be decided and set by you.
We will use the example of background and see how to apply gradients to background, as the background is
common to all charts. The background of each chart can be configured using the following four attributes:
bgColor This attribute sets the background color for the chart. To specify a
gradient as background color, separate the hex color codes of each color
in the gradient using comma. Example: FF5904,FFFFFF. Remember to
remove # and any spaces in between.
bgAlpha Sets the alpha (transparency) for the background. If you have opted for
gradient background, you need to set a list of alpha(s) separated by
comma.
bgRatio If you have opted for a gradient background, this attribute lets you set
the ratio of each color constituent.
bgAngle Angle of the background color, in case of a gradient.
In Example
Let us now see how to apply a simple custom gradient to the background. We will create a gradient that
starts from orange (#ff5904) and fades into white (#ffffff) and will be evenly distributed on the
background. For a start, we will set the alpha as 100 for both the color constituents and set angle as 0
degree (left to right). The following data helps us do so:
XML
JSON
<chart bgColor='FF5904,FFFFFF' bgAlpha='100,100' bgRatio='0,100' bgAngle='0'>
<set label='John' value='420' />
1032
<set label='Mary' value='295' />
<set label='Tom' value='523' />
</chart>
{
"chart":{
"bgcolor":"FF5904,FFFFFF",
"bgalpha":"100,100",
"bgratio":"0,100",
"bgangle":"0"
},
"data":[{
"label":"John",
"value":"420"
},
{
"label":"Mary",
"value":"295"
},
{
"label":"Tom",
"value":"523"
}
]
}
Here, we are first defining bgColor as a comma separated list of colors (hex codes without #) which we
want our gradient to contain.
Now for each color, we have to specify an alpha in bgAlpha attribute, again as comma separated values.
When this attribute is defined as bgAlpha="80,50" and is coupled with bgColor="FF5904,FFFFFF", the
color FF5904 will be shown in 80% alpha while the color FFFFFF will be shown in 50% alpha.

Please note that when you use this attribute, you need to make sure that number of colors defined in
bgColor is same as the number of alpha defined in bgAlpha. For example, if you are creating a gradient
fill by specifying two colors, then you need to specify two alphas for this attribute as well, or else you may
get unexpected results.
Next, we have defined our ratio for the gradient fill as bgRatio='0,100'. When this attribute is defined
as bgRatio="80,20" and is coupled with bgColor="FF5904,FFFFFF", the color FF5904 will occupy 80%
of the gradient fill while the color FFFFFF will get 20%. As in bgAlpha, there needs to be as many ratio
values separated by commas as there are colors in bgColor. Also, the sum of all the ratio values should be
100. By default, FusionCharts splits all the colors in the list proportionally, that is, if you have two colors
1033
and do not define this attribute, then both the colors will have 50% fill ratio.
Finally, we set the angle of the gradient as 0 degree (left to right).
When you now see the chart, you will get the following output:

In this example, we only saw how to apply gradient to background. In 2D charts, you can apply gradients to
chart canvas also.
Moreover, in Column 2D and Area 2D charts, you can use plotGradientColor attribute to specify
gradients for dataplot too.

2.3 Number Formatting in FusionCharts
FusionCharts v3 offers a lot of options to format numbers on the chart. You can configure number prefixes
& suffixes, decimal places, and scaling of numbers based on a pre-defined scale. In this section, we will
see the number formatting properties supported by FusionCharts and look into number scaling in the next
section.
We will start with setting decimal precisions for the numbers on chart.
Configuring decimal places (rounding)
All the charts in FusionCharts v3 support the attribute decimals. This single attribute lets you control the
decimal precision of all the numbers on the chart. Using this attribute, you can globally set the number of
decimal places of all numbers of the chart.
For example, if you have numbers on your chart as 12.432, 13.4 and 13 and you set <chart ...
decimals='2' >, the numbers will be converted to 12.43, 13.4 and 13 respectively.
1034

Chart without any decimal formatting applied With decimals set to 2 (see the first column value)
Similarly, if you had data as 0.12352, 0.134 and 0.13, and you set decimals as 3, FusionCharts will output
0.124, 0.134 and 0.13 respectively. Note that even though we have set decimals to 3, FusionCharts now
does not forcibly add the 0 padding to 0.13 to form 0.130, as the trailing 0 is un-necessary.
However, if you want your numbers on the chart to have trailing zeroes too, you can set <chart ...
forceDecimals='1' > and now the numbers will show as 0.124, 0.134 and 0.130 respectively. Shown
below are examples:

Trailing zeroes missing in last column's value Forcing trailing zeroes by setting forceDecimals='1'
On Dual y-axis charts, you have to set decimals and configuration per-axis. So, the XML/JSON will look
like:
XML
JSON
<chart decimals='3' sDecimals='2' forceDecimals='1' >
"chart":{
"decimals":"3",
"sdecimals":"2",
"forcedecimals":"1"
}
Here, sDecimals refers to the decimal places to be added to any data point plotted against secondary axis
1035
(hence the prefix s before decimals).
Automatic number formatting
FusionCharts automatically formats your numbers by adding K,M (Kilo, Million) and proper commas to the
numbers. Shown below is an example:

In the above image, the data for chart is 12500, 13400 and 13300. FusionCharts automatically formats the
number scaling to convert to K (Thousands) & M (Millions). If you do not wish to truncate numbers in this
manner, just use:
XML
JSON
<chart formatNumberScale='0'...>
"chart":{
"formatnumberscale":"0"
...
}
When you now view the chart, you will get the following output:

You can see above that FusionCharts is now showing full numbers on the chart. It has also added commas
to the numbers at the required places. If you do not need the commas too, set formatNumber=0. But,
setting formatNumber=0 will not format any decimal places too (even if explicitly specified in your data).
1036
Shown below is an example with <chart ... formatNumber='0' formatNumberScale='0' ..> :

You can see that the commas have been removed from numbers.
Again, for Dual y-axis charts, you will have to set it explicitly for secondary axis using the XML/JSON
below. While the primary axis, by default, scales numbers to K,M, the secondary axis does not. For the
secondary axis to scale to K,M, you will have to explicitly define number scaling for the axis.
XML
JSON
<chart ... formatNumber='0' formatNumberScale='0' sFormatNumber='0'
sFormatNumberScale='0'...>
"chart":{
...
"formatnumber":"0",
"formatnumberscale":"0",
"sformatnumber":"0",
"sformatnumberscale":"0"
...
}
Here, the prefix s represents secondary axis.
Setting custom thousand and decimal separator character
By default, FusionCharts uses . (period) as decimal separator and , (comma) as thousand separator
character. However, you can customize this character depending on your requirements.
To do so, use the decimalSeparator and thousandSeparator attribute. For example, let us set our
thousands separator as dot and decimal separator as comma. To do so, you will have to use the following
data:
XML
JSON
1037
<chart ... decimalSeparator=',' thousandSeparator='.' >
"chart":{
...
"decimalseparator":",",
"thousandseparator":"."
}
Shown below is the output.

Chart with default decimal and thousand separators.
FusionCharts by default separates thousands using commas
and decimals using dots.
Chart with swapped decimal and thousands
separator character

Configuring thousand separator position
FusionCharts automatically decides the position of the thousand separator. By default, the thousand
separator is placed after every three digits from right. A chart with default thousand separator position
will look as under:

Starting FusionCharts XT -Service Release 3, you can customize the position of the thousand separator and
place it as required. To place the thousand separator in custom positions you need to use the
thousandSeparatorPosition attribute. Shown below is a chart with the thousand separator placed
after four digits from right:

1038

In the above chart, the attribute thousandSeparatorPosition is set to '4'. So, the thousand separator
(,) is placed after every four digits starting from right.
You can also set multiple values (separated by comma) to this attribute, instead of a single value. Thus,
you can specify complex thousand separator positions. For example, specifying multiple values, you can
display numbers in Indian currency format, where the first thousand separator (for thousand) is placed
after three digits from right and then onwards the thousand separator is placed after every two digits.
Shown below is an example chart displaying Indian currency format:

In the above chart, we have set thousandSeparatorPosition='2,3'. So, the thousand separator is first
placed after 3 digits starting from right and then onwards after every two digits. Given below are some
sample combinations of values which can be set to this attribute:
Value set Description Example
thousandSeparatorPosition="0" When this attribute is set to
0, it takes the default value,
which is 3, and places the
separator after every three
digits starting from right.
Rule: When zero is specified
as the thousand separator
1,344,317,518
1039
position, it assumes the
default value, which is 3.
2, the thousand separator is
placed after every two digits
starting from right.
13,44,31,75,18
4, the thousand separator is
placed after every four digits
starting from right.
13,4431,7518
thousandSeparatorPosition="1,2" In this case, first the thousand
separator is placed after two
digits from right. Then
onwards the separator will be
placed after every digit.
1,3,4,4,3,1,7,5,18
thousandSeparatorPosition="1,2,3" In this scenario, first the
separator will be placed after
three digits from right, then
the separator will be placed
after two digits and then
onwards it will be placed after
every digit.
1,3,4,4,3,17,518
thousandSeparatorPosition="3,1,0" In this scenario, the value 0
will be replaced by the
default value 3. So, the
thousand separator will be
first placed after three digits
from right. Then the separator
is placed after one digit. Then
every three digits.
as the first thousand separator
position in a comma separated
list of thousand separator
positions, it assumes the
default value, which is 3.
134,431,7,518
thousandSeparatorPosition="1,0,2" This is a special case where 0
is used as the second value. In
1,3,4,4,3,1,75,18
1040
this scenario, first the
thousand separator is placed
after two digits. Next, the
value 0 assumes the previous
value, which is 2. Hence, the
separator will again be placed
after two digits and then
every digit.
NOT as the first thousand
separator position in a comma
separated list of thousand
separator positions, it
assumes the previous value
from the list.
thousandSeparatorPosition="0,1,3" In this scenario, first the
thousand separator is placed
after three digits. Then it is
placed after every digit. Now,
the value 0 assumes the
previous value, 1 and rest of
the separators are placed
after every digit.
NOT as the first thousand
separator position in a comma
separated list of thousand
separator positions, it
assumes the previous value
from the list.
1,3,4,4,3,1,7,518

Note: Any negative value set to this attribute will be converted to a positive value. For example,
thousandSeparator="-2" will be converted to thousandSeparator="2".

Adding number prefix and suffix
FusionCharts allows you to add a prefix or suffix to all numbers on the chart. You can use the following
1041
attributes of <chart> element to attain the same:
numberPrefix="$" : Using this attribute, you could add prefix to all the numbers visible on the graph
(plotted on primary axis). 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 a suffix 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.
sNumberPrefix="$" : Using this attribute, you could add prefix to all the numbers visible on the graph
(plotted against secondary axis, in case of dual y-axis charts).
sNumberSuffix="p.a" : Using this attribute, you could add a suffix to all the numbers visible on the
graph (plotted against secondary axis, in case of dual y-axis charts).
To know more on how to use currency symbols (, , etc.) refer to Using Currency Symbols(See 2.7) page.
If you intended to use special punctuation or characters like &, <, >, % etc. refer to Using Special
Punctuation(See 2.8) page.
Examples:

Number Prefix set as $ for the chart Number Suffix Set as %
Decimal formatting for y-axis values when automatic adjustment of div-lines is off
If you have opted to manually set the number of divisional lines on chart, you can also control the decimals
of y-axis values separately. For example, consider the following data and chart:
XML
JSON
<chart yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' >
<set label='Andy' value='131' />
</chart>
1042
{
"chart":{
"yaxisminvalue":"115",
"yaxismaxvalue":"140",
"adjustdiv":"0",
"numdivlines":"3"
},
"data":[{
"label":"John",
"value":"125"
},
{
"label":"Mary",
"value":"134"
},
{
"label":"Andy",
"value":"131"
}
]
}
The chart for this XML/JSON looks as under:

In this chart, we have manually fixed the chart lower limit, upper limit and number of divisional lines. We
have also asked FusionCharts not to automatically adjust divisional lines. Now, if you see the chart, you
will find that FusionCharts has truncated decimals from y-axis values, as it could not find any other
decimal values on the chart.
You can, however, opt to just show decimals on y-axis values in this case (when adjustDiv is false) using
forceYAxisValueDecimals='1' and yAxisValueDecimals='number' attribute.
Example:
1043
XML
JSON
<chart yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3'
forceYAxisValueDecimals='1' yAxisValueDecimals='2' decimals='0' >
"chart":{
"yaxisminvalue":"115",
"yaxismaxvalue":"140",
"adjustdiv":"0",
"numdivlines":"3",
"forceyaxisvaluedecimals":"1",
"yaxisvaluedecimals":"2",
"decimals":"0"
}
When you now see the chart, you will get 2 decimal places on y-axis values.

For charts with dual y-axis, the XML/JSON will be:
XML
JSON
<chart ... forceSYAxisValueDecimals='1' SYAxisValueDecimals='2' ...>
"chart":{
...
"forcesyaxisvaluedecimals":"1",
"syaxisvaluedecimals":"2"
...
}

2.4 Using formatted input numbers
In some countries, commas are used as decimal separators and dots as thousand separators. But, if you
1044
directly specify such numbers in FusionCharts XML/JSON, it will give an error while converting to number.
FusionCharts v3 introduces a smart way to let you specify numbers in your own format in XML/JSON.
Consider the data below:
XML
JSON
<chart inThousandSeparator='.' inDecimalSeparator=',' formatNumberScale='0'>
<set label='John' value='420.315,43' />
<set label='Mary' value='295.345,98' />
<set label='Tom' value='523.323,76' />
</chart>
{
"chart":{
"inthousandseparator":".",
"indecimalseparator":",",
},
"data":[{
"label":"John",
"value":"420.315,43"
},
{
"label":"Mary",
"value":"295.345,98"
},
{
"label":"Tom",
"value":"523.323,76"
}
]
}
In this data, we are providing the numbers in the non-standard convention - that is, we have used dot as
the thousand separator and comma as the decimal separator (as followed in some European countries).
Now, to make sure that FusionCharts reads these numbers in the right way, we convey our input decimal
and thousand separator characters as under:
XML
JSON
<chart ... inThousandSeparator='.' inDecimalSeparator=',' ...>
1045
"chart":{
...
"indecimalseparator":","
...
}
This tells FusionCharts that it should treat dot in the input numbers as thousands (instead of normal
decimals) and comma as decimals.
Note that this feature does NOT work in Zoom Line chart to optimize it for high dataset volume. In that
chart, you will have to specify numbers in standard format (using . as decimal separator and no commas in
number). However, output number formatting (that is, the way numbers are shown on chart) can be
configured fully.
When you now view this chart, you will get the following output:

You can see that FusionCharts has interpreted the numbers properly and automatically converted the
numbers into the standard format. If you want to output the number again in the non-conventional format,
you can use the following XML/JSON:
XML
JSON
<chart inThousandSeparator='.' inDecimalSeparator=',' thousandSeparator='.'
decimalSeparator=',' formatNumberScale='0'>
<set label='John' value='420.315,43' />
<set label='Mary' value='295.345,98' />
<set label='Tom' value='523.323,76' />
</chart>
{
"chart":{
1046
"indecimalseparator":",",
"thousandseparator":".",
"decimalseparator":",",
},
"data":[{
"label":"John",
"value":"420.315,43"
},
{
"label":"Mary",
"value":"295.345,98"
},
{
"label":"Tom",
"value":"523.323,76"
}
]
}
In the above data we are specifying custom characters for both input and output formats. When you now
see the chart, you will get something as under:

2.5 Number Scaling
FusionCharts v3 introduces the concept of number scaling. Number scaling lets you shorten the numbers on
charts using commonly used scales (like K,M etc.). You can define your own scales for numbers and then
apply it to all numbers on the chart.
Basic Example
1047
Let us start with the most basic example which is already defined in FusionCharts - thousands (K) and
millions (M) scale.
By default, if your numbers on the chart are greater than 1000, FusionCharts scales them to K (Thousands)
or M (Millions). For example, if you plot a chart with data as 12500, 13400 and 13300, you'll see the
following chart:

As you can see above, FusionCharts has scaled the numbers down to K. By default, FusionCharts has the
K,M (1000,1000) scaling defined for each chart. If you do not want this scaling to be applied by default, you
can set:
XML
JSON
<chart formatNumberScale='0' ...>
"chart":{
...
}
You can, however, change it to anything you wish. Let us see it in the next example.
Adding billions to default scaling
FusionCharts, by default, has 1000,1000 (K,M) scaling defined for all charts. It does not have the scaling for
billions defined. Let us modify the number scaling to add Billion so that the final scale looks like
1000,1000,1000 (K,M,B).
This scale, in human terms, will look something as under:
1000 = 1 K
1000 K = 1 M
1000 M = 1 B
Now, to convert this scale into FusionCharts XML/JSON format, you will have to do the following:
1048
1. Define your own scale for the chart as under:
1. XML
2. JSON
<chart numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' >
"chart":{
"numberscalevalue":"1000,1000,1000",
"numberscaleunit":"K,M,B"
}
If you carefully see this and match it with previous table, you will find that whatever numeric figure was
present on the left hand side of the table is put in numberScaleValue and whatever unit was present on
the right side of the scale table has been put under numberScaleUnit - all separated by commas.
2. Set the chart formatting flags to on as under:
0. XML
1. JSON
<chart formatNumber='1' formatNumberScale='1' ...>
"chart":{
"formatnumber":"1",
...
}
When you now view a chart containing data in billions, you will see as under. Note that the chart now
contains figure both in millions and billions.

The XML/JSON for this chart can be listed as under:
XML
JSON
<chart numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' numberPrefix='$'>
1049
</chart>
{
"chart":{
"numberscaleunit":"K,M,B",
"numberprefix":"$"
},
"data":[{
"label":"John",
"value":"986000000"
},
{
"label":"Mary",
"value":"3134000000"
},
{
"label":"Andy",
"value":"3245000000"
}
]
}
In case of Dual y-axis charts, to apply this scaling to the secondary axis, you will need to write the
following XML/JSON (note the s prefix before each attribute indicating secondary axis).
XML
JSON
<chart sFormatNumberScale='1' sNumberScaleValue='1000,1000,1000'
sNumberScaleUnit='K,M,B' sNumberPrefix='$'>
</chart>
{
"chart":{
"sformatnumberscale":"1",
"snumberscalevalue":"1000,1000,1000",
"snumberscaleunit":"K,M,B",
1050
"snumberprefix":"$"
},
"data":[{
"label":"John",
"value":"986000000"
},
{
"label":"Mary",
"value":"3134000000"
},
{
"label":"Andy",
"value":"3245000000"
}
]
}

Another Example - Putting time in scale
Let us consider another example where we intend to plot time related figures on the chart. Say we are
plotting a chart which indicates the time taken by a list of automated processes. Each process in the list
can take time ranging from a few seconds to few days. And we have the data for each process in seconds
itself. Now, if we were to show all the data on the chart in seconds only, it will not appear too legible.
What we can do is build a scale indicating time and then specify it to the chart. This scale, in human
terms, will look something as under:
60 seconds = 1 minute
60 minute = 1 hr
24 hrs = 1 day
7 days = 1 week
Now, to convert this scale into FusionCharts XML/JSON format, you will have to do it as under:
1. First you will need to define the unit of the data which you are providing. Like, in this example, you are
providing all data in seconds. So, default number scale will be represented in seconds. We can represent it
as under:
1. XML
2. JSON
<chart defaultNumberScale='s' ...>
"chart":{
"defaultnumberscale":"s"
1051
...
}

2. Next, we define our own scale for the chart as under:
0. XML
1. JSON
<chart numberScaleValue='60,60,24,7' numberScaleUnit='min,hr,day,wk' >
"chart":{
"numberscalevalue":"60,60,24,7",
"numberscaleunit":"min,hr,day,wk"
}
Again, if you carefully see this and match it with our range, you will find that whatever numeric figures are
present on the left hand side of the range is put in numberScaleValue and whatever units are present on
the right side of the scale has been put under numberScaleUnit - all separated by commas.
3. Set the chart formatting flags to on as under:
0. XML
1. JSON
<chart formatNumber='1' formatNumberScale='1' ...>
"chart":{
"formatnumber":"1",
...
}
The entire data looks as under:
XML
JSON
<chart defaultNumberScale='s' numberScaleValue='60,60,24,7'
numberScaleUnit='min,hr,day,wk'>
<set label='A' value='38' />
<set label='B' value='150' />
<set label='C' value='11050' />
<set label='D' value='334345' />
<set label='E' value='1334345' />
</chart>
{
1052
"chart":{
"defaultnumberscale":"s",
"numberscalevalue":"60,60,24,7",
"numberscaleunit":"min,hr,day,wk"
},
"data":[{
"label":"A",
"value":"38"
},
{
"label":"B",
"value":"150"
},
{
"label":"C",
"value":"11050"
},
{
"label":"D",
"value":"334345"
},
{
"label":"E",
"value":"1334345"
}
]
}
When you now view the chart, you will see that all the data has been automatically scaled to the best
value. Like:
38 was converted to 38s
150 was converted to 2.50min
11050 was converted to 3.07hr
334345 was converted to 3.87 day
1334345 was converted to 2.21wk
1053

In case of Dual y-axis charts, to apply this scaling to the secondary axis, you will need to write the
following XML/JSON (note the s prefix before each attribute indicating secondary axis).
XML
JSON
<chart sFormatNumberScale='1' sDefaultNumberScale='s' sNumberScaleValue='60,60,24,7'
sNumberScaleUnit='min,hr,day,wk'>
</chart>
{
"chart":{
"sdefaultnumberscale":"s",
"snumberscalevalue":"60,60,24,7",
"snumberscaleunit":"min,hr,day,wk"
},
"data":[{
"label":"A",
"value":"38"
},
{
"label":"B",
"value":"150"
},
{
"label":"C",
"value":"11050"
1054
},
{
"label":"D",
"value":"334345"
},
{
"label":"E",
"value":"1334345"
}
]
}

Storage Size Example
Take another example, where you are plotting a chart indicating memory usage of a network server. The
usage can be from few bits to a few gigabytes. Again, you have all your data in bits - so we can render the
range as under:
8 bits = 1 Byte
1024 bytes = 1 KB
1024 KB = 1 MB
1024 MB = 1 GB
1024 GB = 1 TB
And the XML/JSON can be written as under:
XML
JSON
<chart defaultNumberScale='bits' numberScaleValue='8,1024,1024,1024,1024'
numberScaleUnit='bytes,KB,MB,GB,TB' >
"chart":{
"defaultnumberscale":"bits",
"numberscalevalue":"8,1024,1024,1024,1024",
"numberscaleunit":"bytes,KB,MB,GB,TB"
}
Similarly, for Dual y-axis chart, it will be:
XML
JSON
<chart sFormatNumberScale='1' sDefaultNumberScale='bits'
sNumberScaleValue='8,1024,1024,1024,1024' sNumberScaleUnit='bytes,KB,MB,GB,TB'>
1055
"chart":{
"sdefaultnumberscale":"bits",
"snumberscalevalue":"8,1024,1024,1024,1024",
"snumberscaleunit":"bytes,KB,MB,GB,TB"
}

Length/Distance Example
Let us consider another length or distance example. The standard length or distance range can be rendered
as under (with inches being the default unit):
12 inches = 1 feet
3 feet = 1 yard
1760 yards = 1 mile
So, we can write the XML/JSON as under:
XML
JSON
<chart defaultNumberScale='inches' numberScaleValue='12,3,1760'
numberScaleUnit='feet,yards,miles' >
"chart":{
"defaultnumberscale":"inches",
"numberscaleunit":"feet,yards,miles"
}
Similarly, for dual y-axis chart, it will be:
XML
JSON
<chart sFormatNumberScale='1' sDefaultNumberScale='inches' sNumberScaleValue='12,3,1760'
sNumberScaleUnit='feet,yards,miles' >
"chart":{
"sdefaultnumberscale":"inches",
"snumberscalevalue":"12,3,1760",
"snumberscaleunit":"feet,yards,miles"
}

1056
2.6 Number Formatting - Recursive Number
Scaling
FusionCharts XT-Service Release 3 introduces the Recursive Number Scaling feature. Recursive number
scaling comes into the picture when you have number scales defined for your chart.It helps you to
understand the chart data better by breaking-up the predefined number scale into smaller sections. For
example, in a chart where time is being plotted, you can display 3.87 days as 3 days, 20 hours, 52 minutes
and 25 seconds.
Let us jump to an example straightaway to understand this better.
Let us build a chart which indicates the time taken by a list of automated processes. Each process in the
list can take time ranging from a few seconds to few days. And we have the data for each process in
seconds itself. Now, if we were to show all the data on the chart in seconds only, it will not appear too
legible. What we can do is build a scale indicating time and then specify it to the chart. This scale will look
something as under:
60 seconds = 1 minute
60 minute = 1 hr
24 hrs = 1 day
7 days = 1 week
We can define the same in our chart using:
numberScaleUnit='min,hr,day,wk' ... >
Please see the Number Scaling(See 2.5) page for more details on how to build a number scale. Now let us
consider the XML/JSON below:
XML
JSON
numberScaleUnit='min,hr,day,wk'>
</chart>
1057
{
"chart": {
"defaultnumberscale": "s",
"numberscalevalue": "60,60,24,7",
"numberscaleunit": "min,hr,day,wk"
},
"data": [
{
"label": "A",
"value": "38"
},
{
"label": "B",
"value": "150"
},
{
"label": "C",
"value": "81050"
},
{
"label": "D",
"value": "334345"
},
{
"label": "E",
"value": "534345"
}
]
}

The above XML/JSON when used for a Column chart will give us this:

1058

You can see above how owing to the number scale we defined, the values in seconds are getting converted
into hours, mins etc. according to the magnitude of the value entered. Neat work, but will you not rather
prefer this?

Notice how 22.51 hours is converted to 22 hrs, 30 mins and 50 s; 3.87 days to 3 days, 20 hrs, 52 mins and
25 s. This chart makes use of recursive number scaling and after converting the time in seconds to say
hours, whatever is left over is not converted into decimals and shown. It is rather converted into smaller
units of time and broken down as far as possible - so the remaining seconds are first converted to minutes
and then when the seconds are too few to be converted into minutes, they are displayed in seconds itself.
This gives us a fair idea of how much time was used for each task.
To use recursive number scaling, all you have to do is set <chart ... scaleRecursively='1' .. >.
1059
The entire XML/JSON for the chart above is:
XML
JSON
numberScaleUnit='min,hr,day,wk' scaleRecursively='1'>
</chart>
{
"chart": {
"defaultnumberscale": "s",
"numberscalevalue": "60,60,24,7",
"numberscaleunit": "min,hr,day,wk",
"scalerecursively": "1"
},
"data": [
{
"label": "A",
"value": "38"
},
{
"label": "B",
"value": "150"
},
{
"label": "C",
"value": "81050"
},
{
"label": "D",
"value": "334345"
},
{
"label": "E",
"value": "534345"
1060
}
]
}
You can also control the levels of recursion. Suppose in the above chart, instead of 3 days, 20 hrs, 52 mins
and 25 s, you are pretty happy with showing 3 day, 20 hrs itself either for space constraints or some other
good reason. You can control the levels of recursion for all the numbers on your chart using the
maxScaleRecursion attribute. Suppose you want only two levels of recursion, then set <chart ...
maxScaleRecursion='2'>. This will convert the above chart to:

Notice how all the numbers on the chart are using a maximum of two time units - the rest have been
truncated. When you want all the units of a number to be shown on the chart, you can either omit the
maxScaleRecursion attribute or set it to -1.
By default, all the units of a number are separated by a space. You can customize the separator using the
scaleSeparator attribute. For example, setting scaleSeparator=', ' will separate each unit with a
comma as shown below:
1061

Note: To scale the numbers recursively on the Secondary Y-Axis in a Dual Y-Axis chart, the attributes
sScaleRecursively, sMaxScaleRecursion and sScaleSeparator are used.

2.7 Using Currency Symbols on Chart
Currency symbols, For example, (Pound), (Euro), (Yen) etc., may also be a part of the data which is
displayed on charts. This section guides you on how to include the most used currency symbols as a part of
your charts.
Using Pound() sign
To display Pound character on a chart, you can simply include it in the XML/JSON data source of the chart.
This is applicable in both Data URL and Data String methods.
Following data includes the character:
XML
JSON
<chart showValues="1" caption="Revenue for 2009" numberPrefix="" xAxisName="Quarter"
yAxisName="Revenue" >
<set value="235000" label="Quarter 1"/>
</chart>
1062
{
"chart":{
"showvalues":"1",
"caption":"Revenue for 2009",
"numberprefix":"",
"xaxisname":"Quarter",
"yaxisname":"Revenue"
},
"data":[{
"value":"235000",
"label":"Quarter 1"
},
{
"value":"125100",
"label":"Quarter 2"
},
{
"value":"334200",
"label":"Quarter 3"
},
{
"value":"414500",
"label":"Quarter 4"
}
]
}
The above data produces a chart with the symbol prefixed to all numeric values:

When using the HTML embedding method with data provided as embedded string, it is essential to
1063
encode pound character as %A3.
Using Yen() sign
To display Yen character on a chart, you can simply include it in the XML/JSON data source of the chart.
Following data includes character:
XML
JSON
</chart>
{
"chart":{
"showvalues":"1",
"numberprefix":"",
},
"data":[{
"value":"235000",
"label":"Quarter 1"
},
{
"value":"125100",
"label":"Quarter 2"
},
{
"value":"334200",
"label":"Quarter 3"
},
{
"value":"414500",
"label":"Quarter 4"
1064
}
]
}
The above data produces a chart with prefixed to all numeric values:

encode yen character as %A5.
Using Cent() sign
To display Cent character on a chart, you can simply include it in the XML/JSON data source of the chart.
XML
JSON
</chart>
{
"chart":{
"showvalues":"1",
"numberprefix":"",
1065
},
"data":[{
"value":"235000",
"label":"Quarter 1"
},
{
"value":"125100",
"label":"Quarter 2"
},
{
"value":"334200",
"label":"Quarter 3"
},
{
"value":"414500",
"label":"Quarter 4"
}
]
}

encode cent character as %A2.
Using Euro() sign
To display Euro character on a chart, you can simply include it in the XML/JSON data source of the chart.
1066
XML
JSON
</chart>
{
"chart":{
"showvalues":"1",
"numberprefix":"",
},
"data":[{
"value":"235000",
"label":"Quarter 1"
},
{
"value":"125100",
"label":"Quarter 2"
},
{
"value":"334200",
"label":"Quarter 3"
},
{
"value":"414500",
"label":"Quarter 4"
}
]
}
The above data produces a chart with the symbol prefixed to all numeric values:
1067

Euro character falls into the category of extended unicode character-set. To display a euro character in
your chart, the XML file should be encoded with UTF-8 BOM signature, otherwise the character will not be
displayed properly. To know more about BOM and how to add it in your XML, please read What is BOM.

When using the HTML embedding method with data provided as embedded string, you need to use
%E2%82%AC (the encoded form) instead of character.
Using Franc() sign
To display Franc character on a chart, you can simply include it in the XML/JSON data source of the chart.
XML
JSON
</chart>
{
"chart":{
"showvalues":"1",
"numberprefix":"",
1068
},
"data":[{
"value":"235000",
"label":"Quarter 1"
},
{
"value":"125100",
"label":"Quarter 2"
},
{
"value":"334200",
"label":"Quarter 3"
},
{
"value":"414500",
"label":"Quarter 4"
}
]
}

Franc character falls into the category of extended unicode character-set. To display a franc character in
your chart, the XML file should be encoded with UTF-8 BOM signature, otherwise the character will not be
displayed properly. To know more about BOM and how to add it in your XML, please refer to What is BOM.

When using the HTML embedding method with data provided as embedded string, you need to use
%E2%82%A3 (the encoded form) instead of character.
1069

2.8 Using Special Punctuation on Chart
You can directly embed most of the special characters and punctuation marks in the XML/JSON data source
of your chart. However, &, , ' (apostrophe) and "(quote) need to be specially encoded when providing the
same as a part of the chart data. Apart from this, there is no need to encode any other special character.
In the following sections of this page, we will learn how to use special punctuation marks like - &, <, >, '
(apostrophe) and "(quote).
Using & sign
To display & character on a chart, you need to use the encoded form of the character - & in your
chart data (XML or JSON). It is applicable in both Data URL and Data String methods.
Following data includes & character:
XML
JSON
<chart showValues="1" caption="Total Revenue of 2008 & 2009" numberPrefix="$"
xAxisName="Quarter" yAxisName="Revenue" >
</chart>
{
"chart":{
"showvalues":"1",
"caption":"Total Revenue of 2008 & 2009",
"numberprefix":"$",
},
"data":[{
"value":"235000",
"label":"Quarter 1"
},
{
"value":"125100",
"label":"Quarter 2"
},
1070
{
"value":"334200",
"label":"Quarter 3"
},
{
"value":"414500",
"label":"Quarter 4"
}
]
}
The above data produces a chart with & in its caption, as under:

encode & character to %26.
Using < or > sign
You cannot directly use < and > characters in FusionCharts data as these are invalid characters from XML
perspective. To use , you first need to convert them into < and >, respectively. It is applicable in
both Data URL and Data String methods.
Following data includes < and > characters:
XML
JSON
<chart showValues="0" caption="Percentage of Labor Force By Age Group" xAxisName="Age
Group" yAxisName="Labor Force">
<set value="13" label="<20"/>
<set value="27" label="21-60"/>
<set value="17" label=">60"/>
1071
</chart>
{
"chart":{
"showvalues":"0",
"caption":"Percentage of Labor Force By Age Group",
"xaxisname":"Age Group",
"yaxisname":"Labor Force"
},
"data":[{
"value":"13",
"label":"<20"
},
{
"value":"27",
"label":"21-60"
},
{
"value":"17",
"label":">60"
}
]
}
The above data produces a chart with < and > characters in its data labels:

Typically, text in FusionCharts is rendered in normal mode. But, you can also render the text in limited
HTML mode too. In case, you need to use HTML text as part of any label, you will need to customize the
chart object using Styles and set isHTML property to 1 in Font Styles. Also, you need to double encode the
< and > characters in this case, or these will be considered as starting and end brackets of HTML tags.
Hence, < should be used instead of < and > should be used instead of >. A sample data is
shown as below:
1072
XML
JSON
<chart showValues="0" caption="Percentage of Labor Force By Age Group" xAxisName="Age
Group" yAxisName="Labor Force">
<set value="13" label="<20"/>
<set value="27" label="21-60"/>
<set value="17" label=">60"/>

<styles>
<definition>
<style name="HTMLMode" type="font" isHTML="1" />
</definition>
<application>
<apply toObject="DATALABELS" styles="HTMLMode" />
</application>
</styles>

</chart>
{
"chart":{
"showvalues":"0",
"caption":"Percentage of Labor Force By Age Group",
},
"data":[
{ "value":"13", "label":"<20" },
{ "value":"27", "label":"21-60" },
{ "value":"17", "label":">60" }
],
"styles": {
"definition": [
{
"name": "HTMLMode",
"type": "font",
"ishtml": "1"
}
],
"application": [
{
1073
"toobject": "DATALABELS",
"styles": "HTMLMode"
}
]
}
}
encode < and > characters to %26lt; and %26gt; ,respectively. In case, HTML text mode is set on,
%26amp;lt; and %26amp;gt; are to be used, respectively.
Using Apostrophe(') sign
To display ' (apostrophe) character on a chart, it is recommended to encode it as '. It is applicable
in both Data URL and Data String methods.
A sample where data includes the ' (apostrophe) character is as shown below:
XML
JSON
<chart showValues="1" xAxisName="Student's Name" yAxisName="Score" >
<set label='John's Score' value='420' />
<set label='Mary's Score' value='295' />
<set label='Tom's Score' value='413' />
<set label='Jack's Score' value='523' />
</chart>
{
"chart":{
"showvalues":"1",
"xaxisname":"Student's Name",
"yaxisname":"Score"
},
"data":[{
"label":"John's Score",
"value":"420"
},
{
"label":"Mary's Score",
"value":"295"
},
1074
{
"label":"Tom's Score",
"value":"413"
},
{
"label":"Jack's Score",
"value":"523"
}
]
}
The above data produces a chart with '(apostrophe) in its data labels:

encode '(apostrophe) character to %26apos;.
Using Quote(") sign
To display the " (double-quotation or quotes) character on a chart, is recommended to encode it as
". It is applicable in both Data URL and Data String methods.
The following data shows how quotes are used:
XML
JSON
<chart showValues="0" caption="Labor Force By Age Group" xAxisName="Age Group"
yAxisName="Labor Force">
<set value="27" label=""Teenager""/>
<set value="43" label=""Adult""/>
</chart>
{
1075
"chart":{
"caption":"Labor Force By Age Group",
},
"data":[
{ "value":"27", "label":""Teenager"" },
{ "value":"43", "label":""Adult"" },
]
}
The above data produces a chart as shown below with quotes in data labels:

encode "(quote) character to %26quot.

Using Percent(%) sign
At times, you might also want to include the % (percent) sign in your chart data. To display % (percent)
sign on a chart, you can simply include it in the XML/JSON data source of the chart. It is applicable in both
Data URL and Data String methods.
Following data includes the % character:
XML
JSON
<chart showValues="1" caption="Revenue for 2009" numberSuffix="%" xAxisName="Quarter"
1076
</chart>
{
"chart":{
"showvalues":"1",
"numbersuffix":"%",
},
"data":[{
"value":"23",
"label":"Quarter 1"
},
{
"value":"14",
"label":"Quarter 2"
},
{
"value":"22",
"label":"Quarter 3"
},
{
"value":"41",
"label":"Quarter 4"
}
]
}
The above data produces a chart with % suffixed to all numeric values:
1077

Note that while using the HTML embedding method and dataXML, it is essential to encode percent
character to %25.

Fusion Charts

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Fusion Charts

Hochgeladen von

Copyright:

Verfügbare Formate

FusionCharts - Chart XML API

FusionCharts - Chart XML API

Das könnte Ihnen auch gefallen