SVGGraph Gantt Charts, continued

« Return to SVGGraph page

Skip to:

• Dependency lines
• Dependency types
• Dependency line styles
• Today line
• Time units
• Text classes
• Structured data fields
• Gantt chart options
• Invisible tasks

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:

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)

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)

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)

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)

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:

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:

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.

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.

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.

• gantt_depends_colour
• gantt_depends_dash
• gantt_depends_head_size
• gantt_depends_opacity
• gantt_depends_stroke_width
• gantt_group_colour
• gantt_group_colour_complete
• gantt_group_corner_height
• gantt_group_corner_width
• gantt_milestone_colour
• gantt_milestone_size
• gantt_milestone_type
• gantt_shade_days
• gantt_shade_days_colour
• gantt_shade_days_opacity
• gantt_today
• gantt_today_colour
• gantt_today_dash
• gantt_today_date
• gantt_today_opacity
• gantt_today_width
• gantt_tooltip_complete
• gantt_tooltip_duration
• gantt_units

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:

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 »

Copyright © 2022, Goat 1000