New: Add JSGrant library
This commit is contained in:
Laurent Destailleur
parent
5b31e481fa
commit
54d097a464
@ -21,6 +21,7 @@ FPDI_Protection 1.0.3 Apache Software License 2.0 No GPL3 only PDF encr
|
||||
GeoIP x.x Yes GeoIP Maxmind conversion
|
||||
iWebkit 5.0.4 LGPL 3.0 Yes Iphone templates framework
|
||||
JCrop 0.9.8 MIT Licence Yes JS library to crop images
|
||||
JSGrant 1.2 BSD Licence
|
||||
MagPieRss 0.72 GPL 2.0 Yes Load RSS
|
||||
NuSoap 0.7.3 LGPL 2.1 Yes Interfaces with third tools
|
||||
OdtPHP 1.0.1 GPL 2.0 Yes Mibrary to build/edit ODT files
|
||||
|
||||
564
htdocs/includes/jsgantt/index.htm
Normal file
564
htdocs/includes/jsgantt/index.htm
Normal file
@ -0,0 +1,564 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="jsgantt.css"/>
|
||||
<script language="javascript" src="jsgantt.js"></script>
|
||||
<script language="javascript" src="graphics.js"></script>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.style1 {color: #0000FF}
|
||||
|
||||
.roundedCorner{display:block}
|
||||
.roundedCorner *{
|
||||
display:block;
|
||||
height:1px;
|
||||
overflow:hidden;
|
||||
font-size:.01em;
|
||||
background:#0061ce}
|
||||
.roundedCorner1{
|
||||
margin-left:3px;
|
||||
margin-right:3px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
border-left:1px solid #91bbe9;
|
||||
border-right:1px solid #91bbe9;
|
||||
background:#3f88da}
|
||||
.roundedCorner2{
|
||||
margin-left:1px;
|
||||
margin-right:1px;
|
||||
padding-right:1px;
|
||||
padding-left:1px;
|
||||
border-left:1px solid #e5effa;
|
||||
border-right:1px solid #e5effa;
|
||||
background:#307fd7}
|
||||
.roundedCorner3{
|
||||
margin-left:1px;
|
||||
margin-right:1px;
|
||||
border-left:1px solid #307fd7;
|
||||
border-right:1px solid #307fd7;}
|
||||
.roundedCorner4{
|
||||
border-left:1px solid #91bbe9;
|
||||
border-right:1px solid #91bbe9}
|
||||
.roundedCorner5{
|
||||
border-left:1px solid #3f88da;
|
||||
border-right:1px solid #3f88da}
|
||||
.roundedCornerfg{
|
||||
background:#0061ce;}
|
||||
|
||||
|
||||
-->
|
||||
</style>
|
||||
<title>FREE javascript gantt - JSGantt HTML and CSS only</title></head>
|
||||
<body>
|
||||
|
||||
<!-- content goes here -->
|
||||
<TABLE width="100%" cellpadding="0" cellspacing="0" style="position:absolute; top:0; left:0;">
|
||||
<TBODY><TR>
|
||||
|
||||
<TD bgcolor="#298eff" style="height:3px;"></TD></TR>
|
||||
|
||||
|
||||
<TR>
|
||||
<TD bgcolor="#0061ce" style="padding-top:5px; padding-bottom:5px;"><FONT face="Arial,Helvetica" size="5" color="#FFFFFF"><I><STRONG> jsGantt - 1.2</STRONG></I></FONT></TD>
|
||||
|
||||
</TR>
|
||||
<TR><TD bgcolor="#CFCFCF" style="height:3px;"></TD></TR>
|
||||
|
||||
<TR>
|
||||
<TD bgcolor="#ffffff" style="color:#444444; text-decoration:none;"><FONT face="Arial,Helvetica" size="3" color="#FFFFFF"><I><STRONG> <a href="#tBugs">Bugs/Issues</a> <a href="#tDownload">Download</a> <a href="#tLicense">License</a> <a href="#tUsage">Usage</a> <a href="#tExamples">Examples</a> <a href="http://www.jsgantt.com/docs/index.html">Documenation</a> <a href="#tSubscribe">Subscribe</a> <a href="#tCredits">Credits</a> </STRONG></I></FONT></TD>
|
||||
|
||||
</TR>
|
||||
<TR><TD bgcolor="#FFFFFF" style="height:2px;"></TD></TR>
|
||||
|
||||
<TR><TD bgcolor="#CFCFCF" style="height:1px;"></TD></TR>
|
||||
|
||||
</TBODY>
|
||||
|
||||
</TABLE>
|
||||
<BR><BR>
|
||||
<BR>
|
||||
<BR>
|
||||
|
||||
|
||||
<FONT face="Arial,Helvetica" size="3"> 100% Free Javascript / CSS/ HTML Gantt chart control. Completely buzzword compliant including AJAX !</FONT><BR><BR>
|
||||
|
||||
|
||||
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
|
||||
<script>
|
||||
|
||||
|
||||
// here's all the html code neccessary to display the chart object
|
||||
|
||||
// Future idea would be to allow XML file name to be passed in and chart tasks built from file.
|
||||
|
||||
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 (None,Caption,Resource,Duration,Complete)
|
||||
|
||||
|
||||
//var gr = new Graphics();
|
||||
|
||||
if( g ) {
|
||||
|
||||
// Parameters (pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend, pCaption)
|
||||
|
||||
// You can also use the XML file parser JSGantt.parseXML('project.xml',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', '7/20/2008', '7/20/2008', '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', '7/21/2008', '8/9/2008', '00ffff', 'http://www.yahoo.com', 0, 'Brian T.', 60, 0, 12, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(122, 'Task Variables', '8/6/2008', '8/11/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 12, 1,121));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(123, 'Task by Minute/Hour', '8/6/2008', '8/11/2008 12:00', 'ffff00', 'http://help.com', 0, 'Ilan', 60, 0, 12, 1,121));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(124, 'Task Functions', '8/9/2008', '8/29/2008', 'ff0000', 'http://help.com', 0, 'Anyone', 60, 0, 12, 1, 0, 'This is another caption'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(2, 'Create HTML Shell', '8/24/2008', '8/25/2008', 'ffff00', 'http://help.com', 0, 'Brian', 20, 0, 0, 1,122));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(3, 'Code Javascript', '', '', 'ff0000', 'http://help.com', 0, 'Brian', 0, 1, 0, 1 ));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(31, 'Define Variables', '7/25/2008', '8/17/2008', 'ff00ff', 'http://help.com', 0, 'Brian', 30, 0, 3, 1, '','Caption 1'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(32, 'Calculate Chart Size', '8/15/2008', '8/24/2008', '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', '8/6/2008', '8/11/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(333, 'Task Scrolling Grid', '8/9/2008', '8/20/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(34, 'Draw Task Bars', '', '', '990000', 'http://help.com', 0, 'Anybody', 60, 1, 3, 0));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(341, 'Loop each Task', '8/26/2008', '9/11/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(342, 'Calculate Start/Stop', '9/12/2008', '10/18/2008', 'ff6666', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(343, 'Draw Task Div', '10/13/2008', '10/17/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(344, 'Draw Completion Div', '10/17/2008', '11/04/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1,"342,343"));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(35, 'Make Updates', '12/17/2008','2/04/2009','f600f6', 'http://help.com', 0, 'Brian', 30, 0, 3, 1));
|
||||
|
||||
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
}
|
||||
|
||||
else
|
||||
|
||||
{
|
||||
|
||||
alert("not defined");
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<BR>
|
||||
<FONT face="Arial,Helvetica" size="3">
|
||||
<strong>Basic Features</strong><BR>
|
||||
<ul>
|
||||
<li>Tasks & Collapsible Task Groups</li>
|
||||
<li>Multiple Dependencies</li>
|
||||
<li>Task Completion</li>
|
||||
<li>Task Color</li>
|
||||
<li>Milestones</li>
|
||||
<li>Resources</li>
|
||||
<li>No images needed</li>
|
||||
</ul>
|
||||
|
||||
<strong>Advanced Features</strong><BR>
|
||||
</FONT><ul>
|
||||
<li><font size="3" face="Arial,Helvetica">Dynamic Loading of Tasks</font></li>
|
||||
<li><font size="3" face="Arial,Helvetica">Dynamic change of format </font>
|
||||
<ul>
|
||||
<li>Day</li>
|
||||
<li>Week</li>
|
||||
<li>Month</li>
|
||||
<li>Quarter</li>
|
||||
<li>Hour</li>
|
||||
<li>Minute</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><font size="3" face="Arial,Helvetica">Load Gantt from XML file</font></li>
|
||||
</ul>
|
||||
<FONT face="Arial,Helvetica" size="3"><BR>
|
||||
</FONT>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg">
|
||||
<a name="tBugs" />
|
||||
<table width="50%" >
|
||||
<tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> BUGS/ISSUES</b></i></font>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<br>
|
||||
Current Issues:
|
||||
<ol>
|
||||
<li>Currently only one gantt chart is allowed per page. </li>
|
||||
|
||||
</ol><br>
|
||||
New in 1.2:
|
||||
<ul>
|
||||
<li>Support for half-days</li>
|
||||
<li>Hour/Minute format</li>
|
||||
</ul>
|
||||
<BR>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"> <a name="tDownload" />
|
||||
<table width="50%"><tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> DOWNLOAD</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<a href="http://www.jsgantt.com/zip/">Click here to download the jsgantt</a> <br>
|
||||
You can download the latest bleeding edge version, request features and report issues at <a href="http://code.google.com/p/jsgantt/">http://code.google.com/p/jsgantt/</a>
|
||||
<br><br>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tLicense" />
|
||||
<table width="50%"><tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> LICENSE</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
JSGantt is released under BSD license. If you require another license please contact <a href="mailto:shlomygantz@hotmail.com">shlomygantz@hotmail.com</a><br>
|
||||
If you plan to use it in a commercial product please consider donating the first sale to charity.
|
||||
<br><br>
|
||||
<textarea cols="80" rows="5">
|
||||
* Copyright (c) 2008, Shlomy Gantz/BlueBrick Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of Shlomy Gantz or BlueBrick Inc. nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY SHLOMY GANTZ/BLUEBRICK INC. ''AS IS'' AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL SHLOMY GANTZ/BLUEBRICK INC. BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
</textarea><br><br>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tUsage" />
|
||||
<table width="50%"><tr>
|
||||
<td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> USAGE</b></i></font>
|
||||
</td>
|
||||
</tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<p>1. Include JSGantt CSS and Javascript</p>
|
||||
<pre class="style1">
|
||||
<link rel="stylesheet" type="text/css" href="jsgantt.css" />
|
||||
<script language="javascript" src="jsgantt.js"></script>
|
||||
</pre>
|
||||
|
||||
<p>2. Create a div element to hold the gantt chart</p>
|
||||
<pre class="style1"><div style="position:relative" class="gantt" id="GanttChartDIV"></div></pre>
|
||||
<p>3. Start a <script> block</p>
|
||||
<pre class="style1"><script language="javascript"></pre>
|
||||
<p>4. Instantiate JSGantt using GanttChart()</p>
|
||||
<pre class="style1">var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
|
||||
|
||||
</pre>
|
||||
|
||||
<p>GanttChart(<em>pGanttVar, pDiv, pFormat</em>)<br>
|
||||
<em>pGanttVar</em>: (required) name of the variable assigned<br>
|
||||
<em>pDiv</em>: (required) this is a DIV object created in HTML<br>
|
||||
<em>pFormat</em>: (required) - used to indicate whether chart should be drawn in "day", "week", "month", or "quarter" format</p>
|
||||
<p>Customize the look and feel using the following setters<br><br>
|
||||
<pre class="style1">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")
|
||||
</pre>
|
||||
|
||||
</p>
|
||||
<p>5. Add Tasks using AddTaskItem()</p>
|
||||
<pre class="style1">
|
||||
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"));
|
||||
</pre>
|
||||
|
||||
TaskItem(<em>pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend</em>)<br>
|
||||
<em>pID</em>: (required) is a unique ID used to identify each row for parent functions and for setting dom id for hiding/showing<br>
|
||||
<em>pName</em>: (required) is the task Label<br>
|
||||
<em>pStart</em>: (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.<br>
|
||||
<em>pEnd</em>: (required) the task end date, can enter empty date ('') for groups<br>
|
||||
<em>pColor</em>: (required) the html color for this task; e.g. '00ff00'<br>
|
||||
<em>pLink</em>: (optional) any http link navigated to when task bar is clicked.<br>
|
||||
<em>pMile</em>:(optional) represent a milestone<br>
|
||||
<em>pRes</em>: (optional) resource name<br>
|
||||
<em>pComp</em>: (required) completion percent<br>
|
||||
<em>pGroup</em>: (optional) indicates whether this is a group(parent) - 0=NOT Parent; 1=IS Parent<br>
|
||||
<em>pParent</em>: (required) identifies a parent pID, this causes this task to be a child of identified task<br>
|
||||
<em>pOpen</em>: can be initially set to close folder when chart is first drawn<br>
|
||||
<em>pDepend</em>: optional list of id's this task is dependent on ... line drawn from dependent to this item<br>
|
||||
<em>pCaption</em>: optional caption that will be added after task bar if CaptionType set to "Caption"<br>
|
||||
|
||||
*You should be able to add items to the chart in realtime via javascript and issuing "g.Draw()" command.
|
||||
|
||||
<p>5a. Another way to add tasks is to use an external XML file with parseXML()</p>
|
||||
<pre class="style1">
|
||||
JSGantt.parseXML("project.xml",g);
|
||||
</pre>
|
||||
The structure of the XML file:<br>
|
||||
<textarea name="textarea" cols="150" rows="10">
|
||||
<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>
|
||||
</textarea>
|
||||
|
||||
<p>6. Call Draw() and DrawDependencies()</p>
|
||||
<pre class="style1">
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
</pre>
|
||||
|
||||
<br>
|
||||
<p>7. Close the <script> block</p>
|
||||
<pre class="style1"></script></pre>
|
||||
|
||||
<br><br>
|
||||
Final code should look like
|
||||
<textarea name="textarea2" cols="150" rows="20">
|
||||
<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', '2/20/2008', '2/20/2008', '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', '2/21/2008', '3/9/2008', '00ffff', 'http://www.yahoo.com', 0, 'Brian T.', 60, 0, 12, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(122, 'Task Variables', '3/6/2008', '3/11/2008', 'ff0000', 'http://help.com', 0, '', 60, 0, 12, 1,121));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(123, 'Task Functions', '3/9/2008', '3/29/2008', 'ff0000', 'http://help.com', 0, 'Anyone', 60, 0, 12, 1, 0, 'This is another caption'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(2, 'Create HTML Shell', '3/24/2008', '3/25/2008', 'ffff00', 'http://help.com', 0, 'Brian', 20, 0, 0, 1,122));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(3, 'Code Javascript', '', '', 'ff0000', 'http://help.com', 0, 'Brian', 0, 1, 0, 1 ));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(31, 'Define Variables', '2/25/2008', '3/17/2008', 'ff00ff', 'http://help.com', 0, 'Brian', 30, 0, 3, 1, ,'Caption 1'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(32, 'Calculate Chart Size', '3/15/2008', '3/24/2008', '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', '3/6/2008', '3/11/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(333, 'Task Scrolling Grid', '3/9/2008', '3/20/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(34, 'Draw Task Bars', '', '', '990000', 'http://help.com', 0, 'Anybody', 60, 1, 3, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(341, 'Loop each Task', '3/26/2008', '4/11/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1, "332,333"));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(342, 'Calculate Start/Stop', '4/12/2008', '5/18/2008', 'ff6666', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(343, 'Draw Task Div', '5/13/2008', '5/17/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(344, 'Draw Completion Div', '5/17/2008', '6/04/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(35, 'Make Updates', '10/17/2008','12/04/2008','f600f6', 'http://help.com', 0, 'Brian', 30, 0, 3, 1));
|
||||
|
||||
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("not defined");
|
||||
}
|
||||
|
||||
</script>
|
||||
</textarea>
|
||||
</p>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tExamples"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> ADDITIONAL DEMOS</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<ul>
|
||||
<li><a href="index.htm">jsGantt</a></li>
|
||||
<li><a href="jsgantt_exExternalXML.html">jsGantt with external XML file</a></li>
|
||||
<li><a href="jsgantt_Minutes.html">jsGantt by minutes</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tSubscribe"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> SUBSCRIBE</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Enter your email address to receive JSGantt announcements<br />
|
||||
<form action="http://www.jsgantt.com/subscribe/?subsribe" method="post">
|
||||
<input type="text" name="email" size="20" />
|
||||
<input type="submit" value="Subscribe" />
|
||||
</form><br />
|
||||
</p>
|
||||
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tCredits"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> CREDITS</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>Developed by Shlomy Gantz and Brian Twidt<br>
|
||||
Contributed: Paul Labuschagne, Kevin Badgett, Ilan Admon<br>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
htdocs/includes/jsgantt/jsgantt.compressed.js
Normal file
1
htdocs/includes/jsgantt/jsgantt.compressed.js
Normal file
File diff suppressed because one or more lines are too long
53
htdocs/includes/jsgantt/jsgantt.css
Normal file
53
htdocs/includes/jsgantt/jsgantt.css
Normal file
@ -0,0 +1,53 @@
|
||||
|
||||
// These are the class/styles used by various objects in GanttChart. However, Firefox has problems deciphering class style when DIVs are embedded in other DIVs.
|
||||
|
||||
// GanttChart makes heavy use of embedded DIVS, thus the style are often embedded directly in the objects html. If this could be resolved with Firefox, it would
|
||||
|
||||
// make alot of the code look simpleer/cleaner without all the embedded styles
|
||||
|
||||
|
||||
|
||||
..gantt { font-family:tahoma, arial, verdana; font-size:10px;}
|
||||
|
||||
..gdatehead { BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; HEIGHT: 18px }
|
||||
|
||||
..ghead { BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 24px; HEIGHT: 20px }
|
||||
|
||||
..gname { BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; WIDTH: 18px; HEIGHT: 18px }
|
||||
|
||||
..ghead A { FONT-SIZE: 10px; COLOR: #000000; TEXT-DECORATION: none }
|
||||
|
||||
..gheadwkend A { FONT-SIZE: 10px; COLOR: #000000; TEXT-DECORATION: none }
|
||||
|
||||
..gheadwkend { BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 24px; HEIGHT: 20px; background-color: #cfcfcf }
|
||||
|
||||
..gfiller { BORDER-TOP: #efefef 1px solid; BORDER-LEFT: #efefef 1px solid; WIDTH: 18px; HEIGHT: 18px }
|
||||
|
||||
..gfillerwkend { BORDER-LEFT: #efefef 1px solid; WIDTH: 18px; HEIGHT: 18px; BACKGROUND-COLOR: #cfcfcf }
|
||||
|
||||
..gitem { BORDER-TOP: #cccccc 1px solid; WIDTH: 18px; HEIGHT: 18px }
|
||||
|
||||
..gitemwkend { BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; WIDTH: 18px; HEIGHT: 18px }
|
||||
|
||||
..gmilestone { BORDER-TOP: #efefef 1px solid; FONT-SIZE: 14px; OVERFLOW: hidden; BORDER-LEFT: #efefef 1px solid; WIDTH: 18px; HEIGHT: 18px}
|
||||
|
||||
..gmilestonewkend { BORDER-TOP: #efefef 1px solid; BORDER-LEFT: #cccccc 1px solid; WIDTH: 18px; HEIGHT: 18px}
|
||||
|
||||
..btn { BORDER-RIGHT: #ffffff; BORDER-TOP: #ffffff; FONT-WEIGHT: bold; FONT-SIZE: 10px; BORDER-LEFT: #ffffff; WIDTH: 12px; COLOR: #cccccc; BORDER-BOTTOM: #ffffff; BACKGROUND-COLOR: #ffffff }
|
||||
|
||||
..hrcomplete { BORDER-RIGHT: #000000 2px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000000 2px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #000000 2px solid; WIDTH: 20px; COLOR: #000000; PADDING-TOP: 0px; BORDER-BOTTOM: #000000 2px solid; HEIGHT: 4px }
|
||||
|
||||
..hrhalfcomplete { BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; WIDTH: 9px; COLOR: #000000; BORDER-BOTTOM: #000000 2px solid; HEIGHT: 4px }
|
||||
|
||||
..gweekend { font-family:tahoma, arial, verdana; font-size:11px; background-color:#EEEEEE; text-align:center; }
|
||||
|
||||
..gtask { font-family:tahoma, arial, verdana; font-size:11px; background-color:#00FF00; text-align:center; }
|
||||
|
||||
..gday { font-family:tahoma, arial, verdana; font-size:11px; text-align:center; }
|
||||
|
||||
..gcomplete { background-color:black; height:5px; overflow: auto; margin-top:4px; }
|
||||
|
||||
DIV.scroll { BORDER-RIGHT: #efefef 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #efefef 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; BORDER-LEFT: #efefef 1px solid; WIDTH: 420px; PADDING-TOP: 0px; BORDER-BOTTOM: #efefef 1px solid; BACKGROUND-COLOR: #ffffff }
|
||||
|
||||
DIV.scroll2 { position:relative; PADDING-RIGHT: 0px; overflow:auto ;overflow-x:scroll;overflow-y:hidden; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 482px; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff }
|
||||
|
||||
2307
htdocs/includes/jsgantt/jsgantt.js
Normal file
2307
htdocs/includes/jsgantt/jsgantt.js
Normal file
File diff suppressed because it is too large
Load Diff
548
htdocs/includes/jsgantt/jsgantt_Minutes.html
Normal file
548
htdocs/includes/jsgantt/jsgantt_Minutes.html
Normal file
@ -0,0 +1,548 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="jsgantt.css"/>
|
||||
<script language="javascript" src="jsgantt.js"></script>
|
||||
<script language="javascript" src="graphics.js"></script>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.style1 {color: #0000FF}
|
||||
|
||||
.roundedCorner{display:block}
|
||||
.roundedCorner *{
|
||||
display:block;
|
||||
height:1px;
|
||||
overflow:hidden;
|
||||
font-size:.01em;
|
||||
background:#0061ce}
|
||||
.roundedCorner1{
|
||||
margin-left:3px;
|
||||
margin-right:3px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
border-left:1px solid #91bbe9;
|
||||
border-right:1px solid #91bbe9;
|
||||
background:#3f88da}
|
||||
.roundedCorner2{
|
||||
margin-left:1px;
|
||||
margin-right:1px;
|
||||
padding-right:1px;
|
||||
padding-left:1px;
|
||||
border-left:1px solid #e5effa;
|
||||
border-right:1px solid #e5effa;
|
||||
background:#307fd7}
|
||||
.roundedCorner3{
|
||||
margin-left:1px;
|
||||
margin-right:1px;
|
||||
border-left:1px solid #307fd7;
|
||||
border-right:1px solid #307fd7;}
|
||||
.roundedCorner4{
|
||||
border-left:1px solid #91bbe9;
|
||||
border-right:1px solid #91bbe9}
|
||||
.roundedCorner5{
|
||||
border-left:1px solid #3f88da;
|
||||
border-right:1px solid #3f88da}
|
||||
.roundedCornerfg{
|
||||
background:#0061ce;}
|
||||
|
||||
|
||||
-->
|
||||
</style>
|
||||
<title>FREE javascript gantt - JSGantt HTML and CSS only</title></head>
|
||||
<body>
|
||||
|
||||
<!-- content goes here -->
|
||||
<TABLE width="100%" cellpadding="0" cellspacing="0" style="position:absolute; top:0; left:0;">
|
||||
<TBODY><TR>
|
||||
|
||||
<TD bgcolor="#298eff" style="height:3px;"></TD></TR>
|
||||
|
||||
|
||||
<TR>
|
||||
<TD bgcolor="#0061ce" style="padding-top:5px; padding-bottom:5px;"><FONT face="Arial,Helvetica" size="5" color="#FFFFFF"><I><STRONG> jsGantt - 1.2</STRONG></I></FONT></TD>
|
||||
|
||||
</TR>
|
||||
<TR><TD bgcolor="#CFCFCF" style="height:3px;"></TD></TR>
|
||||
|
||||
<TR>
|
||||
<TD bgcolor="#ffffff" style="color:#444444; text-decoration:none;"><FONT face="Arial,Helvetica" size="3" color="#FFFFFF"><I><STRONG> <a href="#tBugs">Bugs/Issues</a> <a href="#tDownload">Download</a> <a href="#tLicense">License</a> <a href="#tUsage">Usage</a> <a href="#tExamples">Examples</a> <a href="http://www.jsgantt.com/docs/index.html">Documenation</a> <a href="#tSubscribe">Subscribe</a> <a href="#tCredits">Credits</a> </STRONG></I></FONT></TD>
|
||||
|
||||
</TR>
|
||||
<TR><TD bgcolor="#FFFFFF" style="height:2px;"></TD></TR>
|
||||
|
||||
<TR><TD bgcolor="#CFCFCF" style="height:1px;"></TD></TR>
|
||||
|
||||
</TBODY>
|
||||
|
||||
</TABLE>
|
||||
<BR><BR>
|
||||
<BR>
|
||||
<BR>
|
||||
|
||||
|
||||
<FONT face="Arial,Helvetica" size="3"> 100% Free Javascript / CSS/ HTML Gantt chart control. Completely buzzword compliant including AJAX !</FONT><BR><BR>
|
||||
|
||||
|
||||
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
|
||||
<script>
|
||||
|
||||
|
||||
// here's all the html code neccessary to display the chart object
|
||||
|
||||
// Future idea would be to allow XML file name to be passed in and chart tasks built from file.
|
||||
|
||||
var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'hour');
|
||||
|
||||
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.setFormatArr("hours","minutes")
|
||||
|
||||
//var gr = new Graphics();
|
||||
|
||||
if( g ) {
|
||||
|
||||
// Parameters (pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen)
|
||||
|
||||
// You can also use the XML file parser JSGantt.parseXML('project.xml',g)
|
||||
|
||||
g.AddTaskItem(new JSGantt.TaskItem(1, 'Add minutes/hours', '', '', 'ff0000', 'http://help.com', 0, 'Ilan', 0, 1, 0, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(11, 'Add support for half days', '5/14/2009 14:00', '5/14/2009 15:30', 'ff00ff', 'http://www.jsgantt.com', 0, 'Ilan', 100, 0, 1, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(12, 'Add minute view', '5/14/2009 16:00', '5/14/2009 17:00', '00ff00', '', 0, 'Ilan', 40, 0, 1, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(13, 'Add hours view', '5/14/2009 16:00', '5/14/2009 17:00', '00ffff', 'http://www.yahoo.com', 0, 'Ilan', 60, 0, 1, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(14, 'Add support for format options', '5/14/2009 18:00', '5/14/2009 19:00', '00ffff', 'http://www.yahoo.com', 0, 'Shlomy', 60, 0, 14, 1));
|
||||
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
}
|
||||
|
||||
else
|
||||
|
||||
{
|
||||
|
||||
alert("not defined");
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<BR>
|
||||
<FONT face="Arial,Helvetica" size="3">
|
||||
<strong>Basic Features</strong><BR>
|
||||
<ul>
|
||||
<li>Tasks & Collapsible Task Groups</li>
|
||||
<li>Multiple Dependencies</li>
|
||||
<li>Task Completion</li>
|
||||
<li>Task Color</li>
|
||||
<li>Milestones</li>
|
||||
<li>Resources</li>
|
||||
<li>No images needed</li>
|
||||
</ul>
|
||||
|
||||
<strong>Advanced Features</strong><BR>
|
||||
</FONT><ul>
|
||||
<li><font size="3" face="Arial,Helvetica">Dynamic Loading of Tasks</font></li>
|
||||
<li><font size="3" face="Arial,Helvetica">Dynamic change of format </font>
|
||||
<ul>
|
||||
<li>Day</li>
|
||||
<li>Week</li>
|
||||
<li>Month</li>
|
||||
<li>Quarter</li>
|
||||
<li>Hour</li>
|
||||
<li>Minute</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><font size="3" face="Arial,Helvetica">Load Gantt from XML file</font></li>
|
||||
</ul>
|
||||
<FONT face="Arial,Helvetica" size="3"><BR>
|
||||
</FONT>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg">
|
||||
<a name="tBugs" />
|
||||
<table width="50%" >
|
||||
<tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> BUGS/ISSUES</b></i></font>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<br>
|
||||
Current Issues:
|
||||
<ol>
|
||||
<li>Currently only one gantt chart is allowed per page. </li>
|
||||
|
||||
</ol><br>
|
||||
New in 1.2:
|
||||
<ul>
|
||||
<li>Support for half-days</li>
|
||||
<li>Hour/Minute format</li>
|
||||
</ul>
|
||||
<BR>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"> <a name="tDownload" />
|
||||
<table width="50%"><tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> DOWNLOAD</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<a href="http://www.jsgantt.com/zip/">Click here to download the jsgantt</a> <br>
|
||||
You can download the latest bleeding edge version, request features and report issues at <a href="http://code.google.com/p/jsgantt/">http://code.google.com/p/jsgantt/</a>
|
||||
<br><br>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tLicense" />
|
||||
<table width="50%"><tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> LICENSE</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
JSGantt is released under BSD license. If you require another license please contact <a href="mailto:shlomygantz@hotmail.com">shlomygantz@hotmail.com</a><br>
|
||||
If you plan to use it in a commercial product please consider donating the first sale to charity.
|
||||
<br><br>
|
||||
<textarea cols="80" rows="5">
|
||||
* Copyright (c) 2008, Shlomy Gantz/BlueBrick Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of Shlomy Gantz or BlueBrick Inc. nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY SHLOMY GANTZ/BLUEBRICK INC. ''AS IS'' AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL SHLOMY GANTZ/BLUEBRICK INC. BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
</textarea><br><br>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tUsage" />
|
||||
<table width="50%"><tr>
|
||||
<td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> USAGE</b></i></font>
|
||||
</td>
|
||||
</tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<p>1. Include JSGantt CSS and Javascript</p>
|
||||
<pre class="style1">
|
||||
<link rel="stylesheet" type="text/css" href="jsgantt.css" />
|
||||
<script language="javascript" src="jsgantt.js"></script>
|
||||
</pre>
|
||||
|
||||
<p>2. Create a div element to hold the gantt chart</p>
|
||||
<pre class="style1"><div style="position:relative" class="gantt" id="GanttChartDIV"></div></pre>
|
||||
<p>3. Start a <script> block</p>
|
||||
<pre class="style1"><script language="javascript"></pre>
|
||||
<p>4. Instantiate JSGantt using GanttChart()</p>
|
||||
<pre class="style1">var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
|
||||
|
||||
</pre>
|
||||
|
||||
<p>GanttChart(<em>pGanttVar, pDiv, pFormat</em>)<br>
|
||||
<em>pGanttVar</em>: (required) name of the variable assigned<br>
|
||||
<em>pDiv</em>: (required) this is a DIV object created in HTML<br>
|
||||
<em>pFormat</em>: (required) - used to indicate whether chart should be drawn in "day", "week", "month", or "quarter" format</p>
|
||||
<p>Customize the look and feel using the following setters<br><br>
|
||||
<pre class="style1">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")
|
||||
</pre>
|
||||
|
||||
</p>
|
||||
<p>5. Add Tasks using AddTaskItem()</p>
|
||||
<pre class="style1">
|
||||
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"));
|
||||
</pre>
|
||||
|
||||
TaskItem(<em>pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend</em>)<br>
|
||||
<em>pID</em>: (required) is a unique ID used to identify each row for parent functions and for setting dom id for hiding/showing<br>
|
||||
<em>pName</em>: (required) is the task Label<br>
|
||||
<em>pStart</em>: (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.<br>
|
||||
<em>pEnd</em>: (required) the task end date, can enter empty date ('') for groups<br>
|
||||
<em>pColor</em>: (required) the html color for this task; e.g. '00ff00'<br>
|
||||
<em>pLink</em>: (optional) any http link navigated to when task bar is clicked.<br>
|
||||
<em>pMile</em>:(optional) represent a milestone<br>
|
||||
<em>pRes</em>: (optional) resource name<br>
|
||||
<em>pComp</em>: (required) completion percent<br>
|
||||
<em>pGroup</em>: (optional) indicates whether this is a group(parent) - 0=NOT Parent; 1=IS Parent<br>
|
||||
<em>pParent</em>: (required) identifies a parent pID, this causes this task to be a child of identified task<br>
|
||||
<em>pOpen</em>: can be initially set to close folder when chart is first drawn<br>
|
||||
<em>pDepend</em>: optional list of id's this task is dependent on ... line drawn from dependent to this item<br>
|
||||
<em>pCaption</em>: optional caption that will be added after task bar if CaptionType set to "Caption"<br>
|
||||
|
||||
*You should be able to add items to the chart in realtime via javascript and issuing "g.Draw()" command.
|
||||
|
||||
<p>5a. Another way to add tasks is to use an external XML file with parseXML()</p>
|
||||
<pre class="style1">
|
||||
JSGantt.parseXML("project.xml",g);
|
||||
</pre>
|
||||
The structure of the XML file:<br>
|
||||
<textarea name="textarea" cols="150" rows="10">
|
||||
<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>
|
||||
</textarea>
|
||||
|
||||
<p>6. Call Draw() and DrawDependencies()</p>
|
||||
<pre class="style1">
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
</pre>
|
||||
|
||||
<br>
|
||||
<p>7. Close the <script> block</p>
|
||||
<pre class="style1"></script></pre>
|
||||
|
||||
<br><br>
|
||||
Final code should look like
|
||||
<textarea name="textarea2" cols="150" rows="20">
|
||||
<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', '2/20/2008', '2/20/2008', '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', '2/21/2008', '3/9/2008', '00ffff', 'http://www.yahoo.com', 0, 'Brian T.', 60, 0, 12, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(122, 'Task Variables', '3/6/2008', '3/11/2008', 'ff0000', 'http://help.com', 0, '', 60, 0, 12, 1,121));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(123, 'Task Functions', '3/9/2008', '3/29/2008', 'ff0000', 'http://help.com', 0, 'Anyone', 60, 0, 12, 1, 0, 'This is another caption'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(2, 'Create HTML Shell', '3/24/2008', '3/25/2008', 'ffff00', 'http://help.com', 0, 'Brian', 20, 0, 0, 1,122));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(3, 'Code Javascript', '', '', 'ff0000', 'http://help.com', 0, 'Brian', 0, 1, 0, 1 ));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(31, 'Define Variables', '2/25/2008', '3/17/2008', 'ff00ff', 'http://help.com', 0, 'Brian', 30, 0, 3, 1, ,'Caption 1'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(32, 'Calculate Chart Size', '3/15/2008', '3/24/2008', '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', '3/6/2008', '3/11/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(333, 'Task Scrolling Grid', '3/9/2008', '3/20/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(34, 'Draw Task Bars', '', '', '990000', 'http://help.com', 0, 'Anybody', 60, 1, 3, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(341, 'Loop each Task', '3/26/2008', '4/11/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1, "332,333"));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(342, 'Calculate Start/Stop', '4/12/2008', '5/18/2008', 'ff6666', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(343, 'Draw Task Div', '5/13/2008', '5/17/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(344, 'Draw Completion Div', '5/17/2008', '6/04/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(35, 'Make Updates', '10/17/2008','12/04/2008','f600f6', 'http://help.com', 0, 'Brian', 30, 0, 3, 1));
|
||||
|
||||
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("not defined");
|
||||
}
|
||||
|
||||
</script>
|
||||
</textarea>
|
||||
</p>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tExamples"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> ADDITIONAL DEMOS</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<ul>
|
||||
<li><a href="index.htm">jsGantt</a></li>
|
||||
<li><a href="jsgantt_exExternalXML.html">jsGantt with external XML file</a></li>
|
||||
<li><a href="jsgantt_Minutes.html">jsGantt by minutes</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tSubscribe"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> SUBSCRIBE</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Enter your email address to receive JSGantt announcements<br />
|
||||
<form action="http://www.jsgantt.com/subscribe/?subsribe" method="post">
|
||||
<input type="text" name="email" size="20" />
|
||||
<input type="submit" value="Subscribe" />
|
||||
</form><br />
|
||||
</p>
|
||||
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tCredits"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> CREDITS</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>Developed by Shlomy Gantz and Brian Twidt<br>
|
||||
Contributed: Paul Labuschagne, Kevin Badgett, Ilan Admon<br>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
533
htdocs/includes/jsgantt/jsgantt_exExternalXML.html
Normal file
533
htdocs/includes/jsgantt/jsgantt_exExternalXML.html
Normal file
@ -0,0 +1,533 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="jsgantt.css"/>
|
||||
<script language="javascript" src="jsgantt.js"></script>
|
||||
<script language="javascript" src="graphics.js"></script>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.style1 {color: #0000FF}
|
||||
|
||||
.roundedCorner{display:block}
|
||||
.roundedCorner *{
|
||||
display:block;
|
||||
height:1px;
|
||||
overflow:hidden;
|
||||
font-size:.01em;
|
||||
background:#0061ce}
|
||||
.roundedCorner1{
|
||||
margin-left:3px;
|
||||
margin-right:3px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
border-left:1px solid #91bbe9;
|
||||
border-right:1px solid #91bbe9;
|
||||
background:#3f88da}
|
||||
.roundedCorner2{
|
||||
margin-left:1px;
|
||||
margin-right:1px;
|
||||
padding-right:1px;
|
||||
padding-left:1px;
|
||||
border-left:1px solid #e5effa;
|
||||
border-right:1px solid #e5effa;
|
||||
background:#307fd7}
|
||||
.roundedCorner3{
|
||||
margin-left:1px;
|
||||
margin-right:1px;
|
||||
border-left:1px solid #307fd7;
|
||||
border-right:1px solid #307fd7;}
|
||||
.roundedCorner4{
|
||||
border-left:1px solid #91bbe9;
|
||||
border-right:1px solid #91bbe9}
|
||||
.roundedCorner5{
|
||||
border-left:1px solid #3f88da;
|
||||
border-right:1px solid #3f88da}
|
||||
.roundedCornerfg{
|
||||
background:#0061ce;}
|
||||
|
||||
|
||||
-->
|
||||
</style>
|
||||
<title>FREE javascript gantt - JSGantt HTML and CSS only</title></head>
|
||||
<body>
|
||||
|
||||
<!-- content goes here -->
|
||||
<TABLE width="100%" cellpadding="0" cellspacing="0" style="position:absolute; top:0; left:0;">
|
||||
<TBODY><TR>
|
||||
|
||||
<TD bgcolor="#298eff" style="height:3px;"></TD></TR>
|
||||
|
||||
|
||||
<TR>
|
||||
<TD bgcolor="#0061ce" style="padding-top:5px; padding-bottom:5px;"><FONT face="Arial,Helvetica" size="5" color="#FFFFFF"><I><STRONG> jsGantt - 1.2</STRONG></I></FONT></TD>
|
||||
|
||||
</TR>
|
||||
<TR><TD bgcolor="#CFCFCF" style="height:3px;"></TD></TR>
|
||||
|
||||
<TR>
|
||||
<TD bgcolor="#ffffff" style="color:#444444; text-decoration:none;"><FONT face="Arial,Helvetica" size="3" color="#FFFFFF"><I><STRONG> <a href="#tBugs">Bugs/Issues</a> <a href="#tDownload">Download</a> <a href="#tLicense">License</a> <a href="#tUsage">Usage</a> <a href="#tExamples">Examples</a> <a href="http://www.jsgantt.com/docs/index.html">Documenation</a> <a href="#tSubscribe">Subscribe</a> <a href="#tCredits">Credits</a> </STRONG></I></FONT></TD>
|
||||
|
||||
</TR>
|
||||
<TR><TD bgcolor="#FFFFFF" style="height:2px;"></TD></TR>
|
||||
|
||||
<TR><TD bgcolor="#CFCFCF" style="height:1px;"></TD></TR>
|
||||
|
||||
</TBODY>
|
||||
|
||||
</TABLE>
|
||||
<BR><BR>
|
||||
<BR>
|
||||
<BR>
|
||||
|
||||
|
||||
<FONT face="Arial,Helvetica" size="3"> 100% Free Javascript / CSS/ HTML Gantt chart control. Completely buzzword compliant including AJAX !</FONT><BR><BR>
|
||||
|
||||
|
||||
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
|
||||
<script>
|
||||
// here's all the html code neccessary to display the chart object
|
||||
// Future idea would be to allow XML file name to be passed in and chart tasks built from file.
|
||||
|
||||
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 (None,Caption,Resource,Duration,Complete)
|
||||
if( g ) {
|
||||
|
||||
// Parameters (pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen)
|
||||
// use the XML file parser
|
||||
JSGantt.parseXML('project.xml',g)
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
}
|
||||
|
||||
else
|
||||
|
||||
{
|
||||
|
||||
alert("not defined");
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<BR>
|
||||
<FONT face="Arial,Helvetica" size="3">
|
||||
<strong>Basic Features</strong><BR>
|
||||
<ul>
|
||||
<li>Tasks & Collapsible Task Groups</li>
|
||||
<li>Multiple Dependencies</li>
|
||||
<li>Task Completion</li>
|
||||
<li>Task Color</li>
|
||||
<li>Milestones</li>
|
||||
<li>Resources</li>
|
||||
<li>No images needed</li>
|
||||
</ul>
|
||||
|
||||
<strong>Advanced Features</strong><BR>
|
||||
</FONT><ul>
|
||||
<li><font size="3" face="Arial,Helvetica">Dynamic Loading of Tasks</font></li>
|
||||
<li><font size="3" face="Arial,Helvetica">Dynamic change of format </font>
|
||||
<ul>
|
||||
<li>Day</li>
|
||||
<li>Week</li>
|
||||
<li>Month</li>
|
||||
<li>Quarter</li>
|
||||
<li>Hour</li>
|
||||
<li>Minute</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><font size="3" face="Arial,Helvetica">Load Gantt from XML file</font></li>
|
||||
</ul>
|
||||
<FONT face="Arial,Helvetica" size="3"><BR>
|
||||
</FONT>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg">
|
||||
<a name="tBugs" />
|
||||
<table width="50%" >
|
||||
<tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> BUGS/ISSUES</b></i></font>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<br>
|
||||
Current Issues:
|
||||
<ol>
|
||||
<li>Currently only one gantt chart is allowed per page. </li>
|
||||
|
||||
</ol><br>
|
||||
New in 1.2:
|
||||
<ul>
|
||||
<li>Support for half-days</li>
|
||||
<li>Hour/Minute format</li>
|
||||
</ul>
|
||||
<BR>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"> <a name="tDownload" />
|
||||
<table width="50%"><tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> DOWNLOAD</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<a href="http://www.jsgantt.com/zip/">Click here to download the jsgantt</a> <br>
|
||||
You can download the latest bleeding edge version, request features and report issues at <a href="http://code.google.com/p/jsgantt/">http://code.google.com/p/jsgantt/</a>
|
||||
<br><br>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tLicense" />
|
||||
<table width="50%"><tr><td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> LICENSE</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
JSGantt is released under BSD license. If you require another license please contact <a href="mailto:shlomygantz@hotmail.com">shlomygantz@hotmail.com</a><br>
|
||||
If you plan to use it in a commercial product please consider donating the first sale to charity.
|
||||
<br><br>
|
||||
<textarea cols="80" rows="5">
|
||||
* Copyright (c) 2008, Shlomy Gantz/BlueBrick Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of Shlomy Gantz or BlueBrick Inc. nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY SHLOMY GANTZ/BLUEBRICK INC. ''AS IS'' AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL SHLOMY GANTZ/BLUEBRICK INC. BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
</textarea><br><br>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tUsage" />
|
||||
<table width="50%"><tr>
|
||||
<td>
|
||||
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> USAGE</b></i></font>
|
||||
</td>
|
||||
</tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
<p>1. Include JSGantt CSS and Javascript</p>
|
||||
<pre class="style1">
|
||||
<link rel="stylesheet" type="text/css" href="jsgantt.css" />
|
||||
<script language="javascript" src="jsgantt.js"></script>
|
||||
</pre>
|
||||
|
||||
<p>2. Create a div element to hold the gantt chart</p>
|
||||
<pre class="style1"><div style="position:relative" class="gantt" id="GanttChartDIV"></div></pre>
|
||||
<p>3. Start a <script> block</p>
|
||||
<pre class="style1"><script language="javascript"></pre>
|
||||
<p>4. Instantiate JSGantt using GanttChart()</p>
|
||||
<pre class="style1">var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
|
||||
|
||||
</pre>
|
||||
|
||||
<p>GanttChart(<em>pGanttVar, pDiv, pFormat</em>)<br>
|
||||
<em>pGanttVar</em>: (required) name of the variable assigned<br>
|
||||
<em>pDiv</em>: (required) this is a DIV object created in HTML<br>
|
||||
<em>pFormat</em>: (required) - used to indicate whether chart should be drawn in "day", "week", "month", or "quarter" format</p>
|
||||
<p>Customize the look and feel using the following setters<br><br>
|
||||
<pre class="style1">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")
|
||||
</pre>
|
||||
|
||||
</p>
|
||||
<p>5. Add Tasks using AddTaskItem()</p>
|
||||
<pre class="style1">
|
||||
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"));
|
||||
</pre>
|
||||
|
||||
TaskItem(<em>pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend</em>)<br>
|
||||
<em>pID</em>: (required) is a unique ID used to identify each row for parent functions and for setting dom id for hiding/showing<br>
|
||||
<em>pName</em>: (required) is the task Label<br>
|
||||
<em>pStart</em>: (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.<br>
|
||||
<em>pEnd</em>: (required) the task end date, can enter empty date ('') for groups<br>
|
||||
<em>pColor</em>: (required) the html color for this task; e.g. '00ff00'<br>
|
||||
<em>pLink</em>: (optional) any http link navigated to when task bar is clicked.<br>
|
||||
<em>pMile</em>:(optional) represent a milestone<br>
|
||||
<em>pRes</em>: (optional) resource name<br>
|
||||
<em>pComp</em>: (required) completion percent<br>
|
||||
<em>pGroup</em>: (optional) indicates whether this is a group(parent) - 0=NOT Parent; 1=IS Parent<br>
|
||||
<em>pParent</em>: (required) identifies a parent pID, this causes this task to be a child of identified task<br>
|
||||
<em>pOpen</em>: can be initially set to close folder when chart is first drawn<br>
|
||||
<em>pDepend</em>: optional list of id's this task is dependent on ... line drawn from dependent to this item<br>
|
||||
<em>pCaption</em>: optional caption that will be added after task bar if CaptionType set to "Caption"<br>
|
||||
|
||||
*You should be able to add items to the chart in realtime via javascript and issuing "g.Draw()" command.
|
||||
|
||||
<p>5a. Another way to add tasks is to use an external XML file with parseXML()</p>
|
||||
<pre class="style1">
|
||||
JSGantt.parseXML("project.xml",g);
|
||||
</pre>
|
||||
The structure of the XML file:<br>
|
||||
<textarea name="textarea" cols="150" rows="10">
|
||||
<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>
|
||||
</textarea>
|
||||
|
||||
<p>6. Call Draw() and DrawDependencies()</p>
|
||||
<pre class="style1">
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
</pre>
|
||||
|
||||
<br>
|
||||
<p>7. Close the <script> block</p>
|
||||
<pre class="style1"></script></pre>
|
||||
|
||||
<br><br>
|
||||
Final code should look like
|
||||
<textarea name="textarea2" cols="150" rows="20">
|
||||
<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', '2/20/2008', '2/20/2008', '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', '2/21/2008', '3/9/2008', '00ffff', 'http://www.yahoo.com', 0, 'Brian T.', 60, 0, 12, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(122, 'Task Variables', '3/6/2008', '3/11/2008', 'ff0000', 'http://help.com', 0, '', 60, 0, 12, 1,121));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(123, 'Task Functions', '3/9/2008', '3/29/2008', 'ff0000', 'http://help.com', 0, 'Anyone', 60, 0, 12, 1, 0, 'This is another caption'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(2, 'Create HTML Shell', '3/24/2008', '3/25/2008', 'ffff00', 'http://help.com', 0, 'Brian', 20, 0, 0, 1,122));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(3, 'Code Javascript', '', '', 'ff0000', 'http://help.com', 0, 'Brian', 0, 1, 0, 1 ));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(31, 'Define Variables', '2/25/2008', '3/17/2008', 'ff00ff', 'http://help.com', 0, 'Brian', 30, 0, 3, 1, ,'Caption 1'));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(32, 'Calculate Chart Size', '3/15/2008', '3/24/2008', '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', '3/6/2008', '3/11/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(333, 'Task Scrolling Grid', '3/9/2008', '3/20/2008', '0000ff', 'http://help.com', 0, 'Brian', 60, 0, 33, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(34, 'Draw Task Bars', '', '', '990000', 'http://help.com', 0, 'Anybody', 60, 1, 3, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(341, 'Loop each Task', '3/26/2008', '4/11/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1, "332,333"));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(342, 'Calculate Start/Stop', '4/12/2008', '5/18/2008', 'ff6666', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(343, 'Draw Task Div', '5/13/2008', '5/17/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(344, 'Draw Completion Div', '5/17/2008', '6/04/2008', 'ff0000', 'http://help.com', 0, 'Brian', 60, 0, 34, 1));
|
||||
g.AddTaskItem(new JSGantt.TaskItem(35, 'Make Updates', '10/17/2008','12/04/2008','f600f6', 'http://help.com', 0, 'Brian', 30, 0, 3, 1));
|
||||
|
||||
|
||||
|
||||
g.Draw();
|
||||
g.DrawDependencies();
|
||||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("not defined");
|
||||
}
|
||||
|
||||
</script>
|
||||
</textarea>
|
||||
</p>
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tExamples"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> ADDITIONAL DEMOS</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<ul>
|
||||
<li><a href="index.htm">jsGantt</a></li>
|
||||
<li><a href="jsgantt_exExternalXML.html">jsGantt with external XML file</a></li>
|
||||
<li><a href="jsgantt_Minutes.html">jsGantt by minutes</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tSubscribe"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> SUBSCRIBE</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Enter your email address to receive JSGantt announcements<br />
|
||||
<form action="http://www.jsgantt.com/subscribe/?subsribe" method="post">
|
||||
<input type="text" name="email" size="20" />
|
||||
<input type="submit" value="Subscribe" />
|
||||
</form><br />
|
||||
</p>
|
||||
|
||||
<div style="width:400px;">
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner1"><b></b></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner5"></b></b>
|
||||
|
||||
<div class="roundedCornerfg"><a name="tCredits"/>
|
||||
<table width="50%">
|
||||
<tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b> CREDITS</b></i></font>
|
||||
</td></tr></table></div>
|
||||
|
||||
<b class="roundedCorner">
|
||||
<b class="roundedCorner5"></b>
|
||||
<b class="roundedCorner4"></b>
|
||||
<b class="roundedCorner3"></b>
|
||||
<b class="roundedCorner2"><b></b></b>
|
||||
<b class="roundedCorner1"><b></b></b></b>
|
||||
</div>
|
||||
|
||||
<p>Developed by Shlomy Gantz and Brian Twidt<br>
|
||||
Contributed: Paul Labuschagne, Kevin Badgett, Ilan Admon<br>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
65
htdocs/includes/jsgantt/project.xml
Normal file
65
htdocs/includes/jsgantt/project.xml
Normal file
@ -0,0 +1,65 @@
|
||||
<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>9/11/2008</pStart>
|
||||
<pEnd>9/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>
|
||||
<pCaption>Brian</pCaption>
|
||||
</task>
|
||||
<task>
|
||||
<pID>30</pID>
|
||||
<pName>add Auditing</pName>
|
||||
<pStart>9/19/2008</pStart>
|
||||
<pEnd>9/21/2008</pEnd>
|
||||
<pColor>0000ff</pColor>
|
||||
<pLink></pLink>
|
||||
<pMile>0</pMile>
|
||||
<pRes>Shlomy</pRes>
|
||||
<pComp>50</pComp>
|
||||
<pGroup>0</pGroup>
|
||||
<pParent>10</pParent>
|
||||
<pOpen>1</pOpen>
|
||||
<pDepend>20</pDepend>
|
||||
<pCaption>Shlomy</pCaption>
|
||||
</task>
|
||||
<task>
|
||||
<pID>40</pID>
|
||||
<pName>Yet another task</pName>
|
||||
<pStart>9/23/2008</pStart>
|
||||
<pEnd>9/24/2008</pEnd>
|
||||
<pColor>0000ff</pColor>
|
||||
<pLink></pLink>
|
||||
<pMile>0</pMile>
|
||||
<pRes>Shlomy</pRes>
|
||||
<pComp>30</pComp>
|
||||
<pGroup>0</pGroup>
|
||||
<pParent>0</pParent>
|
||||
<pOpen>1</pOpen>
|
||||
<pDepend>20,30</pDepend>
|
||||
<pCaption>Shlomy</pCaption>
|
||||
</task>
|
||||
</project>
|
||||
Loading…
Reference in New Issue
Block a user