Tiny File Manager

Back Back Up Advanced Editor

<html>
<head>
<title>
FusionCharts FREE - XML Structure
</title>
<link REL="stylesheet" HREF="Style.css" />
</head>

<body topMargin="15" leftMargin="15">
Pie 3D Chart Specification Sheet
 
SWF: 
FCF_Pie3D.swf
 
 
<table width="98%" border="0" align="right" cellpadding="2" cellspacing="1">
 
 <tr> 
 <td valign="top" class="text">A 3D Pie chart looks as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="text"><img src="Images/XML_3DPie1.gif" width="326" height="151" /></td>
 </tr>
 <tr> 
 <td valign="top" class="text"> And, the XML data for this chart can be 
 listed as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="codeBlock">&lt;graph caption='Pie Chart' bgColor='F1f1f1' 
 decimalPrecision='0' showPercentageValues='0' showNames='1' numberPrefix='$' 
 showValues='1' showPercentageInLabel='0' pieYScale='45' pieBorderAlpha='40' 
 pieFillAlpha='70' pieSliceDepth='15' pieRadius='100'&gt; 
 &nbsp;&nbsp;&nbsp; &lt;set value='25' name='Item A' color='FF9966'/&gt; 
 &nbsp;&nbsp;&nbsp; &lt;set value='17' name='Item B' color='FF0000'/&gt; 
 &nbsp;&nbsp;&nbsp; &lt;set value='23' name='Item C' color='006F00' /&gt; 
 &nbsp;&nbsp;&nbsp; &lt;set value='65' name='Item D' color='0099FF'/&gt; 
 &nbsp;&nbsp;&nbsp; &lt;set value='22' name='Item E' color='CCCC00'/&gt; &lt;/graph&gt;</td>
 </tr>
 <tr> 
 <td class="text">&nbsp; </td>
 </tr>
 <tr> 
 <td class="trLightBlueBg">&lt;graph&gt; Attributes</td>
 </tr>
 <tr> 
 <td class="text">The &lt;graph&gt; element for 
 this chart can have the following properties: 
 </td>
 </tr>
 <tr> 
 <td valign="top" class="text"> Background Properties
 <ul>
 <li>bgColor=&quot;HexColorCode&quot; : 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 &quot;#&quot; 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> bgAlpha=&quot;NumericalValue(0-100)&quot; 
 : 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>bgSWF=&quot;Path of SWF File&quot; : 
 This attribute helps you load an external .swf file as a background 
 for the chart.</li>
 </ul>
 Chart and Axis Titles
 <ul>
 <li>caption=&quot;String&quot; : This attribute 
 determines the caption of the chart that would appear at the top of 
 the chart. </li>
 <li>subCaption=&quot;String&quot; : Sub-caption 
 of the chart </li>
 </ul>
 Generic Properties
 <ul>
 <li>shownames=&quot;1/0&quot; : This attribute 
 can have either of the two possible values: 1,0. It sets the configuration 
 whether the data names will be displayed or not alongside the pie. </li>
 <li> showValues=&quot;1/0&quot; : This attribute 
 can have either of the two possible values: 1,0. It sets the configuration 
 whether the data values will be displayed along with the pies.</li>
 <li>showPercentageValues=&quot;1/0&quot; 
 : If you've opted to show the data value, this attribute helps you control 
 whether to show percentage values or actual values.</li>
 <li>showPercentageInLabel =&quot;1/0&quot; 
 : If you've opted to show the data value, this attribute helps you control 
 whether to show percentage values or actual values in the pie labels.</li>
 </ul>
 Pie Properties
 <ul>
 <li>pieRadius=&quot;Numeric Pixels&quot;: 
 FusionCharts automatically calculates the best fit pie radius for the 
 chart. However, if you want to enforce one of your own radius values, 
 you can set it using this attribute.</li>
 <li>pieSliceDepth=&quot;Numeric Value&quot; : 
 This attribute helps you set the 3D height (depth) of the pies on the 
 chart (in pixels).</li>
 <li>pieYScale=&quot;Numeric Value 30-100&quot; 
 : This value sets the skewness of the pie chart (vertical slant).</li>
 <li> pieBorderThickness&quot;Numeric Value&quot; 
 : Each pie on the chart has a border, whose thickness you can specify 
 using this attribute.</li>
 <li> pieBorderAlpha=&quot;0-100&quot; : 
 This attribute helps you set the border transparency for all the pie 
 borders.</li>
 <li> pieFillAlpha=&quot;0-100&quot; : This 
 attribute helps you set the transparency for all the pies on the chart. </li>
 </ul>
 Font Properties
 <ul>
 <li>baseFont=&quot;FontName&quot; : 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> baseFontSize=&quot;FontSize&quot; : 
 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> baseFontColor=&quot;HexColorCode&quot; : 
 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>
 </ul>
 Number Formatting Options
 <ul>
 <li>numberPrefix=&quot;$&quot; : 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> numberSuffix=&quot;p.a&quot; : Using 
 this attribute, you could add prefix to all the numbers visible on the 
 graph. For example, to represent all figure quantified as per annum 
 on the chart, you could specify this attribute to ' /a' to show like 
 40000/a, 50000/a. 
 To use special characters for numberPrefix 
 or numberSuffix, you'll need to URL Encode 
 them. That is, suppose you wish to have numberSuffix 
 as % (like 30%), 
 you'll need to specify it as under: 
 numberSuffix='%25' </li>
 <li> formatNumber=&quot;1/0&quot; : 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>formatNumberScale=&quot;1/0&quot; : 
 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>decimalSeparator=&quot;.&quot; : This 
 option helps you specify the character to be used as the decimal separator 
 in a number.</li>
 <li> thousandSeparator=&quot;,&quot; : This 
 option helps you specify the character to be used as the thousands separator 
 in a number.</li>
 <li> decimalPrecision=&quot;2&quot; : Number 
 of decimal places to which all numbers on the chart would be rounded 
 to.</li>
 </ul>
 Hover Caption Properties
 The hover caption is the tool tip which shows up when the user moves 
 his mouse over a particular data item (column, line, pie, bar etc.).
 <ul>
 <li>showhovercap=&quot;1/0&quot; : Option 
 whether to show/hide hover caption box. </li>
 <li> hoverCapBgColor=&quot;HexColorCode&quot; 
 : Background color of the hover caption box.</li>
 <li> hoverCapBorderColor=&quot;HexColorCode&quot; 
 : Border color of the hover caption box.</li>
 <li> hoverCapSepChar=&quot;Char&quot; : 
 The character specified as the value of this attribute separates the 
 name and value displayed in the hover caption box. </li>
 </ul></td>
 </tr>
 <tr> 
 <td class="trLightBlueBg">&lt;set&gt; element</td>
 </tr>
 <tr> 
 <td class="text">We now move on to the &lt;set&gt; 
 element which is a child element of the &lt;graph&gt; 
 element and determines a set of data which would appear on the graph. 
 
 A &lt;set&gt; element looks as under: 
 &lt;set name=&quot;Jan&quot; value=&quot;54&quot; 
 color=&quot;3300FF&quot; hoverText=&quot;January&quot; link=&quot;ShowDetails.asp%3FMonth=Jan&quot; 
 showName=&quot;1&quot;/&gt; 
 Now let's study the the possible attributes of the &lt;set&gt; 
 element: </td>
 </tr>
 <tr> 
 <td class="text"><ul>
 <li>name=&quot;string&quot; 
 Example: &lt;set name='Jan' ...&gt; 
 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 &quot;Jan&quot; and therefore, this set of data would be represented 
 on the chart with the name &quot;Jan&quot;. 
 </li>
 <li>value=&quot;NumericalValue&quot; 
 Example: &lt;set name='Jan' value='12345' ...&gt; 
 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. 
 </li>
 <li>color=&quot;HexCode&quot; 
 Example: &lt;set name='Jan' value='12345' color='636363' 
 ...&gt; 
 This attribute determines the color for the concerned set of data in 
 which it would appear in the graph. 
 </li>
 <li>hoverText=&quot;String value&quot; 
 Example: &lt;set name='Jan' value='12345' color='636363' 
 hoverText='January'...&gt; 
 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 &quot;Jan&quot; on our x-axis, but 
 the full word &quot;January&quot; is shown 
 as the tool tip. 
 </li>
 <li>link=&quot;URL&quot; 
 Example: &lt;set &#8230; link='ShowDetails.asp%3FMonth=Jan' 
 ...&gt; 
 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 &amp;) present in the link.All 
 the server side scripting languages provide a generic function to URL 
 Encode any string - like in ASP and ASP.NET, we've Server.URLEncode(strURL) 
 and so on. 
 
 To open a link in a new window, just put n- 
 in front of the link e.g., link=&quot;n-ShowDetails.asp%3FMonth=Jan&quot;. 
 
 </li>
 </ul>
 At the end of the &lt;set&gt; element, you would find a &quot;/&quot; 
 which signals that it has no more child element 
 At the end of the data file, you would find a &lt;/graph&gt; 
 element, which signals the end of the data file for the graph. 
 </td>
 </tr>
 <tr> 
 <td class="text">&nbsp;</td>
 </tr>
</table>
</body>
</html>