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">
Candlestick Chart Specification Sheet
 
SWF: 
FCF_Candlestick.swf
 
 
<table width="98%" border="0" align="right" cellpadding="2" cellspacing="1">
 
 <tr> 
 <td></td>
 </tr>
 <tr> 
 <td><img src="Images/CC_FC.gif" width="527" height="270" /></td>
 </tr>
 <tr>
 <td class="text">A general XML document for the candlestick chart looks as 
 under: </td>
 </tr>
 <tr> 
 <td height="10"></td>
 </tr>
 <tr> 
 <td class="codeBlock">&lt;graph caption='3 Months - As on 04/02/04' 
 yaXisMinValue='89' yaXisMaxValue='102' canvasBorderColor='DAE1E8' canvasBgColor='FFFFFF' 
 bgColor='EEF2FB' numDivLines='12' divLineColor='DAE1E8' decimalPrecision='1' 
 numberPrefix='$' showNames='1' bearBorderColor='E33C3C' bearFillColor='E33C3C' 
 bullBorderColor='1F3165' baseFontColor='444C60' outCnvBaseFontColor='444C60' 
 hoverCapBorderColor='DAE1E8' hoverCapBgColor='FFFFFF' rotateNames='0' &gt; 
 &lt;categories font='Verdana' fontSize='10' fontColor='000000' 
 verticalLineColor='' verticalLineThickness='1' verticalLineAlpha='100'&gt; 
 &lt;category Name='2004' xIndex='1' showLine='1'/&gt; 
 &lt;category Name='Feb' xIndex='31' showLine='1'/&gt; 
 &lt;category Name='March' xIndex='59' showLine='1'/&gt; 
 &lt;category Name='Split' xIndex='44' showLine='1'/&gt; 
 &lt;/categories&gt; 
 
 &lt;data&gt; 
 &lt;set open='92.57' high='93.79' low='92.45' close='93.39' xIndex='1' 
 /&gt; 
 &lt;set open='92.4' high='92.7' low='91.42' close='92.45' xIndex='2' /&gt; 
 &lt;set open='92.6' high='92.69' low='90.88' close='91.82' xIndex='3'/&gt; 
 &lt;set open='92' high='93.38' low='91.68' close='93.3' xIndex='4'/&gt; 
 &lt;set open='92' high='92.98' low='91.15' close='91.21' xIndex='5'/&gt; 
 &lt;!-- More Data Here --&gt; 
 &lt;set open='93.23' high='93.25' low='92.67' close='93.14' xIndex='60'/&gt; 
 &lt;set open='93' high='93.38' low='92.5' close='92.73' xIndex='61'/&gt; 
 &lt;set open='93.85' high='93.87' low='92.85' close='93.4' xIndex='62'/&gt; 
 &lt;/data&gt; 
 
 &lt;trendLines&gt; 
 &lt;line startValue='89.5' endValue='98' color='FF0000' displayvalue='Roll. 
 Avg.' thickness='2' alpha='100' isTrendZone='0'/&gt; 
 &lt;/trendLines&gt; 
 &lt;/graph&gt;</td>
 </tr>
 <tr> 
 <td class="text">As you can see in the above XML document, there are basically 
 four sections of data:
 <ol>
 <li>&lt;graph&gt; section - This section 
 helps you set the various visual attributes for the chart apart from 
 a few other numerical attributes.</li>
 <li>&lt;categories&gt; section - This section 
 of data lets you create the textual categories to be displayed on the 
 chart. It also helps you configure the category vertical lines and their 
 formatting.</li>
 <li>&lt;data&gt; section - This is the actual 
 section where you define your financial data.</li>
 <li>&lt;trendLines&gt; section - This section 
 helps you set the trend lines on the chart.</li>
 </ol>
 Let's now see each of them in detail.</td>
 </tr>
 <tr> 
 <td class="trLightBlueBg">&lt;graph&gt; </td>
 </tr>
 <tr> 
 <td valign="top" class="text"> Attributes of the &lt;graph&gt; 
 element help you set the visual looks of the chart and a few functional 
 parameters. Here we'll group those attributes by their parent chart element 
 and then look at it.
 Graph Properties
 <ul>
 <li>bgColor=&quot;HexColorCode&quot; : This 
 attribute helps you set the background color of the chart.</li>
 <li> bgAlpha=&quot;NumericalValue(0-100)&quot; 
 : This attribute helps you set the alpha (transparency) of the 
 graph.</li>
 </ul>
 Canvas Properties
 <ul>
 <li> canvasBgColor=&quot;HexColorCode&quot; : 
 This attribute helps you set the background color of the canvas.</li>
 <li> canvasBgAlpha=&quot;NumericalValue(0-100)&quot; 
 : This attribute helps you set the alpha (transparency) of the 
 canvas.</li>
 <li> canvasBorderColor=&quot;HexColorCode&quot; 
 : This attribute helps you set the border color of the canvas.</li>
 <li> canvasBorderThickness=&quot;NumericalValue(0-100)&quot; 
 : This attribute helps you set the border thickness (in pixels) of the 
 canvas.</li>
 </ul>
 Chart Numerical Limits
 <ul>
 <li> xAxisMinValue=&quot;value&quot; 
 : This attribute determines the lower limit of x-axis.</li>
 <li> xAxisMaxValue=&quot;value&quot;: This 
 attribute determines the upper limit of x-axis.</li>
 <li> yAxisMinValue=&quot;value&quot;: This 
 attribute determines the lower limit of y-axis.</li>
 <li> yAxisMaxValue=&quot;value&quot; : This 
 attribute determines the upper limit of y-axis. 
 If you don't specify any of the above 4 values, it is automatically 
 calculated by FusionCharts based on the data provided by you. </li>
 <li> overRideLimitCalc=&quot;1/0&quot;: 
 When you provide data and the upper and lower limits to FusionCharts, 
 FusionCharts (while rendering) checks whether the upper and lower limits 
 are correctly provided - that is it checks whether all the data values 
 fall within the specified range. Sometimes, this process takes a little 
 extra time when you have a large amount of data. If in that case you 
 don't want FusionCharts to cross check the limits explicitly provided 
 by you, you can set this attribute value to 1 and then FusionCharts 
 won't delve into the process of checking thus saving that extra bit 
 of time required.</li>
 </ul>
 Bars or Candles
 <ul>
 <li>showAsBars=&quot;1/0&quot;: Whether 
 to show candles or bars on the chart. </li>
 </ul>
 Divisional Lines (Horizontal)
 <ul>
 <li> numdivlines=&quot;NumericalValue&quot; 
 : This attribute sets the number of divisional lines to be drawn.</li>
 <li> divlinecolor=&quot;HexColorCode&quot; 
 : The color of grid divisional line.</li>
 <li> divLineThickness=&quot;NumericalValue&quot; 
 : Thickness (in pixels) of the grid divisional line.</li>
 <li> divLineAlpha=&quot;NumericalValue0-100&quot; 
 : Alpha (transparency) of the grid divisional line.</li>
 <li> showDivLineValue=&quot;1/0&quot; : 
 Option to show/hide the textual value of the divisional line.</li>
 <li>showAlternateHGridColor=&quot;1/0&quot; 
 : Option on whether to show alternate colored horizontal grid bands.</li>
 <li> alternateHGridColor=&quot;HexColorCode&quot; 
 : Color of the alternate horizontal grid bands.</li>
 <li> alternateHGridAlpha=&quot;NumericalValue0-100&quot; 
 : Alpha (transparency) of the alternate horizontal grid bands. 
 </li>
 </ul>
 Divisional Lines (Vertical)
 <ul>
 <li> numVDivLines=&quot;NumericalValue&quot; 
 : Sets the number of vertical divisional lines to be drawn.</li>
 <li> VDivlinecolor=&quot;HexColorCode&quot; 
 : Color of vertical grid divisional line. </li>
 <li> VDivLineThickness=&quot;NumericalValue&quot; 
 : Thickness (in pixels) of the line</li>
 <li> VDivLineAlpha=&quot;NumericalValue0-100&quot; 
 : Alpha (transparency) of the line.</li>
 <li>showAlternateVGridColor=&quot;1/0&quot; : Option on whether to show 
 alternate colored vertical grid bands.</li>
 <li> alternateVGridColor=&quot;HexColorCode&quot; 
 : Color of the alternate vertical grid bands.</li>
 <li> alternateVGridAlpha=&quot;NumericalValue0-100&quot; 
 : Alpha (transparency) of the alternate vertical grid bands.</li>
 </ul>
 General Properties
 <ul>
 <li>caption=&quot;String&quot; : Caption 
 of the chart</li>
 <li>subCaption=&quot;String&quot; : Sub-caption 
 of the chart </li>
 <li>shownames=&quot;1/0&quot; : Option whether 
 to show/hide the category names. </li>
 <li> showLimits=&quot;1/0&quot; : Option 
 whether to show/hide the chart limit textboxes.</li>
 <li>rotateNames=&quot;1/0&quot; : Configuration 
 that sets whether the category name text boxes would be rotated or not.</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 graph 
 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>
 <li>divLineDecimalPrecision=&quot;2&quot;: 
 Number of decimal places to which all divisional line (horizontal) values 
 on the chart would be rounded to.</li>
 <li> limitsDecimalPrecision=&quot;2&quot; : 
 Number of decimal places to which upper and lower limit values on the 
 chart would be rounded to.</li>
 </ul>
 Hover Caption Properties
 <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>
 Font Properties
 <ul>
 <li>baseFont=&quot;FontName&quot; : 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.</li>
 <li> baseFontSize=&quot;FontSize&quot; : 
 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. </li>
 <li> baseFontColor=&quot;HexColorCode&quot; : 
 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. </li>
 <li> outCnvBaseFont = &quot;FontName&quot; 
 : 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. </li>
 <li> outCnvBaseFontSize=&quot;FontSize&quot; 
 : 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. </li>
 <li> outCnvBaseFontColor=&quot;HexColorCode&quot;: 
 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. </li>
 </ul>
 Candle Properties
 <ul>
 <li>candleWidth=&quot;NumericalValue&quot; 
 (Optional): If you explicitly wish to define the width of each candle 
 in the chart, you can use this attribute. However, this attribute is 
 optional in the sense that FusionCharts would automatically calculate 
 the best fit value for the candle width.</li>
 <li> bearBorderColor=&quot;HexColor&quot;: 
 Border Color for a bear candle.</li>
 <li>bearFillColor=&quot;HexColor&quot;: 
 Fill Color for a bear candle.</li>
 <li> bullBorderColor=&quot;HexColor&quot;: 
 Border Color for a bull candle.</li>
 <li> bullFillColor=&quot;HexColor&quot;: 
 Fill Color for a bull candle.</li>
 </ul></td>
 </tr>
 <tr> 
 <td class="trLightBlueBg">&lt;categories&gt; attributes and elements</td>
 </tr>
 <tr> 
 <td class="text">Attributes and child-elements of the &lt;category&gt; 
 elements help you create the x-axis labels on the chart. They also help 
 you create the vertical category lines on the chart and configure their 
 visual properties.
 The &lt;categories&gt; element has the following attributes:
 <ul>
 <li>font='FontName' : This attribute helps 
 you set the font face for the x-axis labels in specific.</li>
 <li>fontSize='FontSize' : This attribute 
 helps you set the font size for the x-axis labels in specific.</li>
 <li>fontColor='HexColor' : This attribute 
 helps you set the font color for the x-axis labels in specific.</li>
 <li>verticalLineColor='HexColor' : This 
 attribute helps you set the color of the category line (i.e., the vertical 
 line drawn through the entire span of the canvas just above the category 
 name)</li>
 <li> verticalLineThickness='NumericalValue' 
 : This attribute helps you set the thickness of the category line in 
 pixels.</li>
 <li> verticalLineAlpha='NumericalValue0-100' 
 : This attribute helps you set the alpha (transparency) of the category 
 line </li>
 </ul>
 For each category name, you'll need to define a &lt;category&gt; element 
 as under: 
 &lt;category Name='Split' xIndex='44' showLine='1'/&gt;
 The &lt;category&gt; element can have the following attributes:
 <ul>
 <li>name='String': x-axis label to be displayed.</li>
 <li>xIndex='NumericalValue': x-axis position 
 where the category name is to be displayed. In the candlestick chart, 
 the x-axis is also numbered - i.e., it has an upper limit and a lower 
 limit. For example, when you're plotting a chart to show the data for 
 a month, the lower limit of x-axis would be 1 and the upper limit 31. 
 So, when you need to render a category label for the 15th day of the 
 month say &quot;Mid-month&quot;, you'll have specify xIndex 
 as 15 for that &lt;category&gt;.</li>
 <li>showLine='1/0' : Option to whether show 
 or hide the line just above this particular category name.</li>
 </ul></td>
 </tr>
 <tr> 
 <td class="trLightBlueBg">&lt;data&gt; child elements</td>
 </tr>
 <tr> 
 <td class="text">The actual data of the chart comes under the &lt;data&gt; 
 element. For each data item, you've to specify a &lt;set&gt; 
 element as under: 
 &lt;set open='92' high='93.38' low='91.68' close='93.3' 
 xIndex='4' link='Detail.asp?day=32'/&gt;
 The &lt;set&gt; element can have the following 
 attributes:
 <ul>
 <li>open=&quot;NumericalValue&quot; : This 
 attribute determines the open value for the data set. It is compulsory 
 to provide this value.</li>
 <li> high=&quot;NumericalValue&quot; : This 
 attribute determines the high value for the data set. It is compulsory 
 to provide this value.</li>
 <li>low =&quot;NumericalValue&quot; : This 
 attribute determines the low value for the data set. It is compulsory 
 to provide this value.</li>
 <li> close =&quot;NumericalValue&quot; : 
 This attribute determines the close value for the data set. It is compulsory 
 to provide this value.</li>
 <li> borderColor=&quot;HexColorCode&quot; 
 [Optional]: This attribute lets you change the border color of particular 
 candle on the chart. All the candles on the chart follow the color code 
 as specified in bearBorderColor and bullBorderColor 
 attributes of the &lt;graph&gt; element. 
 However, if in some case you want to highlight one particular candle 
 by changing it's color, you can use this option.</li>
 <li> color=&quot;HexColorCode&quot; [Optional]: 
 Similar to the border color (previous attribute), this attribute lets 
 you set the fill color of a particular candle selectively.</li>
 <li> xIndex=&quot;NumericalValue&quot; [Optional]: x-axis position of 
 the candle. In the candlestick chart, the x-axis is also numbered - 
 i.e., it has an upper limit and a lower limit. For example, when you're 
 plotting a chart to show the data for a month, the lower limit of x-axis 
 would be 1 and the upper limit 31. So, when you're providing data for 
 15th day, you need to mention xIndex as 15. However, if you do not provide 
 x-index for any of the &lt;set&gt; elements, 
 FusionCharts will auto number them for you starting from 1.</li>
 <li> link=&quot;link&quot; [Optional]: Sets 
 the link for a particular candle</li>
 </ul></td>
 </tr>
 <tr> 
 <td class="trLightBlueBg">&lt;trendLines&gt;</td>
 </tr>
 <tr> 
 <td class="text">Using the &lt;trendLines&gt; 
 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 &lt;line&gt; 
 element as under: 
 &lt;line startValue='89.5' endValue='98' color='FF0000' 
 displayvalue='Roll. Avg.' thickness='2' alpha='100' isTrendZone='0' showOnTop='1'/&gt; 
 The &lt;line&gt; element can have the following 
 attributes:
 <ul>
 <li>startValue='NumericalValue': 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>endValue='NumericalValue': The ending 
 y-axis value for the trendline. Say, if you want to plot a slanted trendline 
 from value 102 to 109, the endValue would 109. If you do not specify 
 a value for endValue, it would automatically assume the same value as 
 startValue.</li>
 <li>color='HexCode' : Color of the trend 
 line and its associated text.</li>
 <li>displayValue='StringValue' : 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.</li>
 <li>thickness='NumericalValue' : Thickness 
 of the trend line</li>
 <li> isTrendZone='1/0': Whether 
 the trend would display a line, or a zone (filled colored rectangle). </li>
 <li>showOnTop='1/0': Whether the trend line/zone 
 would be displayed over the candles or under the candles.</li>
 <li>alpha='NumericalValue0-100': Alpha (transparency) 
 of the trend line</li>
 </ul></td>
 </tr>
 <tr> 
 <td height="10"></td>
 </tr>
 <tr>
 <td class="text">In the next section we'll see a few examples of XML document 
 for the candlestick chart.</td>
 </tr>
</table>
</body>
</html>