Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>FusionCharts</title>
 
<link rel='stylesheet' href="Style.CSS">

</head>

<body leftmargin="0" topmargin="0">

<table width="98%" border="0" align="right" cellpadding="2" cellspacing="1">
 <tr> 
 <td>Gantt Chart &gt; XML Structure</td>
 </tr>
 <tr> 
 <td>&nbsp;</td>
 </tr>
 <tr> 
 <td class="text">In this section, we'll be discussing all the elements 
 and attributes supported by the Gantt chart. A typical XML data document 
 for the Gantt chart look as under: </td>
 </tr>
 <tr> 
 <td class="codeBlock">&lt;chart dateFormat='dd/mm/yyyy' showTaskNames='1' ganttWidthPercent='70' 
 gridBorderAlpha='100' canvasBorderColor='333333' canvasBorderThickness='0' 
 hoverCapBgColor='FFFFFF' hoverCapBorderColor='333333' extendcategoryBg='0' 
 ganttLineColor='99cc00' ganttLineAlpha='20' baseFontColor='333333' gridBorderColor='99cc00'&gt; 
 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;categories bgColor='333333' fontColor='99cc00' 
 isBold='1' fontSize='14' &gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/9/2004' end='31/12/2004' name='2004' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/1/2005' end='31/7/2005' name='2005' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/categories&gt; 
 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;categories bgColor='99cc00' bgAlpha='40' fontColor='333333' 
 align='center' fontSize='10' isBold='1'&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/9/2004' end='30/9/2004' name='Sep' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/10/2004' end='31/10/2004' name='Oct' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/11/2004' end='30/11/2004' name='Nov' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/12/2004' end='31/12/2004' name='Dec' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/1/2005' end='31/1/2005' name='Jan' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/2/2005' end='28/2/2005' name='Feb' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/3/2005' end='31/3/2005' name='March' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/4/2005' end='30/4/2005' name='Apr' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/5/2005' end='31/5/2005' name='May' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/6/2005' end='30/6/2005' name='June' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/7/2005' end='31/7/2005' name='July' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/categories&gt; 
 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;processes positionInGrid='right' align='center' 
 headerText='Leader' fontColor='333333' fontSize='11' isBold='1' isAnimated='1' 
 bgColor='99cc00' headerbgColor='333333' headerFontColor='99cc00' headerFontSize='16' 
 bgAlpha='40'&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;process 
 Name='Ashok' id='1' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;process 
 Name='Pallav' id='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;process 
 Name='Akhil' id='3' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;process 
 Name='Sanket' id='4' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;process 
 Name='Srishti' id='5' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;process 
 Name='Kisor' id='6' /&gt; &lt;/processes&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;dataTable 
 fontColor='333333' fontSize='11' isBold='1' headerFontColor='000000' headerFontSize='11' 
 &gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dataColumn 
 headerbgColor='333333' width='150' headerfontSize='16' headerAlign='left' 
 headerfontcolor='99cc00' bgColor='99cc00' headerText=' Team' align='left' 
 bgAlpha='65'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' MANAGEMENT' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' PRODUCT MANAGER' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' CORE DEVELOPMENT' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' Q &amp;amp; A / DOC.' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' WEB TEAM' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' MANAGEMENT' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/dataColumn&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;/dataTable&gt; &nbsp;&nbsp;&nbsp;&nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tasks&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task name='Survey' hoverText='Market 
 Survey' processId='1' start='7/9/2004' end='10/10/2004' id='Srvy' color='99cc00' 
 alpha='60' topPadding='19' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Concept' hoverText= 'Develop Concept for Product' processId='1' start='25/10/2004' 
 end='9/11/2004' id='Cpt1' color='99cc00' alpha='60' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Concept' showName='0' hoverText= 'Develop Concept for Product' processId='2' 
 start='25/10/2004' end='9/11/2004' id='Cpt2' color='99cc00' alpha='60' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task name='Design' hoverText= 
 'Preliminary Design' processId='2' start='12/11/2004' end='25/11/2004' id='Desn' 
 color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Product Development' processId='2' start='6/12/2004' end='2/3/2005' 
 id='PD1' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Product Development' processId='3' start='6/12/2004' end='2/3/2005' 
 id='PD2' color='99cc00' alpha='60' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Doc Outline' hoverText='Documentation Outline' processId='2' start='6/4/2005' 
 end='1/5/2005' id='DocOut' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Alpha' hoverText='Alpha Release' processId='4' start='15/3/2005' end='2/4/2005' 
 id='alpha' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 &lt;task name='Beta' hoverText='Beta Release' processId='3' start='10/5/2005' 
 end='2/6/2005' id='Beta' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Doc.' hoverText='Documentation' processId='4' start='12/5/2005' end='29/5/2005' 
 id='Doc' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Website Design' hoverText='Website Design' processId='5' start='18/5/2005' 
 end='22/6/2005' id='Web' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Release' hoverText='Product Release' processId='6' start='5/7/2005' 
 end='29/7/2005' id='Rls' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='Dvlp' hoverText='Development on Beta Feedback' processId='3' start='10/6/2005' 
 end='1/7/2005' id='Dvlp' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='QA' hoverText='QA Testing' processId='4' start='9/4/2005' end='22/4/2005' 
 id='QA1' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task 
 name='QA2' hoverText='QA Testing-Phase 2' processId='4' start='25/6/2005' 
 end='5/7/2005' id='QA2' color='99cc00' alpha='60'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tasks&gt; 
 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;connectors&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='Cpt1' toTaskId='Cpt2' color='99cc00' thickness='2' fromTaskConnectStart='1'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='PD1' 
 toTaskId='PD2' color='99cc00' thickness='2' fromTaskConnectStart='1'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='PD1' 
 toTaskId='alpha' color='99cc00' thickness='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='PD2' toTaskId='alpha' color='99cc00' thickness='2' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='DocOut' 
 toTaskId='Doc' color='99cc00' thickness='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='QA1' toTaskId='beta' color='99cc00' thickness='2' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='Dvlp' 
 toTaskId='QA2' color='99cc00' thickness='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='QA2' toTaskId='Rls' color='99cc00' thickness='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp; 
 &lt;/connectors&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;milestones&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;milestone 
 date='29/7/2005' taskId='Rls' radius='10' color='333333' shape='Star' numSides='5' 
 borderThickness='1'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;milestone 
 date='2/3/2005' taskId='PD1' radius='10' color='333333' shape='Star' numSides='5' 
 borderThickness='1' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;milestone 
 date='2/3/2005' taskId='PD2' radius='10' color='333333' shape='Star' numSides='5' 
 borderThickness='1'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/milestones&gt; 
 &lt;/chart&gt;</td>
 </tr>
 <tr> 
 <td class="text">This XML leads to a chart as under:</td>
 </tr>
 <tr> 
 <td class="text"><img src="Images/Gantt_Output.gif" width="500" height="270"></td>
 </tr>
 <tr> 
 <td class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td class="text">Like all other FusionCharts chart, the Gantt charts' XML 
 document too has &lt;chart&gt; as it's document 
 element. By specifying attributes of this element, you can set the cosmetic 
 and functional properties of the chart. 
 Let's first see the attributes supported by the &lt;chart&gt; 
 element:</td>
 </tr>
 <tr>
 <td class="trGreyBg header">&lt;chart&gt; element </td>
 </tr>
 <tr> 
 <td class="text">Background Properties
 <ul>
 <li>bgColor='HexColorCode': 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. 
 
 Default value: FFFFFF 
 </li>
 <li> bgAlpha='NumericalValue(0-100)': 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. 
 Default value: 100 
 </li>
 <li>bgSWF='Path of SWF File': 
 This attribute helps you load an external .swf file as a background 
 for the chart. For more information on this, please see <a href="../Adv_BgSWF.html">Advanced 
 Charting &gt; Setting background SWFs</a>. </li>
 </ul>
 Canvas Properties
 <ul>
 <li> canvasBgColor='HexColorCode': 
 This attribute helps you set the background color of the canvas. </li>
 <li> canvasBgAlpha='NumericalValue(0-100)': This attribute helps you set the alpha (transparency) of the 
 canvas. </li>
 <li> canvasBorderColor='HexColorCode': This attribute helps you set the border color of the canvas. </li>
 <li> canvasBorderThickness='NumericalValue(0-100)': This attribute helps you set the border thickness (in pixels) of the 
 canvas. </li>
 </ul>
 General Properties
 <ul>
 <li>dateFormat='mm/dd/yyyy or dd/mm/yyyy or yyyy/mm/dd': 
 This is the most important attribute, which you'll need to specify for 
 all the Gantt charts that you build. With the help of this attribute, 
 you're basically specifying the format in which you'll be providing 
 your dates to FusionCharts in XML format.</li>
 <li>animation='1/0': This attribute sets 
 whether the Gantt task bars need to be animated or not.</li>
 <li>showTaskStartDate='1/0': This attribute 
 sets whether the start date of each task will be shown on the left of 
 the task bar.</li>
 <li> showTaskEndDate='1/0': This attribute 
 sets whether the end date of each task will be shown on the right of 
 the task bar.</li>
 <li> showTaskNames='1/0': This attribute 
 sets whether the name of each task will be shown over the task bar.</li>
 <li> taskDatePadding='1/0': If you opt to 
 show the task start or end date, this attribute helps you configure 
 the distance between the date textbox and the task bar.</li>
 <li>extendCategoryBg='1/0': This attribute 
 lets you set whether the background for the last sub-category (date 
 range on the top of chart) will extend till the bottom of the chart.</li>
 </ul>
 Gantt General Properties
 <ul>
 <li>ganttWidthPercent='Number between 0-100': 
 The Gantt chart consists of two parts - the Gantt chart and the data 
 table (including process names). This attribute lets you set the width 
 of the gantt part, in percentage, with respect to the whole chart.</li>
 <li>ganttLineColor='Hex Color': Using this 
 attribute, you can set the color of the lines running through the Gantt 
 chart as background.</li>
 <li>ganttLineThickness='Numerical Value': 
 Using this attribute, you can set the thickness of the lines running 
 through the Gantt chart as background.</li>
 <li>ganttLineAlpha='Numerical Value 0-100': 
 Using this attribute, you can set the alpha (transparency) of the lines 
 running through the Gantt chart as background.</li>
 </ul>
 Data Table Properties
 <ul>
 <li>gridBorderColor='Hex Color': This attribute 
 sets the color of the border of data table (which shows the process 
 names and additional information).</li>
 <li>gridBorderAlpha='Numerical Value 0-100': 
 This attribute sets the alpha of the border of data table (which shows 
 the process names and additional information).</li>
 <li>gridResizeBarColor='Hex Color': If you 
 show two columns of information in the data table, you'll find that 
 the data table is draggable i.e., you can resize each of the columns 
 using a resize bar. This attribute helps you set the color of that resize 
 bar.</li>
 <li>gridResizeBarThickness='Numeric Value': 
 This attribute helps you set the thickness of the resize bar.</li>
 <li>gridResizeBarAlpha='Numeric Value 0-100': 
 This attribute helps you set the alpha of the resize bar.</li>
 </ul>
 Font Properties
 <ul>
 <li>baseFont='FontName': 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='FontSize': 
 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='HexColorCode': 
 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>
 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='1/0': Option 
 whether to show/hide hover caption box. </li>
 <li> hoverCapBgColor='HexColorCode': Background color of the hover caption box.</li>
 <li> hoverCapBorderColor='HexColorCode': Border color of the hover caption box.</li>
 <li> hoverCapSepChar='Char': 
 The character specified as the value of this attribute separates the 
 name and value displayed in the hover caption box. </li>
 </ul>
 Now that we're done with &lt;chart&gt; element, let's shift to &lt;categories&gt; 
 element.</td>
 </tr>
 <tr> 
 <td class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td class="trGreyBg header">&lt;categories&gt; element</td>
 </tr>
 <tr> 
 <td class="text">Each &lt;categories&gt; 
 element helps you define a date range on the top of the chart. Like, in 
 our above chart, we had two rows of date range - the first row showed 
 the years 2004 and 2005, and the second row showed the month wise breakdown 
 of each year.
 It is compulsory to have atleast one &lt;categories&gt; 
 element on the chart, as that defines the starting and ending date of 
 the chart. The value which you put as startDate 
 and endDate under the first &lt;categories&gt; 
 element is deemed to be the date span of the chart. The &lt;categories&gt; 
 element can have the following attributes:
 <ul>
 <li>bgColor='Hex Color': Defines the background 
 color for the same.</li>
 <li>bgAlpha='Numeric Value 0-100': Define 
 the background transparency level for the same.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> isBold='1/0': Sets whether the text 
 will be shown as bold or not.</li>
 <li> isUnderLine='1/0': Sets whether the 
 text will be shown as underline.</li>
 <li> verticalPadding='Numeric Value': Specifies 
 the top margin. </li>
 <li>align='left/center/right': Specifies 
 the horizontal alignment of text.</li>
 <li> vAlign='left/center/right': Specifies 
 the vertical alignment of text.</li>
 </ul>
 Basically, you specify the attributes of &lt;categories&gt; element, 
 so that all the &lt;category&gt; element 
 within that particular &lt;categories&gt; 
 element can acquire these values, if not individually specified for each 
 of them. For example, you can set the font properties for an entire date 
 range (vertical row of date). Then, you would not have to define the font 
 property for each part of date (like for each month). It will automatically 
 take the values assigned for that &lt;categories&gt;.
 Let's now see the actual elements which help us set the date ranges - 
 &lt;category&gt; element. </td>
 </tr>
 <tr> 
 <td class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td class="trGreyBg header">&lt;category&gt; element</td>
 </tr>
 <tr> 
 <td class="text">The &lt;category&gt; element 
 appear as children of &lt;categories&gt; element 
 as under:</td>
 </tr>
 <tr> 
 <td class="codeBlock">&lt;categories bgColor='333333' fontColor='99cc00' isBold='1' 
 fontSize='14' &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/9/2004' end='31/12/2004' name='2004' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/1/2005' end='31/7/2005' name='2005' /&gt; 
 &lt;/categories&gt;</td>
 </tr>
 <tr> 
 <td class="text">In the above example, considering it as the first &lt;categories&gt; 
 element of the chart, we've defined the chart's date range from 1/9/2004 
 to 31/7/2005 (dates in dd/mm/yyyy format). To do so, we've used two &lt;category&gt; 
 elements and specified their individual date range and the name to be 
 displayed on the top of the chart. 
 Similarly, if we wanted to show more detailed break-up of dates, we would 
 introduce a new &lt;categories&gt; element 
 with it's children as under:</td>
 </tr>
 <tr> 
 <td class="codeBlock">&nbsp;&lt;categories bgColor='99cc00' bgAlpha='40' fontColor='333333' 
 align='center' fontSize='10' isBold='1'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/9/2004' end='30/9/2004' name='Sep' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/10/2004' end='31/10/2004' name='Oct' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/11/2004' end='30/11/2004' name='Nov' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/12/2004' end='31/12/2004' name='Dec' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/1/2005' end='31/1/2005' name='Jan' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/2/2005' end='28/2/2005' name='Feb' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/3/2005' end='31/3/2005' name='March' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/4/2005' end='30/4/2005' name='Apr' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/5/2005' end='31/5/2005' name='May' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/6/2005' end='30/6/2005' name='June' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category 
 start='1/7/2005' end='31/7/2005' name='July' /&gt; 
 &nbsp;&lt;/categories&gt;</td>
 </tr>
 <tr> 
 <td class="text">As you can see in the code above, we're breaking down 
 the dates into smaller values for display on the chart.
 Let's quickly skim through the attributes of the &lt;category&gt; 
 element:
 <ul>
 <li>start='Date': Specifies the start date 
 of that date range.</li>
 <li>end='Date': Specified the end date of 
 the date range.</li>
 <li>name='String Name': Specifies the name 
 of the date range, that actually appears on the chart.</li>
 <li> link='URL Encoded link': If you want 
 the date range name on the chart to behave as a hyperlink, you can specify 
 the URL Encoded link here.</li>
 <li>bgColor='Hex Color': Defines the background 
 color for the same.</li>
 <li>bgAlpha='Numeric Value 0-100': Define 
 the background transparency level for the same.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> isBold='1/0': Sets whether the text 
 will be shown as bold or not.</li>
 <li> isUnderLine='1/0': Sets whether the 
 text will be shown as underline.</li>
 <li> verticalPadding='Numeric Value': Specifies 
 the top margin. </li>
 <li>align='left/center/right': Specifies 
 the horizontal alignment of text.</li>
 <li> vAlign='left/center/right': Specifies 
 the vertical alignment of text.</li>
 </ul>
 Let's now move to &lt;processes&gt; element, which help us define the 
 processes on the chart.</td>
 </tr>
 <tr> 
 <td class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td class="trGreyBg header">&lt;processes&gt; element</td>
 </tr>
 <tr> 
 <td class="text">The &lt;processes&gt; element 
 and its children help us define the list of processes on the chart. Each 
 Gantt chart depicts a list of processes - you can specify all of them 
 and configure their visual properties using this element and its attributes. 
 The following attributes are supported by the &lt;processes&gt; 
 element:
 <ul>
 <li>headerText='String': This attribute 
 helps you set the caption for the processes, that would appear in the 
 1st row of data table. For instance, in our chart, we've the header 
 of processes set as &quot;Leader&quot;.</li>
 <li>bgColor='Hex Color': Defines the background 
 color for the same.</li>
 <li>bgAlpha='Numeric Value 0-100': Define 
 the background transparency level for the same.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> isBold='1/0': Sets whether the text 
 will be shown as bold or not.</li>
 <li> isUnderLine='1/0': Sets whether the 
 text will be shown as underline.</li>
 <li> verticalPadding='Numeric Value': Specifies 
 the top margin. </li>
 <li>align='left/center/right': Specifies 
 the horizontal alignment of text.</li>
 <li> vAlign='left/center/right': Specifies 
 the vertical alignment of text.</li>
 <li>headerFont='Font': Defines the font 
 for the header.</li>
 <li> headerFontSize='Size': Defines the 
 font size for the header.</li>
 <li> headerFontColor='Color': Defines the 
 font color for the header.</li>
 <li> headerIsBold='1/0': Sets whether the 
 header is bold or not.</li>
 <li> headerIsUnderline='1/0': Sets whether 
 the header will appear with an underline.</li>
 <li> headerAlign='left/center/right': Sets 
 the horizontal align position of the header.</li>
 <li> headerVAlign='left/center/right': Sets 
 the vertical align position of the header.</li>
 <li> headerBgColor='Color': Sets the background 
 color of header cell.</li>
 <li> headerBgAlpha='Numeric Value': Sets 
 the background alpha of header cell. </li>
 <li>width='Number': This is an optional 
 value, using which you can set the exact width (in pixels) of the processes 
 column in the data table.</li>
 <li>positionInGrid='Left/Right': This option 
 lets you set whether the process column will appear as the right most 
 column of the data table or left most.</li>
 </ul>
 Like &lt;categories&gt;, the motive behind 
 specifying attributes for &lt;processes&gt; element 
 is to convey these properties to all the &lt;process&gt; element contained 
 within this element.</td>
 </tr>
 <tr> 
 <td class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td class="trGreyBg header">&lt;process&gt; element</td>
 </tr>
 <tr> 
 <td class="text">The &lt;process&gt; element 
 can have the following attributes:
 <ul>
 <li>name='Display Name': This attribute 
 sets the name of the process, which will be displayed on the chart.</li>
 <li>id='Alphanumeric Id': Each process needs 
 to have an ID specified by you. Based on this id, the tasks related 
 to this process will be plotted against it.</li>
 <li>link='URL Encoded link': If you wish 
 to hyperlink each process name on the chart, you can use this attribute 
 to specify the link for each process name.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> isBold='1/0': Sets whether the text 
 will be shown as bold or not.</li>
 <li> isUnderLine='1/0': Sets whether the 
 text will be shown as underline.</li>
 <li> verticalPadding='Numeric Value': Specifies 
 the top margin. </li>
 <li>align='left/center/right': Specifies 
 the horizontal alignment of text.</li>
 <li> vAlign='left/center/right': Specifies 
 the vertical alignment of text.</li>
 </ul>
 With this much in place, let's now see how we can specify more information 
 alongside the process names, in the form of a data table.</td>
 </tr>
 <tr> 
 <td class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td class="trGreyBg header">Data Table</td>
 </tr>
 <tr> 
 <td class="text">Each Gantt chart can have one data table, which can show 
 tabular information along side the process names. The table will have 
 as many rows as the number of processes that you've specified in the XML. 
 The number of columns of this table can be defined by you. 
 To create a data table, you use the &lt;dataTable&gt; 
 element as under:</td>
 </tr>
 <tr> 
 <td class="codeBlock">&nbsp;&lt;dataTable fontColor='333333' fontSize='11' isBold='1' 
 headerFontColor='000000' headerFontSize='11' &gt;</td>
 </tr>
 <tr> 
 <td valign="top" class="text"> This element can have the following attributes:
 <ul>
 <li>bgColor='Hex Color': Defines the background 
 color for the same.</li>
 <li>bgAlpha='Numeric Value 0-100': Define 
 the background transparency level for the same.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> isBold='1/0': Sets whether the text 
 will be shown as bold or not.</li>
 <li> isUnderLine='1/0': Sets whether the 
 text will be shown as underline.</li>
 <li> verticalPadding='Numeric Value': Specifies 
 the top margin. </li>
 <li>align='left/center/right': Specifies 
 the horizontal alignment of text.</li>
 <li> vAlign='left/center/right': Specifies 
 the vertical alignment of text.</li>
 <li>headerFont='Font': Defines the font 
 for the header.</li>
 <li> headerFontSize='Size': Defines the 
 font size for the header.</li>
 <li> headerFontColor='Color': Defines the 
 font color for the header.</li>
 <li> headerIsBold='1/0': Sets whether the 
 header is bold or not.</li>
 <li> headerIsUnderline='1/0': Sets whether 
 the header will appear with an underline.</li>
 <li> headerAlign='left/center/right': Sets 
 the horizontal align position of the header.</li>
 <li> headerVAlign='left/center/right': Sets 
 the vertical align position of the header.</li>
 <li> headerBgColor='Color': Sets the background 
 color of header cell.</li>
 <li> headerBgAlpha='Numeric Value': Sets 
 the background alpha of header cell. </li>
 </ul>
 To define a column inside this data table, we use the &lt;datacolumn&gt; 
 element as under:</td>
 </tr>
 <tr> 
 <td class="codeBlock">&nbsp;&lt;dataColumn headerbgColor='333333' width='150' headerfontSize='16' 
 headerAlign='left' headerfontcolor='99cc00' bgColor='99cc00' headerText=' 
 Team' align='left' bgAlpha='65'&gt;</td>
 </tr>
 <tr> 
 <td class="text">The &lt;dataColumn&gt; element 
 can have the following attributes:
 <ul>
 <li>width='Numerical Value': This is an 
 optional attribute which lets you specify the width for a particular 
 data column, in pixels. However, if you don't specify this, FusionCharts 
 will automatically set it to the best value.</li>
 <li>bgColor='Hex Color': Defines the background 
 color for the same.</li>
 <li>bgAlpha='Numeric Value 0-100': Define 
 the background transparency level for the same.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> isBold='1/0': Sets whether the text 
 will be shown as bold or not.</li>
 <li> isUnderLine='1/0': Sets whether the 
 text will be shown as underline.</li>
 <li> verticalPadding='Numeric Value': Specifies 
 the top margin. </li>
 <li>align='left/center/right': Specifies 
 the horizontal alignment of text.</li>
 <li> vAlign='left/center/right': Specifies 
 the vertical alignment of text.</li>
 <li>headerText='Label': This attribute sets 
 the display label of the header for that column.</li>
 <li>headerLink='URL Encoded Link': If you 
 need to specify a link for the header, you can use this attribute to 
 specify. </li>
 <li>headerFont='Font': Defines the font 
 for the header.</li>
 <li> headerFontSize='Size': Defines the 
 font size for the header.</li>
 <li> headerFontColor='Color': Defines the 
 font color for the header.</li>
 <li> headerIsBold='1/0': Sets whether the 
 header is bold or not.</li>
 <li> headerIsUnderline='1/0': Sets whether 
 the header will appear with an underline.</li>
 <li> headerAlign='left/center/right': Sets 
 the horizontal align position of the header.</li>
 <li> headerVAlign='left/center/right': Sets 
 the vertical align position of the header.</li>
 <li> headerBgColor='Color': Sets the background 
 color of header cell.</li>
 <li> headerBgAlpha='Numeric Value': Sets 
 the background alpha of header cell. </li>
 </ul>
 Now, inside each data column, to represent a row of text, you use the 
 &lt;text&gt; element as under:</td>
 </tr>
 <tr> 
 <td class="codeBlock">&lt;dataTable fontColor='333333' fontSize='11' isBold='1' 
 headerFontColor='000000' headerFontSize='11' &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dataColumn 
 headerbgColor='333333' width='150' headerfontSize='16' headerAlign='left' 
 &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' MANAGEMENT' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' PRODUCT MANAGER' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' CORE DEVELOPMENT' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' Q &amp;amp; A / DOC.' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' WEB TEAM' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text 
 label=' MANAGEMENT' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/dataColumn&gt; 
 &lt;/dataTable&gt;</td>
 </tr>
 <tr> 
 <td valign="top" class="text"> The &lt;text&gt; 
 element can have the following attributes:
 <ul>
 <li>label='URL Encoded String label': This attribute sets the value that 
 would be displayed in the chart, as the contents of that specific cell.</li>
 <li>link='URL Encoded link': If you need to hyperlink the content of the 
 cell, you can use this attribute to specify the link.</li>
 <li>bgColor='Hex Color': Defines the background 
 color for the same.</li>
 <li>bgAlpha='Numeric Value 0-100': Define 
 the background transparency level for the same.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> isBold='1/0': Sets whether the text 
 will be shown as bold or not.</li>
 <li> isUnderLine='1/0': Sets whether the 
 text will be shown as underline.</li>
 <li>align='left/center/right': Specifies 
 the horizontal alignment of text.</li>
 <li> vAlign='left/center/right': Specifies 
 the vertical alignment of text.</li>
 </ul>
 Now that we're done with data table too, we next move on to specify the 
 main portion of the data - the data related to task bars.</td>
 </tr>
 <tr> 
 <td valign="top" class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td valign="top" class="trGreyBg header">&lt;tasks&gt; element </td>
 </tr>
 <tr> 
 <td valign="top" class="text">The &lt;tasks&gt; element is used to group 
 all the tasks that are to be depicted on the chart. This element can have 
 the following attributes:
 <ul>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> color='Hex Color': 
 This attribute helps you define the background color for the task bar. 
 If you need to show a gradiented background, just specify the list of 
 colors here using a comma.</li>
 <li> alpha='Numeric Value': This attribute 
 helps you specify the transparency of the task bar.</li>
 <li>showBorder='1/0': This attribute lets 
 you specify whether a border would appear around the task bar.</li>
 <li> borderColor='Hex Color': Color of the 
 task bar border.</li>
 <li> borderThickness='Numeric Value': Thickness 
 of the task bar border.</li>
 <li>showTaskNames='1/0': Configuration whether 
 to show the names of the tasks over the task bars.</li>
 <li> showTaskStartDate='1/0': Configuration 
 whether to show the start dates of the tasks on the left of task bars.</li>
 <li> showTaskEndDate='1/0': Configuration 
 whether to show the end dates of the tasks on the right side of the 
 task bars.</li>
 </ul>
 Now, to define each individual task, you need to create a &lt;task&gt; 
 element for each task, as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="text">&nbsp;&lt;tasks&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task name='Survey' 
 hoverText='Market Survey' processId='1' start='7/9/2004' end='10/10/2004' 
 id='Srvy' color='99cc00' alpha='60' topPadding='19' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;task name='Concept' 
 hoverText= 'Develop Concept for Product' processId='1' start='25/10/2004' 
 end='9/11/2004' id='Cpt1' color='99cc00' alpha='60' /&gt; 
 .... More tasks .... 
 &nbsp;&lt;/tasks&gt; </td>
 </tr>
 <tr> 
 <td valign="top" class="text">The &lt;task&gt; element can have the following attributes:
 <ul>
 <li> 
 start='Date': This attribute sets the start date for this particular 
 task. This attribute is compulsory. </li>
 <li>
 end='Date': This attribute sets the end date for this particular 
 task. This attribute is compulsory. </li>
 <li> 
 processId='Process Id': Each task needs 
 to belong a process, as we had earlier indicated. For this attribute, 
 you need to specify the process id, against which you want to plot 
 this task. Process id was earlier assigned by you in the &lt;process&gt; 
 element. You need to duplicate that same id here. </li>
 <li> 
 Id='Alphanumeric Value': Each task 
 needs to have a id, so that it can be easily referenced back in XML. 
 You can set the id of the task using this attribute. </li>
 <li>name='String Name': This attributes 
 sets the name of the task, which will be displayed on the chart.</li>
 <li>hoverText='hover caption text': If you 
 want to display more information as the tool tip of this task bar, you 
 can specify that hover text here.</li>
 <li>link='URL Encoded link': If you intend 
 to provide a hyper link for the task bar, you can set the link in this 
 attribute.</li>
 <li>animation='1/0': This attribute lets 
 you set whether this particular task bar would animate or not.</li>
 <li>font='Font Face': Defines the font face 
 in which text will be rendered.</li>
 <li> fontSize='Numeric Value': Defines the 
 font size in which text will be rendered.</li>
 <li> fontColor='Hex Color': Defines the 
 color in which text will be rendered.</li>
 <li> color='Hex Color': 
 This attribute helps you define the background color for the task bar. 
 If you need to show a gradiented background, just specify the list of 
 colors here using a comma.</li>
 <li> alpha='Numeric Value': This attribute 
 helps you specify the transparency of the task bar.</li>
 <li>showBorder='1/0': This attribute lets 
 you specify whether a border would appear around the task bar.</li>
 <li> borderColor='Hex Color': Color of the 
 task bar border.</li>
 <li> borderThickness='Numeric Value': Thickness 
 of the task bar border.</li>
 <li>borderAlpha='Numeric Value 0-100': 
 Alpha of the task bar border.</li>
 <li>showName='1/0': Configuration whether 
 to show the name of this tasks over the task bar.</li>
 <li> showStartDate='1/0': Configuration 
 whether to show the start date of this task on the left of task bar.</li>
 <li> showEndDate='1/0': Configuration whether 
 to show the end date of this task on the right side of the task bar.</li>
 <li>height='Numeric Value': If you intend to specify an explicit height 
 for the task bar, you can do so using this attribute. Otherwise, FusionCharts 
 automatically calculates the best possible value.</li>
 <li> topPadding='Numeric Value': If you intend to specify an explicit 
 top padding for the task bar, you can do so using this attribute. Otherwise, 
 FusionCharts automatically calculates the best possible value.</li>
 <li>taskDatePadding='Numeric Value': If you intend to specify an explicit 
 distance between task bar and date textbox, you can do so using this 
 attribute. Otherwise, FusionCharts automatically calculates the best 
 possible value.</li>
 </ul>
 And this should be enough to plot all your task bars on the chart. We'll 
 next see how to render milestones on the Gantt chart.</td>
 </tr>
 <tr> 
 <td valign="top" class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td valign="top" class="trGreyBg header">Milestones</td>
 </tr>
 <tr> 
 <td valign="top" class="text">To render milestones on the chart, you use the 
 &lt;mileStones&gt; and &lt;mileStone&gt; element as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="codeBlock">&lt;milestones&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;milestone 
 date='29/7/2005' taskId='Rls' radius='10' color='333333' shape='Star' numSides='5' 
 borderThickness='1'/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;milestone 
 date='2/3/2005' taskId='PD1' radius='10' color='333333' shape='Star' numSides='5' 
 borderThickness='1' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;milestone 
 date='2/3/2005' taskId='PD2' radius='10' color='333333' shape='Star' numSides='5' 
 borderThickness='1'/&gt; 
 &lt;/milestones&gt;</td>
 </tr>
 <tr> 
 <td valign="top" class="text">The &lt;mileStone&gt; element can have the 
 following attributes:
 <ul>
 <li>date='Date': Date where you want the milestone to be placed.</li>
 <li> taskId='Task Id': The id of the task over whose bar you want the 
 milestone to be placed.</li>
 <li> shape = 'star/polygon': Shape of the milestone.</li>
 <li> numSides='Numeric Value 3-x': Number of sides that the milestone 
 would have. For example, for a diamond, you can set shape to star and 
 then set this value to 4.</li>
 <li> startAngle='Angle': Starting angle of the polygon/star drawn as milestone.</li>
 <li> radius='Numeric value': Radius of the polygon/star drawn as milestone.</li>
 <li> borderColor='Hex Color': Border color of the milestone.</li>
 <li> borderThickness='Numeric Value': Border thickness of the milestone.</li>
 <li> color='Hex Color': Background fill color of the milestone.</li>
 <li> alpha='Numeric Value 0-100': Transparency level of the milestone.</li>
 </ul>
 Let's now look at the trendlines option that the Gantt chart offers. </td>
 </tr>
 <tr> 
 <td valign="top" class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td valign="top" class="trGreyBg header">Trend lines</td>
 </tr>
 <tr> 
 <td valign="top" class="text">To draw a trend line/zone on the chart, you 
 use the &lt;trendLines&gt; and &lt;line&gt; 
 element as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="codeBlock">&lt;trendlines&gt; &lt;line start='28/6/2005' 
 displayValue='Today' color='666666' isTrendZone='1' 
 alpha='20' /&gt; &lt;line start='13/6/2005' end='23/6/2005' 
 displayValue='Under Monitor' color='FF5904' alpha='5' 
 isTrendZone='1' /&gt; &lt;/trendlines&gt;</td>
 </tr>
 <tr> 
 <td valign="top" class="text">The &lt;lines&gt; 
 element can have the following attributes:
 <ul>
 <li>start='Date': Start date for the trend 
 zone. </li>
 <li> end='Date': End date for the trend 
 zone. If you intend to draw a trend line instead of a trend zone, then 
 you do not need to specify a value for this attribute.</li>
 <li> displayValue='String Value': If you 
 want to display your custom value beneath the trend line, you can do 
 so here. Example, you can show the trend line and label it as &quot;Today&quot;.</li>
 <li> color='Hex Color': Color of the trend 
 line.</li>
 <li> thickness='Numeric Value': Thickness 
 (in pixels) of the trend line.</li>
 <li> alpha='Numeric Value 0-100': Transparency 
 level of the trend line/zone.</li>
 <li> isTrendZone='1/0': Option to set whether 
 it will appear as a trend zone or a trend line.</li>
 </ul>
 And with this, we move over to the last item supported by the Gantt Chart 
 - connectors.</td>
 </tr>
 <tr> 
 <td valign="top" class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td valign="top" class="trGreyBg header">Task Connectors</td>
 </tr>
 <tr> 
 <td valign="top" class="text">Task connectors are used to connect various 
 task bars on the chart, to indicate the flow of process. Like, using task 
 connectors, we can show the dependency of one task over another, or the 
 general flow of the entire set of tasks.
 To create connectors on the chart, we use the &lt;connectors&gt; and 
 &lt;connector&gt; element as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="codeBlock">&lt;connectors&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='Cpt1' toTaskId='Cpt2' color='99cc00' thickness='2' fromTaskConnectStart='1'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='PD1' 
 toTaskId='PD2' color='99cc00' thickness='2' fromTaskConnectStart='1'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='PD1' 
 toTaskId='alpha' color='99cc00' thickness='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='PD2' toTaskId='alpha' color='99cc00' thickness='2' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='DocOut' 
 toTaskId='Doc' color='99cc00' thickness='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='QA1' toTaskId='beta' color='99cc00' thickness='2' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector fromTaskId='Dvlp' 
 toTaskId='QA2' color='99cc00' thickness='2' /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;connector 
 fromTaskId='QA2' toTaskId='Rls' color='99cc00' thickness='2' /&gt; 
 &lt;/connectors&gt;</td>
 </tr>
 <tr> 
 <td valign="top" class="text">The &lt;connectors&gt; 
 element can have the following attributes (which applies to all connectors, 
 unless otherwise specified for each connector individually):
 <ul>
 <li>Color='Hex Code': Color of the connector</li>
 <li> Thickness='Numeric Value': Thickness 
 of the connector line in pixels.</li>
 <li> Alpha='Numeric Value 0-100': Tranparency 
 of the connector line.</li>
 <li> isDashed='1/0': Configuration whether 
 the connector line will appear as dashed/solid line.</li>
 </ul>
 And for each connector, you can specify the following attributes:
 <ul>
 <li>fromTaskId='Task Id': Id of the task 
 (which you had earlier specified as an attribute of &lt;task&gt; element) 
 from where the connector will originate.</li>
 <li> toTaskId='Task Id': Id of the task 
 (which you had earlier specified as an attribute of &lt;task&gt; element) 
 from where the connector will terminate.</li>
 <li> fromTaskConnectStart='1/0': Configuration 
 whether the connector will join the originating task bar at the start 
 position or end position.</li>
 <li> toTaskConnectStart='1/0': Configuration 
 whether the connector will join the terminating task bar at the start 
 position or end position.</li>
 <li>Color='Hex Code': Color of the connector.</li>
 <li> Thickness='Numeric Value': Thickness 
 of the connector line in pixels.</li>
 <li> Alpha='Numeric Value 0-100': Tranparency 
 of the connector line.</li>
 <li> isDashed='1/0': Configuration whether 
 the connector line will appear as dashed/solid line.</li>
 </ul> </td>
 </tr>
 <tr>
 <td valign="top" class="text">&nbsp;</td>
 </tr>
</table>

</body>
</html>