Click here to Skip to main content
Click here to Skip to main content
Go to top

SIcon Gantt Chart

, 11 Jun 2008
Rate this:
Please Sign up or sign in to vote.
A fast and innovative Gantt chart using JScript.

Introduction

I am developing a web based application which allows the management of tasks and events of projects. A Gantt chart is needed for displaying a task list visually, and I tried to find a freely available solution (because I didn't want the budget to increase). I found some, but not really good ones. So, I decided to build one on my own. This is the first result of my work. This first version of SIcon was built in just a few hours, so I think it still has some problems. However, I want to share with you the idea. Hope this helps.

SIcon now supports FireFox!

Background

Some knowledge about JScript and CSS is enough for understanding and using this.

Using the code

The code is not really complex, so I will show all of it here:

/* --------- SICON GANTT CHART ---------------------------------------------------------
* AUTHOR        : Dathq - ICT Service Engineering Jsc, - dathq@ise.com.vn
* LICENSE        : Free
* DESCRIPTION    : Create a new task item with these info
*        - from: start date (format: mm/dd/dddd)
*        - to: deadline of task (format: mm/dd/dddd)
*        - task: name of the task, what has to be solved (not includes ')
*        - resource: who have to solve this task (not includes ')
*        - progress: how is it going? (format: integer value from 0 to 100,
*                    not includes %)
*--------------------------------------------------------------------------------------*/
function Task(from, to, task, resource, progress)
{
    var _from = new Date();    
    var _to = new Date();
    var _task = task;
    var _resource = resource;                        
    var _progress = progress;
    var dvArr = from.split('/');
    _from.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1,
        parseInt(dvArr[1], 10));
    dvArr = to.split('/'); 
    _to.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1,
        parseInt(dvArr[1], 10));        

    this.getFrom = function(){ return _from};
    this.getTo = function(){ return _to};
    this.getTask = function(){ return _task};
    this.getResource = function(){ return _resource};
    this.getProgress = function(){ return _progress};
}

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 = "<table border=1 style='border-collapse:collapse'><tr>
           <td rowspan='2' width='200px' style='width:200px;'>
           <div class='GTaskTitle' style='width:200px;'>Task</div></td>";
        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()))
                    //The fifth day of next month will be used
                    _maxDate.setFullYear(_maxDate.getFullYear() + 1, 1, 5);       
            else
                    //The fifth day of next month will be used
                    _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(),
                        _maxDate.getDate() + 5);            }
            else
            {
                if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1,
                    _maxDate.getFullYear()))
                    //The fifth day of next month will be used
                    _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth() + 1,
                        5);
                else
                    //The fifth day of next month will be used
                    _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(),
                        _maxDate.getDate() + 5);
            }

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

            _gStr = "";
            _gStr += "</tr><tr>";
            _thirdRow = "<tr><td> </td>";
            _dTemp.setFullYear(_minDate.getFullYear(), _minDate.getMonth(),
                _minDate.getDate());
            while(Date.parse(_dTemp) <= Date.parse(_maxDate))
            {    
                if(_dTemp.getDay() % 6 == 0) //Weekend
                {
                    _gStr += "<td class='GWeekend'><div style='width:24px;'>" +
                        _dTemp.getDate() + "</div></td>";
                    if(Date.parse(_dTemp) == Date.parse(_currentDate))                   
                        _thirdRow += "<td id='GC_" + (counter++) + 
                        "' class='GToDay' style='height:" +
                        (_taskList.length * 21) + "'> </td>";
                    else
                        _thirdRow += "<td id='GC_" + (counter++) +
                        "' class='GWeekend' style='height:" + (_taskList.length * 21) +
                        "'> </td>";
                }
                else
                {
                    _gStr += "<td class='GDay'><div style='width:24px;'>" +
                        _dTemp.getDate() + "</div></td>";
                    if(Date.parse(_dTemp) == Date.parse(_currentDate))                   
                        _thirdRow += "<td id='GC_" + (counter++) +
                        "' class='GToDay' style='height:" + (_taskList.length * 21) +
                        "'> </td>";
                    else
                        _thirdRow += "<td id='GC_" + (counter++) + 
                       "' class='GDay'> </td>";
                }
                if(_dTemp.getDate() < getDaysInMonth(_dTemp.getMonth() + 1,
                    _dTemp.getFullYear()))
                {
                    if(Date.parse(_dTemp) == Date.parse(_maxDate))
                    {                            
                        _firstRowStr += "<td class='GMonth' colspan='" + 
                       (_colSpan + 1) + "'>T" + (_dTemp.getMonth() + 1) + "/" + 
                       _dTemp.getFullYear() + "</td>"; 
                    }
                    _dTemp.setDate(_dTemp.getDate() + 1);
                    _colSpan++;
                }                    
                else 
                {
                    _firstRowStr += "<td class='GMonth' colspan='" +
                        (_colSpan + 1) + "'>T" + (_dTemp.getMonth() + 1) +
                        "/" + _dTemp.getFullYear() + "</td>";
                    _colSpan = 0;
                    if(_dTemp.getMonth() == 11) //December
                    {
                        _dTemp.setFullYear(_dTemp.getFullYear() + 1, 0, 1);
                    }
                    else
                    {
                        _dTemp.setFullYear(_dTemp.getFullYear(),
                            _dTemp.getMonth() + 1, 1);
                    }
                }                    
            }
            _thirdRow += "</tr>";                 
            _gStr += "</tr>" + _thirdRow;                
            _gStr += "</table>";
            _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 += "<div style='position:absolute; top:" + (20 * (i + 2)) + 
                "; left:" + (_offSet * 27 + 204) + "; width:" + 
                (27 * _dateDiff - 1 + 100) + "'><div title='" + 
                _taskList[i].getTask() + "' class='GTask' style='float:left; width:" +
                (27 * _dateDiff - 1) + "px;'>" +
                getProgressDiv(_taskList[i].getProgress()) +
                "</div><div style='float:left; padding-left:3'>" + 
                _taskList[i].getResource() + "</div></div>";
                _gStr += "<div style='position:absolute; top:" +
                    (20 * (i + 2) + 1) + "; left:5px'>" + _taskList[i].getTask() +
                    "</div>";
            }
            _GanttDiv.innerHTML = _gStr;
        }
    }
}        

function getProgressDiv(progress)
{
    return "<div class='GProgress' style='width:" + progress +
       "%; overflow:hidden'></div>"
}
// 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);
}                
/*----- END OF MY CODE FOR Gantt CHART GENERATOR -----*/

How to Use this Script

In the body of your HTML, ASCX, ASPX, or PHP document... put these lines where you want to display the Gantt chart.

<body>    
    <h3>Diagram</h3>    
    <div style="position:relative" class="Gantt" id="GanttChart"></div>
</body>
<script>
    var g = new Gantt(document.all.GanttChart);
    g.AddTaskDetail(new Task('2/11/2008', '2/12/2008', 
                    '<b>Sample task 1 1</b>', 'Dathq', 50));
    g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', 
                    '... Sample task 1.1', 'Dathq, Thanhdd', 30));
    g.AddTaskDetail(new Task('2/12/2008', '3/4/2008', 'Sample task 2', 'Hanhnd', 60));
    g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));
    
    g.Draw();    
</script>

Use the var g = new Gantt(document.all.GanttChart); statement for rendering your Gantt chart to the div element named "GanttChart" (you can see it in the body).

The g.AddTaskDetail() method adds a task to the task list. You can use AJAX or anything you like to generate these commands for adding the set of tasks.

Use g.Draw() for rendering the Gantt chart based on the task list which was added to the Gantt chart object.

How can I change the look of this component

Here, I have defined some classes for customizing the Gantt chart, with full source code provided. You can define more classes and also can change the face of the Gantt chart very easily.

By changing the style sheets, and adding some attributes for the task object in my code, you can make yourself a smart Gantt chart. For example: a different color for the task bar, a nice background image, a better tooltip for the chart,..

/*----- 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;
}

Diagram

var g = new Gantt(document.all.GanttChart);
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', '... Sample task 1.1', 
    'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', '... Sample task 1.1',
    'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', '... Sample task 1.1',
    'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));

g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', '... Sample task 1.1',
     'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('5/11/2008', '5/16/2008', 'Sample task 3', 'Dathq', 50));

g.Draw();

Points of Interest

The first point you will notice about the chart is that it runs very fast.

SIcon Gantt chart is built with JavaScript, which means you can use it in most cases of web development. With me, I like ASP.NET, and of course I can use this component with ASP.NET. Additionally, you can use it with AJAX for cooler applications. You can customize the CSS classes as you like, and get a "good looking" Gantt chart. I will try to add a link to the tasks for describing their relations and also a parent task displayed, as we can see in MS Project.

The Gantt chart is displayed withs HTML giving it a light weight structure, so you can add more features to the chart. For example, tooltip, link, image... with some basic changes within the Jscript code.

And the last one, it is total free.

Happy coding! Smile | :)

History

  • 27 Feb 2008: First version of SIcon Gantt chart.
  • 07 Jun 2008: Fixed display error with Firefox.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Share

About the Author

dathq
Web Developer ICT Service Engineering
Vietnam Vietnam
A developer come from Vietnam

Comments and Discussions

 
QuestionGantt Chart Pinmembermargis5-Nov-13 12:52 
QuestionFreeze Task Name (Column) PinmemberMohammad Salman Sagar27-May-13 2:35 
AnswerRe: Freeze Task Name (Column) Pinmemberdathq5-Jun-13 17:06 
GeneralRe: Freeze Task Name (Column) PinmemberMohammad Salman Sagar10-Jun-13 20:41 
GeneralMy vote of 5 PinmemberRK_Columbus14-Oct-10 7:30 
JokeThe program seems to ignore many essential features of Gantt Pinmemberxiajingfeng23-Nov-08 19:59 
GeneralRe: The program seems to ignore many essential features of Gantt Pinmemberdathq3-Dec-08 14:31 
GeneralRe: The program seems to ignore many essential features of Gantt Pinmemberdefineconst24-Jun-09 22:58 
GeneralMore than one bar per task Pinmembersanjshah6-Oct-08 11:51 
GeneralRe: More than one bar per task Pinmemberilikebread16-Dec-08 18:48 
GeneralRe: More than one bar per task Pinmembersanjshah17-Dec-08 12:49 
GeneralRe: More than one bar per task Pinmemberilikebread17-Dec-08 17:40 
GeneralRe: More than one bar per task Pinmembersanjshah19-Dec-08 6:14 
GeneralTasks size Pinmemberneirasoft8-Aug-08 6:15 
 <script>
	/* --------- SICON GANTT CHART -----------------------------------------------------------
	 * AUTHOR		: Dathq - ICT Service Engineering Jsc, - dathq@ise.com.vn
	 * LICENSE		: Free
	 * DESCRIPTION	: Create a new task item with these info
	 *		- from: start date (format: mm/dd/dddd)
	 *		- to: deadline of task (format: mm/dd/dddd)
	 *		- task: name of the task, what has to be solved (not includes ')
	 *		- resource: who have to solve this task (not includes ')
	 *		- progress: how is it going? (format: integer value from 0 to 100, not includes %)
	 *----------------------------------------------------------------------------------------*/
	function Task(from, to, task, resource, progress)
	{
		var _from = new Date();	
		var _to = new Date();
		var _task = task;
		var _resource = resource;						
		var _progress = progress;
		var dvArr = from.split('/');
		_from.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10));
		dvArr = to.split('/'); 
		_to.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10));		
		
		this.getFrom = function(){ return _from};
		this.getTo = function(){ return _to};
		this.getTask = function(){ return _task};
		this.getResource = function(){ return _resource};
		this.getProgress = function(){ return _progress};
		this.getTaskNameSize= function() {return _task.length*7;}
	}
	
	function Gantt(gDiv)
	{
		var _GanttDiv = gDiv;
		var _taskList = new Array();		
		var max_task_length=0;
		this.AddTaskDetail = function(value)
		{
			if (value.getTaskNameSize()>max_task_length)
				max_task_length=value.getTaskNameSize();
			
			_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 = "<table border=1 style='border-collapse:collapse'><tr><td rowspan='2' width='200px' style='width:200px;'><div class='GTaskTitle' style='width:" + max_task_length + "px;'>Task</div></td>";
			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 += "</tr><tr>";
				_thirdRow = "<tr><td>&nbsp;</td>";
				_dTemp.setFullYear(_minDate.getFullYear(), _minDate.getMonth(), _minDate.getDate());
				while(Date.parse(_dTemp) <= Date.parse(_maxDate))
				{	
					if(_dTemp.getDay() % 6 == 0) //Weekend
					{
						_gStr += "<td class='GWeekend'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>";
						if(Date.parse(_dTemp) == Date.parse(_currentDate))						
							_thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'>&nbsp;</td>";
						else
							_thirdRow += "<td id='GC_" + (counter++) + "' class='GWeekend' style='height:" + (_taskList.length * 21) + "'>&nbsp;</td>";
					}
					else
					{
						_gStr += "<td class='GDay'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>";
						if(Date.parse(_dTemp) == Date.parse(_currentDate))						
							_thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'>&nbsp;</td>";
						else
							_thirdRow += "<td id='GC_" + (counter++) + "' class='GDay'>&nbsp;</td>";
					}
					if(_dTemp.getDate() < getDaysInMonth(_dTemp.getMonth() + 1, _dTemp.getFullYear()))
					{
						if(Date.parse(_dTemp) == Date.parse(_maxDate))
						{							
							_firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>" + (getMonthName(_dTemp.getMonth())) + "/" + _dTemp.getFullYear() + "</td>";							
						}
						_dTemp.setDate(_dTemp.getDate() + 1);
						_colSpan++;
					}					
					else 
					{
						_firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>" + (getMonthName(_dTemp.getMonth())) + "/" + _dTemp.getFullYear() + "</td>";
						_colSpan = 0;
						if(_dTemp.getMonth() == 11) //December
						{
							_dTemp.setFullYear(_dTemp.getFullYear() + 1, 0, 1);
						}
						else
						{
							_dTemp.setFullYear(_dTemp.getFullYear(), _dTemp.getMonth() + 1, 1);
						}
					}					
				}
				_thirdRow += "</tr>"; 				
				_gStr += "</tr>" + _thirdRow;				
				_gStr += "</table>";
				_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 += "<div style='position:absolute; top:" + (20 * (i + 2)) + "; left:" + (_offSet * 27 + max_task_length) + "; width:" + (27 * _dateDiff - 1 + 100) + "'><div title='" + _taskList[i].getTask() + "' class='GTask' style='float:left; width:" + (27 * _dateDiff - 1) + "px;'>" + getProgressDiv(_taskList[i].getProgress()) + "</div><div style='float:left; padding-left:3'>" + _taskList[i].getResource() + "</div></div>";
					_gStr += "<div style='position:absolute; top:" + (20 * (i + 2) + 1) + "; left:5px'>" + _taskList[i].getTask() +"</div>";
				}
				_GanttDiv.innerHTML = _gStr;
			}
		}
	}		
	
	function getProgressDiv(progress)
	{
		return "<div class='GProgress' style='width:" + progress + "%; overflow:hidden'></div>"
	}
		
	function getMonthName(month) {
		var mname;		
		switch(month)
		{
			case 0: mname='Janeiro'; 
					break;
			case 1: mname='Fevereiro'; 
					break;
			case 2: mname='Março'; 
					break;
			case 3: mname='Abril'; 
					break;
			case 4: mname='Maio'; 
					break;
			case 5: mname='Junho'; 
					break;
			case 6: mname='Julho'; 
					break;
			case 7: mname='Agosto'; 
					break;		
			case 8: mname='Setembro'; 
					break;
			case 9: mname='Outubro'; 
					break;
			case 10: mname='Novembro'; 
					break;
			case 11: mname='Dezembro'; 
					break;								
		}
		return (mname);	
	}
	
	// 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);
	}				
	/*----- END OF MY CODE FOR Gantt CHART GENERATOR -----*/
</script>
 
I changed your code to handle the task name sizes and customized month names (in my case i'm portuguese so they are in that language (function getMonthName(month)).
 
With your code if a task has a long name then it overlaps the gantt task bars.
 
With my code i compute the biggest task name size by testing the sizes in the insertion of tasks in the array _taskList. With that value i generate the correct size for the task name label in the table.
 
The function to get month names is simple and easy to adapt to any language needed.
 
The UPDATES to the code are in bold.
GeneralRe: Tasks size Pinmemberneirasoft8-Aug-08 6:31 
General"document.all has no properties" Pinmembercl2kliss6-Aug-08 2:46 
GeneralRe: "document.all has no properties" Pinmembercl2kliss6-Aug-08 4:29 
QuestionUsing this with ASP.net Pinmemberpimentinho22-Jul-08 17:25 
Questiongantt is undefined [modified] Pinmemberkarthikmp15-Jul-08 3:08 
GeneralAdjust Day Widths PinmemberSethran1-Jul-08 9:24 
QuestionRe: Adjust Day Widths PinmemberMember 28934778-Jul-08 0:56 
Generalupdateable AJAX gantt chart PinmemberSUN RULEZ!!!13-Jun-08 7:33 
GeneralRe: updateable AJAX gantt chart Pinmemberdathq13-Jun-08 15:45 
GeneralRe: updateable AJAX gantt chart PinmemberJonathan C Dickinson17-Jun-08 20:24 
GeneralRe: updateable AJAX gantt chart Pinmemberdathq19-Jun-08 15:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 11 Jun 2008
Article Copyright 2008 by dathq
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid