Gantt chart

Interactive Gantt chart

A demonstration of TreeGrid application showing interactive Gantt chart - timetable of tasks and their completion.

Here are also other examples with Gantt chart: Simple Gantt chart, Gantt chart with 3000 rows.

The Start and Date columns contain planned task duration, Complete column contains how much is already done, the task completion is shown by red/green colors.
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 Resources column contains resources assigned to the task, these resources can be also shown in the Gantt chart.
The Dependencies column contains all outcoming dependency lines (identified by row ids). The Dependency Types column contain connection types for every dependency (s: start, f: finish): ss, sf, fs, ss. Default is 'fs'.
The Flags column contains all flags and their descriptions are in Flag Info column.
The columns Resources, Dependencies, Depend. Types, Flags and Flag Info 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 grid can be plain (showing only tasks) or can be grouped by tasks or other values. In the example there are 10 predefined Gantt chart zoom levels with standard two line header and two custom levels with four lines header. This can example can show all or selected resources only.
All settings like zoom types (from minutes to years), header lines units and count, unit types, rounding, resource and other filters and so on can be fully customized.

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