Current File : /home/caballoscriollos/public_html/espanol/encuesta/graphs/contents/chartss/xml_column3d.html
<html>
<head>
<title>
FusionCharts FREE - XML Structure
</title>
<link REL="stylesheet" HREF="Style.css" />
</head>
<body topMargin="15" leftMargin="15">
<span class="pageHeader">Column 3D Chart Specification Sheet</span>
<br />
<span class="textbold">SWF: </span>
<span class="text">FCF_Column3D.swf</span>
<br />
<br />
<table width="98%" border="0" align="right" cellpadding="2" cellspacing="1">
<tr>
<td valign="top" class="text">A 3D Column chart looks as under:</td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/XML_3DCol_1.gif" width="450" height="244" /></td>
</tr>
<tr>
<td valign="top" class="text"> <p>And, the XML data for this chart can be
listed as under:</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><graph bgcolor='e1f5ff' caption='Decline
in Net Interest Margins of Asian Banks (1995-2001)' subCaption='(in Percentage
%)' yaxismaxvalue="2" yaxisminvalue='-2.5' yaxisname='Points'
xaxisname='Country' hovercapbg='FFFFDD' hovercapborder='000000' numdivlines='4'
numberSuffix='%25'> <br /> <set name='Taiwan' value='-0.33'
color='F6BD0F'/> <br /> <set name='Malaysia' value='-0.27'
color='FF6600'/> <br /> <set name='Hong Kong' value='0.40'
color='8BBA00' alpha='70'/> <br /> <set name='Philippines'
value='0.6' color='F984A1'/> <br /> <set name='Singapore'
value='-0.8' color='A66EDD' alpha='70'/><br /> <set
name='Thailand' value='-2.2' color='B2FF66'/> <br /> <set
name='India' value='1.2' color='AFD8F8'/> <br /> <trendlines><br />
<line startvalue='0.8' displayValue='Good' color='FF0000'
thickness='1' isTrendZone='0'/><br /> <line startvalue='-0.4'
displayValue='Bad' color='009999' thickness='1' isTrendZone='0'/><br />
</trendlines><br /> </graph></td>
</tr>
<tr>
<td class="text"><p> </p></td>
</tr>
<tr>
<td class="trLightBlueBg"><p class="header"><graph> Attributes </p></td>
</tr>
<tr>
<td class="text">The <span class="codeInline"><graph></span> element for
this chart can have the following properties:
<p> </p></td>
</tr>
<tr>
<td valign="top" class="text">
<p class="textbold">Background Properties</p>
<ul>
<li><span class="codeInline">bgColor="HexColorCode" </span>: This
attribute sets the background color for the chart. You can set any hex
color code as the value of this attribute. Remember that you DO NOT
need to assign a "#" at the beginning of the hex color code.
In fact, whenever you need to provide any hex color code in FusionCharts
XML data document, you do not have to assign the # at the beginning. </li>
<li><span class="codeInline"> bgAlpha="NumericalValue(0-100)"
</span>: This attribute helps you set the alpha (transparency) of the
graph. This is particularly useful when you need to load the chart in
one of your Flash movies or when you want to set a background image
(.swf) for the chart. </li>
<li><span class="codeInline">bgSWF="Path of SWF File" </span>:
This attribute helps you load an external .swf file as a background
for the chart.</li>
</ul>
<p><span class="textbold">Canvas Properties</span></p>
<ul>
<li><span class="codeInline">canvasBgColor="HexColorCode" </span>:
This attribute helps you set the background color of the canvas. The
background of the canvas is the one behind the columns.</li>
<li>canvasBaseColor<span class="codeInline">="HexColorCode" </span>:
This attribute helps you set the color of the canvas base. The canvas
abse is the on which the base of the columns are placed..</li>
<li><span class="codeInline"> canvasBaseDepth="Numerical Value"
</span>: This attribute helps you set the height (3D Depth) of the canvas
base.</li>
<li><span class="codeInline">canvasBaseDepth="Numerical Value"
</span>: This attribute helps you set the height (3D Depth) of the canvas
base.</li>
<li> <span class="codeInline">canvasBgDepth="Numerical Value"
</span>: This attribute helps you set the 3D Depth of the canvas background.</li>
<li><span class="codeInline">showCanvasBg="1/0" :</span> This
attribute helps us set whether we need to show the canvas background.</li>
<li> <span class="codeInline">showCanvasBase="1/0" :</span> This
attribute helps us set whether we need to show the canvas base.</li>
</ul>
<p class="textbold">Chart and Axis Titles</p>
<ul>
<li><span class="codeInline">caption="String" </span>: This attribute
determines the caption of the chart that would appear at the top of
the chart. </li>
<li><span class="codeInline">subCaption="String" :</span> Sub-caption
of the chart </li>
<li><span class="codeInline">xAxisName= "String"</span> : x-Axis
text title (if the chart supports axis) </li>
<li><span class="codeInline">yAxisName= "String"</span> : y-Axis
text title (if the chart supports axis) </li>
</ul>
<p class="textbold">Chart Numerical Limits</p>
<ul>
<li><span class="codeInline">yAxisMinValue="value"</span>: This
attribute determines the lower limit of y-axis.</li>
<li> <span class="codeInline">yAxisMaxValue="value"</span> : This
attribute determines the upper limit of y-axis.<br />
If you don't specify any of the above values, it is automatically calculated
by FusionCharts based on the data provided by you.</li>
</ul>
<p class="textbold">Generic Properties</p>
<ul>
<li><span class="codeInline">shownames="1/0"</span> : 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. </li>
<li> <span class="codeInline">showValues="1/0"</span> : This attribute
can have either of the two possible values: 1,0. It sets the configuration
whether the data numerical values will be displayed along with the columns,
bars, lines and the pies. By default, this attribute assumes the value
1, which means that the values will be displayed. </li>
<li><span class="codeInline">showLimits="1/0"</span> : Option
whether to show/hide the chart limit textboxes.</li>
<li><span class="codeInline">rotateNames="1/0"</span> : Configuration
that sets whether the category name text boxes would be rotated or not.</li>
<li><span class="codeInline">animation="1/0"</span> : This attribute
sets whether the animation is to be played or whether the entire chart
would be rendered at one go.</li>
</ul>
<p class="textbold">Font Properties</p>
<ul>
<li><span class="codeInline">baseFont="FontName"</span> : This
attribute sets the base font family of the chart font which lies on
the canvas i.e., all the values and the names in the chart which lie
on the canvas will be displayed using the font name provided here.</li>
<li><span class="codeInline"> baseFontSize="FontSize"</span> :
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. </li>
<li><span class="codeInline"> baseFontColor="HexColorCode" </span>:
This attribute sets the base font color of the chart i.e., all the values
and the names in the chart which lie on the canvas will be displayed
using the font color provided here. </li>
<li><span class="codeInline"> outCnvBaseFont = "FontName"</span>
: 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. </li>
<li><span class="codeInline"> outCnvBaseFontSze="FontSize"</span>
: This attribute sets the base font size of the chart i.e., all the
values and the names in the chart which lie outside the canvas will
be displayed using the font size provided here. </li>
<li> <span class="codeInline">outCnvBaseFontColor="HexColorCode":</span>
This attribute sets the base font color of the chart i.e., all the values
and the names in the chart which lie outside the canvas will be displayed
using the font color provided here.</li>
</ul>
<p class="textbold">Number Formatting Option</p>
<ul>
<li><span class="codeInline">numberPrefix="$" </span>: 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. </li>
<li><span class="codeInline"> numberSuffix="p.a"</span> : 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. <br />
<strong>To use special characters for <span class="codeInline">numberPrefix</span>
or <span class="codeInline">numberSuffix</span>, you'll need to URL Encode
them. That is, suppose you wish to have <span class="codeInline">numberSuffix</span>
as <span class="codeInline">%</span> (like <span class="codeInline">30%</span>),
you'll need to specify it as under:<br />
<span class="codeInline">numberSuffix='%25' </span></strong></li>
<li><span class="codeInline"> formatNumber="1/0"</span> : 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 '</li>
<li><span class="codeInline">formatNumberScale="1/0" :</span>
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. </li>
<li><span class="codeInline">decimalSeparator="."</span> : This
option helps you specify the character to be used as the decimal separator
in a number.</li>
<li> <span class="codeInline">thousandSeparator=","</span> : This
option helps you specify the character to be used as the thousands separator
in a number.</li>
<li> <span class="codeInline">decimalPrecision="2"</span> : Number
of decimal places to which all numbers on the chart would be rounded
to.</li>
<li><span class="codeInline">divLineDecimalPrecision="2":</span>
Number of decimal places to which all divisional line (horizontal) values
on the chart would be rounded to.</li>
<li> <span class="codeInline">limitsDecimalPrecision="2" :</span>
Number of decimal places to which upper and lower limit values on the
chart would be rounded to.</li>
</ul>
<p class="textbold">Zero Plane</p>
The zero plane is a 3D plane that signifies the 0 position on
the chart. If there are no negative numbers on the chart, you won't see
a visible zero plane.
<ul>
<li><span class="codeInline">zeroPlaneShowBorder="1/0"</span>
: Whether the border of a 3D zero plane would be plotted or not.</li>
<li><span class="codeInline"> zeroPlaneBorderColor="Hex Code"</span>
: If the border is to be plotted, this attribute sets the border color
for the plane.</li>
<li><span class="codeInline"> zeroPlaneColor="Hex Code" </span>:
The intended color for the zero plane.</li>
<li> <span class="codeInline">zeroPlaneAlpha="Numerical Value 0-100"
</span>: The intended transparency for the zero plane.</li>
</ul>
<p class="textbold">Divisional Lines (Horizontal)</p>
<p>Divisional Lines are horizontal or vertical lines running through the
canvas. Each divisional line signfies a smaller unit of the entire axis
thus aiding the users in interpreting the chart.</p>
<ul>
<li><strong> </strong><span class="codeInline">numdivlines="NumericalValue"</span>
: This attribute sets the number of divisional lines to be drawn.</li>
<li> <span class="codeInline">divlinecolor="HexColorCode"</span>
: The color of grid divisional line.</li>
<li> <span class="codeInline">divLineThickness="NumericalValue"</span>
: Thickness (in pixels) of the grid divisional line.</li>
<li> <span class="codeInline">divLineAlpha="NumericalValue0-100"
</span>: Alpha (transparency) of the grid divisional line.</li>
<li> <span class="codeInline">showDivLineValue="1/0"</span> :
Option to show/hide the textual value of the divisional line.</li>
</ul>
<p class="textbold">Hover Caption Properties</p>
<p>The hover caption is the tool tip which shows up when the user moves
his mouse over a particular data item (column, line, pie, bar etc.).</p>
<ul>
<li><span class="codeInline">showhovercap="1/0"</span> : Option
whether to show/hide hover caption box. </li>
<li><span class="codeInline"> hoverCapBgColor="HexColorCode"</span>
: Background color of the hover caption box.</li>
<li><span class="codeInline"> hoverCapBorderColor="HexColorCode"</span>
: Border color of the hover caption box.</li>
<li> <span class="codeInline">hoverCapSepChar="Char" </span>:
The character specified as the value of this attribute separates the
name and value displayed in the hover caption box. </li>
</ul>
<p class="textbold">Chart Margins</p>
<p>Chart Margins refers to the empty space left on the top, bottom, left
and right of the chart. That means, FusionCharts would leave that much
amount of empty space on the chart, before it starts plotting. </p>
<ul>
<li><span class="codeInline">chartLeftMargin="Numerical Value (in pixels)"
:</span> Space to be left unplotted on the left side of the chart.</li>
<li><span class="codeInline"> chartRightMargin="Numerical Value (in
pixels)" :</span> Empty space to be left on the right side of the
chart</li>
<li><span class="codeInline"> chartTopMargin="Numerical Value (in pixels)"
:</span> Empty space to be left on the top of the chart.</li>
<li> <span class="codeInline">chartBottomMargin="Numerical Value (in
pixels)" :</span> Empty space to be left at the bottom of the chart.</li>
</ul></td>
</tr>
<tr>
<td class="text"> </td>
</tr>
<tr>
<td class="header"><p class="trLightBlueBg"><set> element</p></td>
</tr>
<tr>
<td class="text"><p>We now move on to the <span class="codeInline"><set></span>
element which is a child element of the <span class="codeInline"><graph></span>
element and determines a set of data which would appear on the graph.
</p>
<p>A <span class="codeInline"><set></span> element looks as under: <br />
<span class="codeInline"><set name="Jan" value="54"
color="3300FF" hoverText="January" link="ShowDetails.asp%3FMonth=Jan"
alpha="80" showName="1"/></span> </p>
<p>Now let's study the the possible attributes of the <span class="codeInline"><set></span>
element: </p></td>
</tr>
<tr>
<td class="text"><ul>
<li><span class="codeInline">name="string"</span><br />
Example: <span class="codeInline"><set name='Jan' ...></span><br />
This attribute determines the name by which the set of data would be
represented in the chart. In the above example, the value of this attribute
is "Jan" and therefore, this set of data would be represented
on the chart with the name "Jan". <br />
</li>
<li><span class="codeInline">value="NumericalValue"</span><br />
Example: <span class="codeInline"><set name='Jan' value='12345' ...></span><br />
This attribute determines the numerical value for the set of data according
to which the chart would be built for the concerned set of data. <br />
</li>
<li><span class="codeInline">color="HexCode"</span><br />
Example: <span class="codeInline"><set name='Jan' value='12345' color='636363'
...></span><br />
This attribute determines the color for the concerned set of data in
which it would appear in the graph. <br />
</li>
<li><span class="codeInline">hoverText="String value"</span><br />
Example: <span class="codeInline"><set name='Jan' value='12345' color='636363'
hoverText='January'...></span><br />
Sometimes, you might just want to show the abbreviated names on the
x-axis (to avoid cluttering or to make the chart look more legible).
However, you still have the option of showing the full name as tool
tip using this attribute. Like, in our example, we're showing the abbreviated
form <span class="codeInline">"Jan"</span> on our x-axis, but
the full word <span class="codeInline">"January"</span> is shown
as the tool tip.<br />
</li>
<li><span class="codeInline">link="URL"</span><br />
Example: <span class="codeInline"><set … link='ShowDetails.asp%3FMonth=Jan'
...></span><br />
This attribute defines the hotspots in your graph. The hotspots are
links over the data sets. Please note that you'll need to URL Encode
all the special characters (like ? and &) present in the link.All
the server side scripting languages provide a generic function to URL
Encode any string - like in ASP and ASP.NET, we've Server.URLEncode(strURL)
and so on. <br />
<br />
To open a link in a new window, just put <span class="codeInline">n-</span>
in front of the link e.g., <span class="codeInline">link="n-ShowDetails.asp%3FMonth=Jan"</span>.
<br />
</li>
<li><span class="codeInline">alpha="Numerical Value 0-100"</span><br />
Example: <span class="codeInline"><set ... alpha='100' ...></span><br />
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. <br />
</li>
<li><span class="codeInline">showName="1"</span><br />
Example : <span class="codeInline"><set ... showName="1"
...></span><br />
This attribute can either the value of 0 or 1. A value of 1 indicates
that the name of this data set will be displayed in the graph whereas
0 indicates it won't be displayed. This attribute is particular useful
when you want to show/hide names of alternate data items or say every
x (th) data item.</li>
</ul>
<p> At the end of the <set> element, you would find a "/"
which signals that it has no more child element <br />
</p></td>
</tr>
<tr>
<td class="text"> </td>
</tr>
<tr>
<td class="trLightBlueBg"><p class="header"><trendLines></p></td>
</tr>
<tr>
<td class="text"><p>Using the <span class="codeInline"><trendLines></span>
element (and child elements), you can define trend lines on the charts.
Trend lines are the horizontal lines spanning the chart canvas that aid
in interpretation of data with respect to some previous pre-determined
figure. For each trend line on the chart, you need to define a <span class="codeInline"><line></span>
element as under:<br />
<span class="codeInline"><line startValue='89.5' endValue='98' color='FF0000'
displayvalue='Roll. Avg.' thickness='2' alpha='100' isTrendZone='0' showOnTop='1'/> </span></p>
<p>The <span class="codeInline"><line></span> element can have the following
attributes:</p>
<ul>
<li><span class="codeInline">startValue='NumericalValue'</span>: The starting
y-axis value for the trendline. Say, if you want to plot a slanted trendline
from value 102 to 109, the startValue would 102.</li>
<li><span class="codeInline">endValue='NumericalValue'</span>: The ending
y-axis value for the trendline. Say, if you want to plot a slanted trendline
from value 102 to 109, the endValue would 109. If you do not specify
a value for endValue, it would automatically assume the same value as
startValue.</li>
<li><span class="codeInline">color='HexCode'</span> : Color of the trend
line and its associated text.</li>
<li><span class="codeInline">displayValue='StringValue'</span> : If you
want to display a string caption for the trend line by its side, you
can use this attribute. Example: <span class="codeInline">displayValue='Last
Month High'</span>. When you don't supply this attribute, it automatically
takes the value of <span class="codeInline">startValue</span>.</li>
<li><span class="codeInline">thickness='NumericalValue' </span>: Thickness
of the trend line</li>
<li> <span class="codeInline">isTrendZone='1/0': </span><span class="text">Whether
the trend would display a line, or a zone (filled colored rectangle).</span> </li>
<li><span class="codeInline">showOnTop='1/0'</span>: Whether the trend line/zone
would be displayed over other elements of the chart.</li>
<li><span class="codeInline">alpha='NumericalValue0-100'</span>: Alpha (transparency)
of the trend line</li>
</ul></td>
</tr>
<tr>
<td class="text">At the end of the data file, you would find a <span class="codeInline"></graph></span>
element, which signals the end of the data file for the graph.</td>
</tr>
<tr>
<td class="text"> </td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat