SVGGraph Gantt Charts, continued
The previous page covered tasks, milestones and groups, this page explains dependency lines and some other optional parts of the Gantt charts.
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
to the structure, the options also set the
bar_space to 20 pixels to allow
more room for the arrows between the task bars.
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.
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
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
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
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
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
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
options to change the colour and thickness of all the lines, and set the
depends_head_size structure values to
give some of the tasks a different colour, dash pattern, and arrow head size.
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.
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
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
gantt_units option to either
"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
include the time.
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
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
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.
|key*||Item key field.|
|value*||Task start date/time or milestone date/time.|
|end*||Task end date/time.|
|milestone||When true, item is a milestone.|
|group||Starts a new group or sub-group.|
|axis_text||When supplied, used instead of key value.|
|colour||Colour of task/group bar or milestone.|
|colour_complete||Colour of complete percentage gauge in task/group bar.|
|size||Size of milestone marker.|
|type||Type of milestone marker.|
|corner_width||Width of group bar bottom corner.|
|corner_height||Height of group bar bottom corner.|
|depends_stroke_width||Thickness of dependency lines.|
|depends_colour||Colour of dependency lines.|
|depends_dash||Dash pattern for dependency lines.|
|depends_opacity||Opacity of dependency lines.|
|depends_head_size||Size 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:
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.