100% Free Javascript / CSS/ HTML Gantt chart control. Completely buzzword compliant including AJAX !
- Currently only one gantt chart is allowed per page.
- Cannot remove columns from left table ("assigned to", "percent complete")
Click here to download the jsgantt, send feature requests shlomygantz@hotmail.com
1. Include JSGantt CSS and Javascript
<link rel="stylesheet" type="text/css" href="jsgantt.css" />
<script language="javascript" src="jsgantt.js"></script>
2. Create a div element to hold the gantt chart
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
3. Start a <script> block
<script language="javascript">
4. Instantiate JSGantt using GanttChart()
var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 0, 0, 0, 1, 1, 'day');
GanttChart(pGanttVar, pDiv, pStart, pEnd, pWidth, pShowRes, pShowDur, pFormat)
pGanttVar: (required) name of the variable assigned
pDiv: (required) this is a DIV object created in HTML
pStart: UNUSED - future use to force minimum chart date
pEnd: UNUSED - future use to force maximum chart date
pWidth: UNUSED - future use to force chart width and cause objects to scale to fit within that width
pShowRes: UNUSED - future use to turn on/off display of resource names
pShowDur: UNUSED - future use to turn on/off display of task durations
pFormat: (required) - used to indicate whether chart should be drawn in "day", "week", or "month" format
5. Add Tasks using AddTaskItem()
g.AddTaskItem(new JSGantt.TaskItem(1, 'Define Chart API', '', '', 'ff0000', 'http://help.com', 0, 'Brian', 0, 1, 0, 1));
g.AddTaskItem(new JSGantt.TaskItem(11, 'Chart Object', '2/10/2008', '2/10/2008', 'ff00ff', 'http://www.yahoo.com', 1, 'Shlomy', 100, 0, 1, 1));
TaskItem(pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend)
pID: (required) is a unique ID used to identify each row for parent functions and for setting dom id for hiding/showing
pName: (required) is the task Label
pStart: (required) the task start date, can enter empty date ('') for groups
pEnd: (required) the task end date, can enter empty date ('') for groups
pColor: (required) the html color for this task; e.g. '00ff00'
pLink: (optional) any http link navigated to when task bar is clicked.
pMile:(optional) represent a milestone
pRes: (optional) resource name
pComp: (required) completion percent
pGroup: (optional) indicates whether this is a group(parent) - 0=NOT Parent; 1=IS Parent
pParent: (required) identifies a parent pID, this causes this task to be a child of identified task
pOpen: UNUSED - in future can be initially set to close folder when chart is first drawn
*You should be able to add items to the chart in realtime via javascript and issuing "g.Draw()" command.
6. Call Draw() and DrawDependencies()
g.Draw();
g.DrawDependencies();
7. Close the <script> block
</script>
Final code should look like