100% Free Javascript / CSS/ HTML Gantt chart control. Completely buzzword compliant including AJAX !
Basic Features
- Tasks & Collapsible Task Groups
- Dependencies
- Task Completion
- Task Color
- Milestones
- Resources
- No images needed
Advanced Features
- Dynamic Loading of Tasks
- Dynamic change of format (day/week/month)
- Load Gantt from XML file
Current Issues:
- Currently only one gantt chart is allowed per page.
Fixed:
- 11/02/08 - DOCTYPE issue fixed
- 09/30/08 - Collapsing groups does not always collapse subgroups
- 09/28/08 - Switching between day/week/month expands chart
- 09/27/08 - XML parsing in Chrome
Click here to download the jsgantt
You can download the latest bleeding edge version, request features and report issues at http://code.google.com/p/jsgantt/
JSGantt is released under BSD license. If you require another license please contact shlomygantz@hotmail.com
If you plan to use it in a commercial product please consider donating the first sale to charity.
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'), 'day');
GanttChart(pGanttVar, pDiv, pFormat)
pGanttVar: (required) name of the variable assigned
pDiv: (required) this is a DIV object created in HTML
pFormat: (required) - used to indicate whether chart should be drawn in "day", "week", or "month" format
Customize the look and feel using the following setters
g.setShowRes(1); // Show/Hide Responsible (0/1)
g.setShowDur(1); // Show/Hide Duration (0/1)
g.setShowComp(1); // Show/Hide % Complete(0/1)
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.
5a. Another way to add tasks is to use an external XML file with parseXML()
JSGantt.parseXML("project.xml",g);
The structure of the XML file:
6. Call Draw() and DrawDependencies()
g.Draw();
g.DrawDependencies();
7. Close the <script> block
</script>
Final code should look like
Developed by Shlomy Gantz and Brian Twidt
Contributed: Paul Labuschagne