How to Create a DHTML Gantt Chart Control

There are many options out there that allow us to graphically visualize various types of data. Flash based charts, which generally deliver the best interactive experience, are difficult to integrate, debug and maintain since flash is a highly proprietary technology. Then there are clunky client based Java applets and Active X, which for the most part have dissappeared in the age of web 2.0. Finally, we have used various server side components that generate beautiful images that are returned to client’s browser. They are lightweight and look good, but offer little in terms of interactivity. This has led us to try a different approach, why not try to build charts with CSS, Javascript, and XHTML? We took a few days to cook up this little proof of concept that should pave the way for us to offer this technology in many of our solutions. Plus, we have links to a demo and downloadable source code package for you to check it out for your self. We’d love to hear any feedback or ideas! Stay tuned for part 2 which may include a .NET server control to encapsulate this control.

The DHTML Gantt Chart control allows you to use JavaScript to create interactive Gantt Charts. Since it is written entirely in JavaScript it does not require Flash, Java, or any other plug-in. The code to create and initialize the chart can easily be generated by a server-side script making it very simple to dynamically generate charts. Since the tasks are created in JavaScript the chart can be built at run-time from user input.

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?

Option Description
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.

Method/Property Description
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:

Method/Property Description
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. 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?

File Description
date.js Adds the format() method to JavaScript’s Date object. Used in formatting titles in the chart’s grid and for formatting the tooltip’s caption.
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.
wz_jsgraphics.js Walter Zorn’s JavaScript Vector Graphics Library (link). This is used to draw the lines that connect bars on the chart with their prerequisites.
gantt.css This file is not required, but the CSS classes it contains must be defined for the Gantt Chart to display properly.
task-bar.png and
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.

« Prev Article
Next Article »