Links as the visualization of dependencies in an HTML5 Gantt - VSW tip

Posted by Juergen Theis on Feb 3, 2021 2:00:00 PM

Activities in the Visual Scheduling Widget are used to represent things like jobs, tasks, operations, etc. of the real world to a Gantt chart. All of these activities can have dependencies between each other, in the way that one activity cannot start until another activity is finished. In the following you will learn how to visualize these relations between activities in the Visual Scheduling Widget.

Relations defined by link objects

The relations between activities can be defined by link objects. Each such object is represented by an arrow in the Gantt chart:

link objects in the Visual Scheduling Widget

This way, the links visualize the timing sequence during the processing of a bundle of activities.

Link objects can be handled by the methods addLinks, updateLinks, and removeLinks – analogously to all other objects of the widget. Please note, that they can reference activities only. This can be done by using the properties SourceActivityID and TargetActivityID.


By default, the display of the links in the Activities View is turned on. But you can disable it by setting the widget option pm_linksVisibleInActivitiesView to false.

Do you know the difference between the Activities View and the Resources View? Read this blog post for more information


Different link visualization

The appearance of a link can be altered by the link properties PM_Color, PM_Width, and PM_DashArray. In the following figure, these properties are applied to some of the links:

Different link visualization in an HTML5 Gantt chart

Of course, all properties can be applied in a combined manner.


Different relation types

Besides the default relation type finish-start, a link can also represent two further types (start-start and finish-finish) by setting the link property RelationType:

Links in an HTML5 Gantt chart with start-start, finish-start, finish-start relation


Links between activities in the Resources View

Even though only an activity can be referenced as a source or target of a link, it is nevertheless possible to show links in the Resources View (here is a video about Activities vs Resources View).

To turn on the display of the links the widget property pm_linksVisibleInResourcesView must be set to true. Then all activity links are projected to links between allocations. That is, links are displayed between all allocations whose referenced activities are linked.

The following example makes that clear. Here we have two activities to be done: a sawing operation and after that a drilling operation. The relation between both activities is represented in the Activities View by a link:

Activities View of the Visual Scheduling Widget with linksSample Activities View

Now suppose we need for the sawing operation more than one resource. To fulfil the job an operator is required in addition to a sawing machine. And due to individual working times, two employees have been allocated for this job: Emily works the first half of the week and John the second one. The resulting Resources View of this situation looks like this: We have three allocations for the sawing operation and one allocation for the drilling. As both activities are related to each, this activity link is projected to three links between the allocations that refer to these activities:

Resources View of the Visual Scheduling Widget with linksSample Resources View


Curved or orthogonal line - choose your routing type

Last but not least an interesting link property is the PM_RoutingType. By default, the links are routed with curved lines. In most cases, this kind of routing makes it easier for the user to follow links with his eyes. But the Visual Scheduling Widget also offers the option to route the links with orthogonal lines. The following two comparing figures show the difference. In the first figure, the default value is applied; all links have set the routing type to curved:

Visual Scheduling Widget for HTML5 Gantt charts with curved link lines

If you set the routing type to orthogonal, then it looks like this:

Visual Scheduling Widget for HTML5 Gantt charts with orthogonal link lines


Here is a 7 min video that describes the visualization of links in more detail


Next steps

Now you learned about different ways to visualize links with the Visual Scheduling Widget, check out other powerful features.

And if you want to develop your own HTML5 Gantt charts within 6 minutes, watch our video "Hello Gantt World" and download a free trial version now.

Do you want to evaluate the VSW?  Book a first short introduction meeting, so we can check together if product & price are suitable for you.

Topics: Gantt Best Practice, HTML5 Gantt Charts, Gantt Chart Controls