Interactive Gantt chart
A demonstration of TreeGrid application showing interactive Gantt chart - timetable of tasks and their completion in project management.
The Start, End and Duration columns contain planned task position and length,
the Complete column contains how much is already done, the task completion is shown by red/green colors.
The Information column contains tooltip for the task.
The Calendar column contains custom calendar (excluded dates) for the row. The global calendar is defined in Holidays cell on top row.
The Real flow column contains real process of task completion. It can be discrete, contain more date ranges.
The first and last date in range are separated by tilde (~), ranges itself by semicolon (;).
The Real flow information column contains tooltip for the Real flow.
The Resources column contains resources assigned to the task, these resources can be also shown in the Gantt chart.
The Descendants and Ancestors columns contain all outcoming / incoming dependency lines (identified by row ids) and their types (ss/sf/fs/ff) and lags (+/-xxx).
The Flags column contains all flags and their descriptions are in Flag Info column.
The MinStart, MaxStart, MinEnd and MaxEnd columns contain date constraints definitions.
The constraints are used when correcting dependencies.
The Slack column contains information for critical path, how much the task can be moved to right to not affect the project end date. For 0 or negative the task is critical.
The columns Information, Real Flow, Real flow information, Resources, Flags, Flag Info, Min Start, Max Start, Min End and Max End are hidden by default and can be shown from columns menu displayed by toolbar clicking to icon.
The column count and types are not static and are used just for the example, none of the column is required, every column can be removed and any new custom column added.
The Gantt chart is automatically updated whenever some cell is edited, row is added, deleted or moved (dragged by mouse).
The Gantt chart can be smoothly zoomed and scrolled to date range selected by mouse dragging or clicked in Gantt header.
The zoom can be undone by right click to grid header.
The exact zoom level can be chosen from combo or it can be increased by left click to header and decreased by right click to header.
The grid can be plain (showing only tasks) or can be grouped by tasks or other values.
This can example can show all or selected resources only.
The Gantt chart can show or hide holidays (any defined excluded dates or date ranges).
All the setttings are saved to cookies and are used next visit.
The Gantt chart automatically checks and corrects dependencies between tasks. The incorrect dependencies are shown in red.
The dependencies can be manually corrected by click to the red text in bottom right or from Gantt popup menu.
Whenever a user moves or resizes task or changes dependency or its type or lag, the other dependent tasks are automatically moved to correct the dependencies.
The circular dependencies are checked.
The tasks are also moved when they violate baseline date or their date constraints. When user changes the baseline date, the tasks are also automatically moved.
All these actions can be done automatically, confirmed by a user or can be disabled.
Default colors in Gantt chart: Black is used for Gantt in automatically calculated grouped rows. White for not complete grouped rows.
Light green for compete tasks. Light red for not yet started tasks.
Dark green / dark red colors are used for tasks in progress and show the percentage of completion.
Yellow boxes display the real flow.
All the bar colors and other visual settings can be fully customized by css styles, every row can have its own colors set.
The Gantt chart is interactive, every setting can be also changed by mouse inside the Gantt chart. In this example only data (not grouping) rows can be changed.
New main (task) bar and flow bars are created by mouse dragging on empty Gantt space.
The flow bar is created when the main bar already exists.
New milestone is created by double click or from popup menu when neither milestone nor main bar exists.
New flag is created by double click anywhere except the main bar or milestone or from popup menu.
Main bar and flow bars are resized by dragging their edges.
Main bar, flow bars, milestone and flags are moved by mouse dragging.
Main bar and flow bars are deleted by resizing their width to zero or by ctrl + click or from popup menu.
Milestone and flags are deleted by ctrl + click or from popup menu.
Resources are changed by double click to main bar or milestone or from popup menu.
Flag info is changed by double click to the flag or from popup menu.
The percent completed is set by ctrl + right click to main bar or from popup menu.
New dependencies are created by dragging from starting to ending main bar.
Dragging left half of main bar creates 's' and right half 'f' dependency type.
Dependencies are deleted by ctrl + click to the ending or starting point next to main bar (the ending dependencies are deleted first)
or by deleting main bar or from popup menu.
Project baseline and finish date can be moved by mouse dragging and deleted by ctrl+click.
On the right click is displayed the popup menu with the mentioned options. The options set is dependent on what is clicked.
Every change can be undone by Ctrl+Z or redone by Ctrl+Y (the grid must be focused).
All the mouse controlling actions can be fully customized in XML settings, you can specify what mouse event will provide which action.
Also for every row can be specified what can be changed by a user (main task bar, milestone, flow bars, flags, dependencies, resources).