- bgcolor = "HexColorCode"
Example: <graph bgcolor='FFFFDD'...>
This attribute determines the background color of the entire body of
the graph. You can change this value to that of any hex color code of
your liking. Remember that you DO NOT need to assign a "#"
at the beginning of the hex color code. That would be taken as a default.
- canvasbgcolor="HexColorCode"
Example: <graph ... canvasbgcolor='FFDDDD'
...>
This attribute specifies the background color of the graph canvas.
- xaxisname="value"
Example: <graph ... xaxisname='Month' ...>
This attribute determines the caption of the x-axis.
- yaxisname="value"
Example: <graph ... yaxisname='Hits received'
...>
This attribute determines the caption of the y-axis.
- caption="GraphCaption"
Example: <graph ... caption='Hits received
by www.abc.com in 2002' ...>
This attribute determines the caption of the graph that would appear
at the top of the graph.
- subcaption="Graph-Sub-Caption"
Example: <graph ... subcaption='Figures are
in thousands'>
This attribute determines the sub-caption of the graph that would appear
right below the caption of the graph.
- yaxisminvalue="0"
Example: <graph ... yaxisminvalue='0' ...>
This attribute determines the lower limit of y-axis. If you don't specify
this value, it is automatically calculated by FusionCharts based on
the data provided by you.
- yaxismaxvalue="0"
Example: <graph ... yaxismaxvalue='0' ...>
This attribute determines the upper limit of y-axis. If you don't specify
this value, it is automatically calculated by FusionCharts based on
the data provided by you.
- formatNumber='1'
Example: <graph ... formatNumber='1' ...>
This configuration determines whether the numbers displayed on the graph
will be formatted using commas, e.g., 40,000 if formatNumber='1' and
40000 if formatNumber='0
- numberPrefix=''
Example: <graph ... numberPrefix='$' ...>
Using this attribute, you could add prefix to all the numbers visible
on the graph. For example, to represent all dollars figure on the chart,
you could specify this attribute to ' $' to show like $40000, $50000
- numberSuffix='/a'
Example: <graph ... numberSuffix='/a' ...>
Using this attribute, you could add prefix to all the numbers visible
on the graph. For example, to represent all figure quantified as per
annum on the chart, you could specify this attribute to ' /a' to show
like 40000/a, 50000/a.
- decimalSeparator="."
Example: <graph ... decimalSeparator='.' ...>
This option helps you specify the character to be used as the decimal
separator in a number.
- thousandSeparator=","
Example: <graph ... thousandSeparator='.'
...>
This option helps you specify the character to be used as the thousands
separator in a number.
- decimalPrecision="2"
Example: <graph ... decimalPrecision='.' ...>
Number of decimal places to which all numbers on the chart would be
rounded to.
- formatNumberScale="1/0"
Example: <graph ... formatNumberScale='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, 10434 would become 1.04K (with decimalPrecision set to 2 places).
Same with numbers in millions - a M will added at the end.
- animation="1"
Example: <graph ... animation='0' ...>
This attribute can have either of the two possible values: 1,0. A value
of 1 (which is assumed by default if this attribute is not provided)
indicates that the graph would be animated while it is being rendered.
And, the value 0 indicates that the graph is to be rendered in non-animated
mode.
- animspeed="NumericalValueBetween1and10"
Example: <graph ... animspeed='2' ...>
If the graph is to be rendered in animated mode, then this attribute
determines the speed of animation – applicable only in case of
line chart. Higher the number, it would animate faster
- basefont="FontName"
Example: <graph ... basefont='Verdana' ...>
This attribute sets the base font family of the graph font which lies
on the canvas i.e., all the values and the names in the graph which
lie on the canvas will be displayed using the font name provided here.
- basefontsize="ValidFontSize"
Example: <graph ... basefontsize='10' ...
>
This attribute sets the base font size of the graph i.e., all the values
and the names in the graph which lie on the canvas will be displayed
using the font size provided here.
- basefontcolor="HexColorWithout#"
Example: <graph ... basefontcolor='0372AB'
... >
This attribute sets the base font color of the graph i.e., all the values
and the names in the graph which lie on the canvas will be displayed
using the font color provided here.
- outcnvbasefont="FontName"
Example: <graph ... basefont='Verdana' ...>
This attribute sets the base font family of the graph font which lies
outside the canvas i.e., all the values and the names in the graph which
lie outside the canvas will be displayed using the font name provided
here.
- outcnvbasefontsize="ValidFontSize"
Example: <graph ... basefontsize='10' ...
>
This attribute sets the base font size of the graph i.e., all the values
and the names in the graph which lie outside the canvas will be displayed
using the font size provided here.
- outcnvbasefontcolor="HexColorWithout#"
Example: <graph ... basefontcolor='0372AB'
... >
This attribute sets the base font color of the graph i.e., all the values
and the names in the graph which lie outside the canvas will be displayed
using the font color provided here.
- shownames="0"
Example: <graph ... shownames='1' ...>
This attribute can have either of the two possible values: 1,0. It sets
the configuration whether the x-axis values (for the data sets) will
be displayed or not. By default, this attribute assumes the value 1,
which means that the x-axis names will be displayed.
- showvalues="0"
Example: <graph ... showvalues='1' ...>
This attribute can have either of the two possible values: 1,0. It sets
the configuration whether the y-axis numerical values will be displayed
along with the columns, bars, lines and the pies. By default, this attribute
assumes the value 1, which means that the y-axis values will be displayed.
- showYLimits="1"
Example: <graph ... showYLimits="1"
...>
This attribute can have either of the two possible values: 1,0. It sets
the configuration whether the y-axis limits textboxes would be displayed
or not.
- showCanvas="1"
Example: <graph ... showCanvas="1"
...>
This attribute can have either of the two possible values: 1,0. It sets
the configuration whether the canvas would be displayed or not.
- bgSWF="Skin.swf"
Example: <graph ... bgSWF="Skin.swf"
...>
This attribute specifies the URL of the background SWF to be loaded
in the graph.
- showgridbg="1"
Example: <graph ... showgridbg='1' ...>
This attribute can have either of the two possible values: 1,0. It sets
the configuration whether the background of the grid will be shown or
not.
- gridbgcolor="HexCode"
Example: <graph ... gridbgcolor='F1F1F1' ...>
If you have opted to show the grid background, then using this attribute
you could specify the hex color code for the grid background.
- numdivlines="value"
Example: <graph ... numdivlines='3' ...>
This attribute specifies the number of divisional grid lines that would
appear on the graph.
- divlinecolor="HexCode"
Example: <graph ... divlinecolor='333333'
...>
If you have opted to show any divisional grid lines on the graph canvas,
then using this attribute you can specify the hex color code for all
such lines.
- divlinethickness="Number"
Example: <graph ... divlinethickness='2'>
Thickess of the grid divisional line in pixels.
- showDivLineValues="1/0"
Example: <graph ... showDivLineValues='1'
...>
Option to set whether the div line text would be displayed for each
div line. By default, this attribute has a value of 1 - i.e., all the
div line values are displayed.
- showhovercap="1"
Example: <graph ... showhovercap='1' ...>
This attribute can have either of the two possible values: 1,0. It sets
the configuration whether the data set name and value will be displayed
when the mouse is hovered over the data set.
- hovercapbg="HexCode"
Example: <graph ... hovercapbg='FFFFFD' ...>
If you have the showhovercap attribute containing the value 1, you could
use this attribute to specify the background color of the hover box.
- hovercapborder="HexCode"
Example: <graph ... hovercapborder='666666'
...>
If you have the showhovercap attribute containing the value 1, you could
use this attribute to specify the border color of the hover box.
- hovercapSepChar="Char"
Example: <graph ... hovercapSepChar=':' ...>
The character specified as the value of this attribute separates the
name and value displayed in the hover caption box.
- zeroPlaneColor="HexColor"
Example: <graph ... zeroPlaneColor="000000"
...>
If the graph data consists of negative numbers to be plotted, then this
attribute defines the color of the zero plane which would act as the
base for all the columns.
- zeroPlaneAlpha="NumericalValue(0-100)"
Example: <graph ... zeroPlaneAlpha="40"
...>
If the graph data consists of negative numbers to be plotted, then this
attribute defines the alpha of the zero plane which would act as the
base for all the columns.
- legendboxbgcolor="HexColorCode"
Example: <graph ... legendboxbgcolor='F1F1F1'
...>
In case of pie chart/doughnut, this attribute lets you set the background
color of the legend box.
- legendboxbrdrcolor="HexColorCode"
Example: <graph ... legendboxbrdrcolor='333333'
...>
In case of pie chart/doughnut, this attribute lets you set the border
color of the legend box.
- navbtncolor="HexColorCode"
Example: <graph ... navbtncolor='666666' ...>
In case of pie chart/doughnut, this attribute lets you set the color
of the navigation buttons (which appear to help us navigate through
the legend if the legends number exceeds the display limit).
- showActualValues="1/0"
Example: <graph ... showActualValues="1"
...>
Sets the configuration whether to display the percentage values on the
pie/doughnut chart or whether to display the actual values. By default,
this has a value of 0 - i.e., the percentage values are displayed on
the chart.
- linethickness="NumericalValue"
Example: <graph ... linethickness='2' ...>
In case of line chart, this attribute sets the thickness of the line
drawn.
- numVdivlines="value"
Example: <graph ... numVdivlines='3' ...>
This attribute specifies the number of vertical divisional grid lines
that would appear on the graph (applicable for line and pipe chart only).
- vDivlinecolor="HexCode"
Example: <graph ... vDivlinecolor='333333'
...>
If you have opted to show any vertical divisional grid lines on the
graph canvas, then using this attribute you can specify the hex color
code for all such lines (applicable for line and pipe chart only).
- vDivlinethickness="Number"
Example: <graph ... vDivlinethickness='2'>
Thickness of the vertical grid divisional line in pixels (applicable
for line and pipe chart only).
- vDivlineAlpha="Number"
Example: <graph ... vDivlineAlpha='2'>
Alpha of the vertical grid divisional line in pixels (applicable for
line and pipe chart only).
- anchorbgcolor="FF0000"
Example: <graph ... anchorbgcolor="FF0000"
...>
In case of line chart, this attribute specifies the background color
of the anchor to be drawn between the lines.
- anchorbrdrcolor="FF0000"
Example: <graph ... anchorbrdrcolor="FF0000"
...>
In case of line chart, this attribute specifies the border color of
the anchor to be drawn between the lines.
- anchorscale="100"
Example: <graph ... anchorscale="100"
...>
In case of line chart, this attribute helps us set the percentage size
of the anchor that is drawn at the junction of two lines. By default,
the anchor is drawn at a scale of 100. To increase the anchor size,
you need to increase this value and to decrease the anchor size, you
need to decrease this value.
- areaColor='FFFFDD'
(Applicable to Area Chart only)
Example: <graph ... areaColor='FFFFDD' ...>
Color of the area.
- areaAlpha='80'
(Applicable only to Area Chart only)
Example: <graph ... areaAlpha='80' ...>
The transparency factor of the entire area.
|
Now let's get on to each attribute of the
<set> element one-by-one:
- name="value"
Example: <set name='January' ...>
This attribute determines the name by which the set of data would be
represented in the graph. In the above example, the value of this attribute
is "January" and therefore, this set of data would be represented
on the graph with the name "January".
- value="NumericalValue"
Example: <set name='January' value='12345'
...>
This attribute determines the numerical value for the set of data according
to which the graph would be built for the concerned set of data.
- color="HexCode"
Example: <set name='January' value='12345'
color='636363' ...>
This attribute determines the color for the concerned set of data in
which it would appear in the graph.
- link="URL"
Example: <set … link='http://www.abc.com/def/ghi/jkl.asp?num1=2'
...>
This attribute defines the hotspots in your graph. The hotspots are
links over the data sets. To open a link in a new window, just put n-
in front of the link e.g., link="n-http://www.abc.com/def.html".
- alpha="NumericalValueBetween0And100"
Example: <set ... alpha='100' ...>
This attribute determines the transparency of a data set. The range
for this attribute is 0 to 100. 0 means complete transparency (the data
set won’t be shown on the graph) and 100 means opaque. This option
is useful when you want to highlight a particular set of data.
- isSliced="1"
Example : <set ... isSliced="1"
...>
In case of pie chart, this attribute determines whether the pie appears
as a part of the total circle or is sliced out as an individual item.
- showName="1"
Example : <set ... showName="1"
...>
This attribute can either the value of 0 or 1. A value of 1 indicates
that the name of this data set will be displayed in the graph whereas
0 indicates it won't be displayed.
At the end of the <set> element,
you would find a "/" which signals that it has no more child
element
And now finally, we shift our attention to the <trendlines>
element. A typical <trendlines> element
looks as under:
<trendlines>
<line value='40' color='0372AB' displayValue='Pass' thickness='1' alpha='20'/>
<line value='80' color='0372AB' displayValue='Good' thickness='120'
alpha='20'/>
</trendlines>
The <line> tag has the following
attributes:
- value="NumericalValue"
Example: <line ... value='63' ...>
This value indicates the point on graph where the trendline will be
plotted. For example, if a graph is drawn with limits 0-120, a trend-line
with value 60 would represent the data point 60.
- color="HexCode"
Example: <line ... color='636363' ...>
This attribute determines the color for the concerned trendline in which
it would appear in the graph.
- displayValue="TextualValue"
Example: <line ... displayValue="Safety
Level" ...>
This attribute determines the text that would appear next to the trendline.
If you don't specify anything for this attribute, the numerical value
would be displayed.
- thickness="Number"
Example: <line ... thickness='2'>
Thickess of the trend line in pixels. To show a trend zone, you may
specify a higher number, e.g., 60 to draw a trend zone of 60 point upwards
from the specified value.
- alpha="NumericalValueBetween0And100"
Example: <line ... alpha='100' ...>
This attribute determines the transparency of the line. The range for
this attribute is 0 to 100. 0 means complete transparency and 100 means
opaque. This option is useful when you want to create a semi-transparent
trend zone.
At the end of the data file, you would find a </graph>
element, which signals the end of the data file for the graph. |