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