JsGantt (Gantt Chart Control)

JsGantt is a Gantt Chart Control Based on Javascript/CSS/HTML. You can group tasks, set task dependencies, identify different tasks with different colors, and set milestones. Allows you to dynamically load tasks and view task Gantt charts by day, week, month, hour, or minute.
 

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) for additional permissionor 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 shoshould be able to add items to the chart in realtime via javascript and issuing "g. Draw ()" command.
JSGantt. parseXML ("project. xml", g );
[Html]
<Project>
<Task>
<PID> 10 </pID>
<PName> WCF Changes </pName>
<PStart> </pStart>
<PEnd> </pEnd>
<PColor> 0000ff </pColor>
<PLink> </pLink>
<PMile> 0 </pMile>
<PRes> </pRes>
<PComp> 0 </pComp>
<PGroup> 1 </pGroup>
<PParent> 0 </pParent>
<POpen> 1 </pOpen>
<PDepend/>
</Task>
<Task>
<PID> 20 </pID>
<PName> Move to WCF from remoting </pName>
<PStart> 8/11/2008 </pStart>
<PEnd> 8/15/2008 </pEnd>
<PColor> 0000ff </pColor>
<PLink> </pLink>
<PMile> 0 </pMile>
<PRes> Rich </pRes>
<PComp> 10 </pComp>
<PGroup> 0 </pGroup>
<PParent> 10 </pParent>
<POpen> 1 </pOpen>
<PDepend> </pDepend>
</Task>
<Task>
<PID> 30 </pID>
<PName> add Auditing </pName>
<PStart> 8/19/2008 </pStart>
<PEnd> 8/21/2008 </pEnd>
<PColor> 0000ff </pColor>
<PLink> </pLink>
<PMile> 0 </pMile>
<PRes> Mal </pRes>
<PComp> 50 </pComp>
<PGroup> 0 </pGroup>
<PParent> 10 </pParent>
<POpen> 1 </pOpen>
<PDepend> 20 </pDepend>
</Task>
</Project>
Final code shoshould look like
[Html]
<Link rel = "stylesheet" type = "text/css" href = "jsgantt.css"/>
<Script language = "javascript" src = "jsgantt. js"> </script>
<Div style = "position: relative" class = "gantt" id = "GanttChartDIV"> </div>
<Script>
Var g = new JSGantt. GanttChart ('G', document. getElementById ('ganttchartdiv '), 'day ');
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
If (g ){
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', '2014/1/123', '2014/3/123', 'ff00ff', 'HTTP: // www.yahoo.com ', 1, 'shlomy ', 100, 0, 1, 1 ));
G. addTaskItem (new JSGantt. taskItem (12, 'Task objects', '','', '00ff00', '', 0, 'shlomy', 40, 1, 1, 1 ));
G. addTaskItem (new JSGantt. taskItem (121, 'constructor proc', '2017/123', '2017/123', '00ffff', 'HTTP: // www.yahoo.com ', 0, 'Brian T. ', 60, 0, 12, 1 ));
G. addTaskItem (new JSGantt. taskItem (122, 'Task Variables ', '2014/1/123', '2014/2/123', 'ff0000', 'HTTP: // help.com', 0, '', 60, 0, 12, 1,121 ));
G. addTaskItem (new JSGantt. taskItem (123, 'Task functions', '2014/1/123', '2014/2/123', 'ff0000', 'HTTP: // help.com ', 0, 'anyone ', 60, 0, 12, 1, 0, 'this is another caption '));
G. addTaskItem (new JSGantt. taskItem (2, 'create HTML shell', '2014/1/123', '2014/2/123', 'ffff00', 'HTTP: // help.com ', 0, 'Brian ', 20, 0, 0, 1,122 ));
G. addTaskItem (new JSGantt. taskItem (3, 'Code Javascript ', '','', 'ff000000', 'HTTP: // help.com', 0, 'Brian ', 0, 1, 0, 1 ));
G. addTaskItem (new JSGantt. taskItem (31, 'Fine Variables ', '2014/1/123', '2014/2/123', 'ff00ff', 'HTTP: // help.com', 0, 'Brian ', 30, 0, 3, 1, 'caption 1 '));
G. addTaskItem (new JSGantt. taskItem (32, 'calculate Chart size', '2017/123', '2017/123456', '00ff00', 'HTTP: // help.com ', 0, 'shlomy ', 40, 0, 3, 1 ));
G. addTaskItem (new JSGantt. taskItem (33, 'draw Taks Items ', '','', '00ff00', 'HTTP: // help.com', 0, 'someone', 40, 1, 3, 1 ));
G. addTaskItem (new JSGantt. taskItem (332, 'Task Label table', '2014/1/123', '2014/2/123', '0000ff', 'HTTP: // help.com ', 0, 'Brian ', 60, 0, 33, 1 ));
G. addTaskItem (new JSGantt. taskItem (333, 'Task Scrolling grid', '2014/1/123', '2014/2/123', '0000ff', 'HTTP: // help.com ', 0, 'Brian ', 60, 0, 33, 1 ));
G. addTaskItem (new JSGantt. taskItem (34, 'draw Task Bars', '','', '000000', 'HTTP: // help.com ', 0, 'anybody', 60, 1, 3, 1 ));
G. addTaskItem (new JSGantt. taskItem (341, 'loop task', '2014/1/123', '2014/2/123', 'ff0000 ', 'HTTP: // help.com', 0, 'Brian ', 60, 0, 34, 1, "332,333 "));
G. addTaskItem (new JSGantt. taskItem (342, 'calculate Start/stop', '2017/123', '2017/123456', 'ff6666', 'HTTP: // help.com ', 0, 'Brian ', 60, 0, 34, 1 ));
G. addTaskItem (new JSGantt. taskItem (343, 'draw Task Div ', '2014/3/123', '2014/3/123', 'ff0000', 'HTTP: // help.com ', 0, 'Brian ', 60, 0, 34, 1 ));
G. addTaskItem (new JSGantt. taskItem (344, 'draw Completion Div ', '2017/123', '2017/123', 'ff0000', 'HTTP: // help.com ', 0, 'Brian ', 60, 0, 34, 1 ));
G. addTaskItem (new JSGantt. taskItem (35, 'Make updates', '2014/1/123', '2014/2/123', 'f600f6 ', 'HTTP: // help.com', 0, 'Brian ', 30, 0, 3, 1 ));
G. Draw (); www.2cto.com
G. DrawDependencies ();
}
Else
{
Alert ("not defined ");
}
</Script> <strong>
</Strong>

Author: evangel_z