Creation of Gantt Chart using Java Script

Output:








function Gantt(gDiv)
{
var _GanttDiv = gDiv;
var _taskList = new Array();
this.AddTaskDetail = function(value)
{
_taskList.push(value);

}
this.Draw = function()
{
var _offSet = 0;
var _dateDiff = 0;
var _currentDate = new Date();
var _maxDate = new Date();
var _minDate = new Date();
var _dTemp = new Date();
var _firstRowStr = "
";
var _thirdRow = "";
var _gStr = "";
var _colSpan = 0;
var counter = 0;

_currentDate.setFullYear(_currentDate.getFullYear(), _currentDate.getMonth(),
_currentDate.getDate());
if(_taskList.length > 0)
{
_maxDate.setFullYear(_taskList[0].getTo().getFullYear(),
_taskList[0].getTo().
getMonth(), _taskList[0].getTo().getDate());
_minDate.setFullYear(_taskList[0].getFrom().getFullYear(),
_taskList[0].getFrom().
getMonth(), _taskList[0].getFrom().getDate());

for(i = 0; i < _taskList.length; i++)
{
if(Date.parse(_taskList[i].getFrom()) < Date.parse(_minDate))
_minDate.setFullYear(_taskList[i].getFrom().getFullYear(),
_taskList[i].getFrom().
getMonth(), _taskList[i].getFrom().getDate());
if(Date.parse(_taskList[i].getTo()) > Date.parse(_maxDate))
_maxDate.setFullYear(_taskList[i].getTo().getFullYear(),
_taskList[i].getTo().
getMonth(), _taskList[i].getTo().getDate());
}

//---- Fix _maxDate value for better displaying-----
// Add at least 5 days

if(_maxDate.getMonth() == 11) //December
{
if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1,
_maxDate.getFullYear()))
_maxDate.setFullYear(_maxDate.getFullYear() + 1, 1, 5);
//The fifth day of next month will be used
else
_maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(),
_maxDate.getDate() + 5); //The fifth day of next month will be used
}
else
{
if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1,
_maxDate.getFullYear()))
_maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth() + 1,
5); //The fifth day of next month will be used
else
_maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(),
_maxDate.getDate() + 5); //The fifth day of next month will be used
}

//--------------------------------------------------

_gStr = "";
_gStr += "";
_thirdRow = "";
_dTemp.setFullYear(_minDate.getFullYear(), _minDate.getMonth(),
_minDate.getDate());
while(Date.parse(_dTemp) <= Date.parse(_maxDate))
{
if(_dTemp.getDay() % 6 == 0) //Weekend
{
_gStr += "";
if(Date.parse(_dTemp) == Date.parse(_currentDate))
_thirdRow += "";
else
_thirdRow += "";
}
else
{
_gStr += "";
if(Date.parse(_dTemp) == Date.parse(_currentDate))
_thirdRow += "";
else
_thirdRow += "";
}
if(_dTemp.getDate() < getDaysInMonth(_dTemp.getMonth() + 1,
_dTemp.getFullYear()))
{
if(Date.parse(_dTemp) == Date.parse(_maxDate))
{
_firstRowStr += "";
}
_dTemp.setDate(_dTemp.getDate() + 1);
_colSpan++;
}
else
{
_firstRowStr += "";
_colSpan = 0;
if(_dTemp.getMonth() == 11) //December
{
_dTemp.setFullYear(_dTemp.getFullYear() + 1, 0, 1);
}
else
{
_dTemp.setFullYear(_dTemp.getFullYear(), _dTemp.getMonth() + 1, 1);
}
}
}
_thirdRow += "";
_gStr += "" + _thirdRow;
_gStr += "

style='width:200px;'>Task
	" + _dTemp.getDate() + "	style='height:" + (_taskList.length * 21) + "'>	style='height:" + (_taskList.length * 21) + "'>	" + _dTemp.getDate() + "			T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "	T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "

";
_gStr = _firstRowStr + _gStr;
for(i = 0; i < _taskList.length; i++)
{

_offSet = (Date.parse(_taskList[i].getFrom()) - Date.parse(_minDate))
/ (24 * 60 * 60 * 1000);
_dateDiff = (Date.parse(_taskList[i].getTo()) - Date.parse(_taskList
[i].getFrom())) / (24 * 60 * 60 * 1000) + 1;
_gStr += "

style='float:left; width:" + (27 * _dateDiff - 1) + "px;'>" +

getProgressDiv(_taskList[i].getProgress()) + "

style='float:left; padding-left:3'>" + _taskList[i].getResource()
+ "

";
_gStr += "

" + _taskList[i].getTask() + "

"; }

_GanttDiv.innerHTML = _gStr;
}
}
}
function getProgressDiv(progress)
{
return "

"
}
// GET NUMBER OF DAYS IN MONTH
function getDaysInMonth(month, year)
{

var days;
switch(month)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
days = 31;
break;
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
case 2:
if (((year% 4)==0) && ((year% 100)!=0) || ((year% 400)==0))
days = 29;
else
days = 28;
break;
}
return (days);
}










StyleSheet.css:



body {
}

/*----- SICON GANTT CHART STYLE CLASSES --------------------------
* DESCRIPTION : Theses class is required for SIcon Gantt Chart
* NOTE : Should change the color, the text style only
*----------------------------------------------------------------*/
.Gantt
{
font-family:tahoma, arial, verdana;
font-size:11px;
}

.GTaskTitle
{
font-family:tahoma, arial, verdana;
font-size:11px;
font-weight:bold;
}

.GMonth
{
padding-left:5px;
font-family:tahoma, arial, verdana;
font-size:11px;
font-weight:bold;
}

.GToday
{
background-color: #FDFDE0;
}

.GWeekend
{
font-family:tahoma, arial, verdana;
font-size:11px;
background-color:#F5F5F5;
text-align:center;
}

.GDay
{
font-family:tahoma, arial, verdana;
font-size:11px;
text-align:center;
}

.GTask
{
border-top:1px solid #CACACA;
border-bottom:1px solid #CACACA;
height:14px;
background-color:yellow;
}

.GProgress
{
background-color:black;
height:2px;
overflow: hidden;
margin-top:5px;
}

Dynamic Creation of Controls

Output:












Firstly add a panel control ,a textbox and a button to design page .when we enter a number in textbox at run time ,the same number controls are created at runtime.


Source Code:

protected void btninsert_Click(object sender, EventArgs e)
{
int count =Convert.ToInt32(TextBox1.Text);
Panel1.Controls.Clear();
Table tb = new Table();
tb.GridLines = GridLines.Both;
for (int i = 0; i < count; i++)
{

TableCell c1 = new TableCell();
TableRow rw = new TableRow();
TextBox tx = new TextBox();
c1.Controls.Add(tx);
rw.Cells.Add(c1);
tb.Rows.Add(rw);
}
Panel1.Controls.Add(tb);
}