SVGGraph Gantt Charts, continued

« Return to SVGGraph page

Skip to:

The previous page covered tasks, milestones and groups, this page explains dependency lines and some other optional parts of the Gantt charts.

Dependency lines

These are lines drawn between tasks, groups and milestones to indicate dependencies between them. Here is an example:

28 Mar04 Apr11 Apr18 Apr25 Apr02 May09 May16 May2022A simple taskSecond taskThird taskFinal task
Gantt chart with dependencies

In this example, the start of “Second task” depends on the start of “A simple task”, the start of “Third task” depends on the end of “Second task” and the end of “Final task” depends on the end of “Third task”.

Here are the options and data used for this graph:

$options = [
  'structure' => [
    'key' => 0, 'value' => 1, 'end' => 2,
    'depends' => 'depends',
    'depends_type' => 'dtype',
  ],
  'bar_space' => 20,
];

$values = [
  ['A simple task', '2022-04-01', '2022-04-13'],
  ['Second task', '2022-04-05', '2022-04-20', 'depends' => 'A simple task', 'dtype' => 'SS'],
  ['Third task', '2022-05-02', '2022-05-17', 'depends' => 'Second task'],
  ['Final task', '2022-05-16', '2022-05-20', 'depends' => 'Third task', 'dtype' => 'FF' ],
];

Apart from adding the depends and depends_type values to the structure, the options also set the bar_space to 20 pixels to allow more room for the arrows between the task bars.

The depends structure field is used to specify which of the previous entries the current item depends on. The data value should be the key field value of the relevant item, or an array containing multiple keys to depend on more than one item.

The depends_type field specifies the type of dependency. By default the start of the current item depends on the end of the referenced item, but this option can be used to set one of the four types explained below. The data value for the dependency type can also be an array when one is used for the depends value.

Dependency types

There are four types of dependency available, which determine where the arrows start and end.

Finish to start (FS)

Mon 11Tue 12Wed 13Thu 14Fri 15Sat 16Sun 17Mon 18Tue 19Wed 20Thu 21Fri 22Apr 2022Task 1Task 2
Gantt chart, FS dependency

This is the default type of dependency, where the previous task must finish before the new task can begin. To specify this type explicitly, use "FS" as the type string.

Finish to finish (FF)

Mon 11Tue 12Wed 13Thu 14Fri 15Sat 16Sun 17Mon 18Tue 19Wed 20Thu 21Fri 22Apr 2022Task 1Task 2
Gantt chart, FF dependency

This type of dependency is where the current task cannot complete until the previous task has finished. To specify this type, use "FF" as the type string.

Start to start (SS)

Mon 11Tue 12Wed 13Thu 14Fri 15Sat 16Sun 17Mon 18Tue 19Wed 20Thu 21Fri 22Apr 2022Task 1Task 2
Gantt chart, SS dependency

This type of dependency is where the current task cannot start until the previous has started. To specify this type, use "SS" as the type string.

Start to finish (SF)

Mon 11Tue 12Wed 13Thu 14Fri 15Sat 16Sun 17Mon 18Tue 19Wed 20Thu 21Fri 22Apr 2022Task 1Task 2
Gantt chart, SF dependency

This type of dependency is where the current task cannot complete until the previous task has started. To specify this type, use "SF" as the type string.

Dependency line styles

The default dependency lines are 1-pixel black lines with quite small arrow heads. There are several options for changing how they look, as demonstrated by this example:

28 Mar04 Apr11 Apr18 Apr25 Apr02 May09 May16 May2022A simple taskSecond taskThird taskFinal task
Gantt chart dependency line styles

These are the options and data values used for this graph:

$options = [
  'auto_fit' => true,
  'structure' => [
    'key' => 0, 'value' => 1, 'end' => 2,
    'depends' => 'depends',
    'depends_type' => 'dtype',
    'depends_colour' => 'dcolour',
    'depends_dash' => 'ddash',
    'depends_head_size' => 'dhead',
  ],
  'bar_space' => 30,
  'gantt_depends_stroke_width' => 2,
  'gantt_depends_colour' => 'fillColour/saturation(50%)',
];

$values = [
  ['A simple task', '2022-04-01', '2022-04-13'],
  ['Second task', '2022-04-05', '2022-04-20',
    'depends' => 'A simple task', 'dtype' => 'SS', 'dhead' => 5,
  ],
  ['Third task', '2022-05-02', '2022-05-17',
    'depends' => 'Second task', 'ddash' => 3,
  ],
  ['Final task', '2022-05-16', '2022-05-20',
    'depends' => ['Third task','A simple task'], 'dtype' => ['FF','FS'],
    'dcolour' => 'blue',
  ],
];

I've used the gantt_depends_stroke_width and gantt_depends_colour options to change the colour and thickness of all the lines, and set the depends_colour, depends_dash and depends_head_size structure values to give some of the tasks a different colour, dash pattern, and arrow head size.

Today line

By default, the Gantt chart will display a dashed, red vertical line on the chart corresponding with the current day. I've turned it off for most of the example charts on these pages since it will not be visible after the current day drops off the end of the scale, but here is an example with the line showing:

28 Mar04 Apr11 Apr18 Apr25 Apr02 May09 May16 May2022A simple taskSecond taskThird taskFinal task
Gantt chart with today line

For this chart I've used the gantt_today_date option to fix the position of the line on the 28th of April. I've also made it wider and bright green. There are several options for configuring how the line looks, listed in the options section of this page.

Time units

By default the Gantt chart uses days as the minimum units of time. The start and end times from the data are adjusted to the start and end of the day - what this means on the graph is that a task with a start of "2022-06-01" and an end of "2022-06-01" is one day long instead of ending at the same time as it starts.

If you want your tasks to start and end at specific times of day you can set the gantt_units option to either "hour" or "minute" to use units of those sizes instead of days.

06:0012:0018:0000:0006:0012:0018:0000:0006:0012:00Mon 02 May 2022Tue 03 May 2022Wed 04 May 2022A simple taskSecond taskThird taskFinal task
Gantt chart with units in minutes

This chart uses minutes for its units, with its start and end values set to full date/time strings. The options and values are shown below:

$options = [
  'auto_fit' => true,
  'structure' => [
    'key' => 0, 'value' => 1, 'end' => 2,
  ],
  'gantt_units' => 'minute',
  'tooltip_datetime_format' => 'd M H:i',
];

$values = [
  ['A simple task', '2022-05-02T08:00:00', '2022-05-04T16:30:00'],
  ['Second task', '2022-05-03T12:30:00', '2022-05-03T17:00:00'],
  ['Third task', '2022-05-02T09:00:00', '2022-05-02T12:00:00'],
  ['Final task', '2022-05-04T11:00:00', '2022-05-04T13:20:00'],
];

For this example I have also changed the tooltip_datetime_format to include the time.

Text classes

You may have noticed that the text to the left of the charts with groups has different styling depending on the type of entry and its grouping level. The options for this come from a file called "text_classes.ini", which contains a section for each entry type and at various levels.

Here is a short section of the file:

[gantt_group:1]
font = 'Arial Black'
font_size = 14

[gantt_group:2]
font = 'Arial Black'
indent = 10

To change the styling used for the axis text you can either edit the "text_classes.ini" file, or use the text_classes_file option to use your own file instead.

Structured data fields

Gantt charts use several structured data fields for the different types of data, plus there are some other fields available for configuring how each individual item looks.

FieldUsed for
key*Item key field.
value*Task start date/time or milestone date/time.
end*Task end date/time.
milestoneWhen true, item is a milestone.
groupStarts a new group or sub-group.
axis_textWhen supplied, used instead of key value.
colourColour of task/group bar or milestone.
colour_completeColour of complete percentage gauge in task/group bar.
sizeSize of milestone marker.
typeType of milestone marker.
corner_widthWidth of group bar bottom corner.
corner_heightHeight of group bar bottom corner.
depends_stroke_widthThickness of dependency lines.
depends_colourColour of dependency lines.
depends_dashDash pattern for dependency lines.
depends_opacityOpacity of dependency lines.
depends_head_sizeSize of arrow head on dependency lines.

Fields required in the structure option are marked with an asterisk, though the end value is only required to be present in the data array for task bars..

Gantt chart options

When it comes to options a Gantt chart is based on a bar chart, so it supports the usual bar width, spacing and other options. It also has these specific options - follow the links for details.

Where's my task?

And finally, here's a chart showing what happens when you set the date axis minimum and maximum options to values that don't include all your data:

25262728293001020304050607080910111213141516Apr 2022May 2022Project groupA simple taskTestingSecond taskTestingLater partThird taskFinal taskTestingConcurrent projectHush-hush stuffTell no-one
Gantt chart with tasks off the sides

When the task or milestone is not visible on the chart, SVGGraph adds a triangle marker at the left or right pointing towards where it is. In the example, the “Project group” tasks are all earlier, and the “Later part” testing task is after the 16th of May. The end of the “Concurrent project” is also earlier than the 25th of April start date of the chart axis.

« Back to top of page Other graphs »

This site uses cookies - details here.