Click here to download all of the files you will need to include DHTML Gantt Charts on your web site.
What does the chart control do?
The Gantt Chart control takes a list of tasks and organizes them in a graphical display. Each task has a duration (in days) and a list of prerequisite tasks. From this information, the chart control schedules each task and displays a graphical representation of the project’s timeline. The scheduling process knows to skip weekends. No task will begin on a weekend and weekend days will not count towards the completion of a task.
For example, let’s come up with some theorhetical tasks and durations that one would use to cook up a demo such as this one:
- Design Gantt chart control (2 days).
- Code the control (3 days).
- Document how the control is used (2 days).
- Clean up code, fix problems & browser compatibility issues (1 day).
- Describe the control and its purpose (1 day).
- Format the blog post (1 day).
- Design must be done before coding.
- Design must be done before describing the control’s purpose.
- Writing the code must be done before cleaning up the code.
- Writing the code must be done before documenting the control.
- Describing the control and documenting its features must be done before formatting the blog post.
- Work will begin on May 15, 2008.
gt;The chart displays the given information, but by scheduling the tasks it also displays the starting and ending date for each task. From this, the chart also knows the ending date of the entire project. While its not hard to figure these things out yourself for a small project, its easy to see how this control can save lots of time when planning larger projects.
More after the jump….
How do I create a Gantt Chart?
There are two things you need to create a chart: the task information and a place on the webpage for the chart. The first bit is just like the example above. You need to know what tasks there are, how long each one takes, what prerequisite relationships exist, and when the project will start. The control also needs a place on the webpage, so you need a reference to an HTML element on the page.
Here is an example of how to create the chart seen above.
The code is about as simple as the facts listed in the first example. One difference is that once all of the tasks are added you must call chart.schedule(). The schedule method figures out when each task can be done and renders the graphical content of the chart control.
The chart doesn’t know how many tasks you’re going to add and it doesn’t try to guess. It makes no sense to re-render the control each time a task is added. So, you have to tell the chart control that you’re done adding tasks.
What options does the chart control have?
|chart.width||Sets the width, in pixels, of the chart display area. The total width of the control is the width of the task list plus this width.|
|chart.show_tooltips||A boolean value that determines whether or not tooltips are shown when the user mouses over a task bar on the graph.|
|chart.allow_tooltip_copy||A boolean value that determines whether or not the contents of the tooltips can be copied by pressing Ctrl + C.|
The Gantt Chart Control also has publicly accessible methods and properties.
|chart.schedule()||Schedules each task and renders the graphical content of the chart.|
|chart.add_task(task)||Adds a task to the chart. This does not automatically call schedule() to refresh the chart.|
|chart.remove_task(task)||Removes the specified task from the chart. This does not automatically call schedule() to refresh the chart.|
|chart.start_date||This property stores the starting date of the project.|
|chart.end_date||This property stores the ending date of the project. The value of end_date is set when schedule() is called.|
The Gantt Task object has the following methods and properties:
|task(name, duration)||The constructor takes the task’s name and duration.|
|task.requires(t)||Appends task t to the task’s list of prerequisites.|
|task.name||The name of the task.|
|task.duration||The duration (in days) of the task.|
|task.actual_start_date||The date when work on the task will begin. This is set when schedule() is called.|
|task.actual_end_date||The date when work on the task will end. This is set when schedule() is called.|
|task.bar_div||The div that is the graphical representation of the task on the project timeline.|
What files are needed to use the Gantt Chart control?
|gantt.js||Contains all code for the GanttChart and GanttTask objects.|
|main.js||Includes helper functions used by gantt.js and tooltip.js.|
|tooltip.js||Library for drawing tooltips on the Gantt Chart. If this file is not included, the Gantt Charts will not show tooltips but all other functionality will remain.|
|gantt.css||This file is not required, but the CSS classes it contains must be defined for the Gantt Chart to display properly.|
|These are the default images (as defined in gantt.css) used for the bars on the Gantt Chart. Any images will do as long as the CSS is set correctly.|
Notes for Developers
The chart control contains many more publicly accessible members than those listed above. There are references to many of the HTML elements used and the structure of the elements is documented in gantt.js. This is done so event handlers can be added and other modifications can easily be made to extend the functionality of the chart control.
The Gantt chart control has been tested in IE6, Safari 3.1 (on Windows XP), Firefox 2.0, and Opera 9.5 Beta. There’s a minor display issue with tooltips in IE6, but other than that everything works.