jsGantt - 1.2
  Bugs/Issues    Download    License    Usage    Examples    Credits




  100% Free Javascript / CSS/ HTML Gantt chart control. Completely buzzword compliant including AJAX !


Basic Features
Advanced Features
  BUGS/ISSUES

Current Issues:
  1. Currently only one gantt chart is allowed per page.

New in 1.2:
  DOWNLOAD
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/

  LICENSE
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.



  USAGE

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", "month", or "quarter" 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)
g.setCaptionType('Resource');  // Set to Show Caption (None,Caption,Resource,Duration,Complete)
g.setShowStartDate(1); // Show/Hide Start Date(0/1)
g.setShowEndDate(1); // Show/Hide End Date(0/1)
g.setDateInputFormat('mm/dd/yyyy')  // Set format of input dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')
g.setDateDisplayFormat('mm/dd/yyyy') // Set format to display dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')
g.setFormatArr("day","week","month","quarter") // Set format options (up to 4 : "minute","hour","day","week","month","quarter")

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, "121,122", "My Caption"));
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. You can also enter specific time (2/10/2008 12:00) for additional percision or half days.
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: can be initially set to close folder when chart is first drawn
pDepend: optional list of id's this task is dependent on ... line drawn from dependent to this item
pCaption: optional caption that will be added after task bar if CaptionType set to "Caption"
*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

  ADDITIONAL DEMOS

  CREDITS

Developed by Shlomy Gantz and Brian Twidt
Contributed: Paul Labuschagne, Kevin Badgett, Ilan Admon