Simply initialize the control, create() it on the page and after that call loadData() method. First parameter is the url to your xml document. It can be some script as well, which will produce xml output. Next parameter “true” means that you provide url and not the xml string (see API, you may directly pass the xml string to initialize the chart in the first parameter instead of url). And the last “true” means that you provide the full url, no need to pass additional data.
<script> var gantt = new GanttChart(); gantt.setImagePath("../codebase/imgs/"); gantt.create("mydiv"); gantt.loadData("data/chart1.xml",true,true); </script>
root tag - <projects> it has a number of nested <project> tags. tag <project> has 3 mandatory attributes: id (string), name (string), startdate(formatted string YYYY,MM,DD as in 2006,12,14) <project id = "1" name = "project1" startdate = "2006,12,14"> it has a number of nested <task> tags. tag <task> has one mandatory attribute id (string) <task id="1"> and a number of nested tag-properties: <name>task1</name> - task name, string <est>2006,12,14</est> - task start date, formatted string YYYY,MM,DD <duration>120</duration> - task duration in hours <percentcompleted>60</percentcompleted> - percent complete of this task, integer range 0..100 <predecessortasks>2</predecessortasks> - id of the predecessor task (the one linked to this task with an arrow), so this task runs always after its predecessor. Could be an empty tag. <childtasks> ... nested <task> tags </childtasks> - defines nested sub-tasks, could be an empty tag. End of XML definition. Sample XML structure - see below, or "samples/data/data.xml" file.
<?xml version="1.0" encoding="UTF-8"?> <projects> <project id="1" name="project1" startdate="2006,12,14"> <task id="1"> <name>project1 task1</name> <est>2006,12,14</est> <duration>120</duration> <percentcompleted>60</percentcompleted> <predecessortasks></predecessortasks> <childtasks> <task id="2"> <name>project1 task2</name> <est>2006,12,14</est> <duration>100</duration> <percentcompleted>20</percentcompleted> <predecessortasks></predecessortasks> <childtasks></childtasks> </task> <task id="6"> <name>project1 task6</name> <est>2006,12,15</est> <duration>90</duration> <percentcompleted>10</percentcompleted> <predecessortasks>2</predecessortasks> <childtasks></childtasks> </task> </childtasks> </task> </project> <project id="2" name="project2" startdate="2006,12,20"> <task id="12"> <name>project2 task12</name> <est>2006,12,20</est> <duration>140</duration> <percentcompleted>60</percentcompleted> <predecessortasks></predecessortasks> <childtasks> <task id="14"> <name>project2 task14</name> <est>2006,12,20</est> <duration>100</duration> <percentcompleted>20</percentcompleted> <predecessortasks></predecessortasks> <childtasks></childtasks> </task> </childtasks> </task> </project> </projects>