---
title: Links as the visualization of dependencies in an HTML5 Gantt - VSW tip
description: This is a VSW tip about how to visualize dependencies of activities in an HTML5 Gantt chart by link objects, routing types and relation types.
---

[Production Scheduling Tips & Tricks for Microsoft Dynamics 365 Business Central ](https://blog.netronic.com)

# [Links as the visualization of dependencies in an HTML5 Gantt - VSW tip](https://blog.netronic.com/links-as-visualization-of-dependencies-in-html5-gantt-charts-vsw-tip)

 Written by [Juergen Theis](https://blog.netronic.com/author/juergen-theis) | Feb 3, 2021 1:00:00 PM

Activities in the [Visual Scheduling Widget](https://www.netronic.com/html5-gantt-chart-javascript-scheduler) 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:

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](https://blog.netronic.com/what-is-an-activities-and-a-resources-view-in-an-html5-gantt-chart)

 

## 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:

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 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).](https://youtu.be/yca8b5oC61M)

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:

Sample 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:

Sample 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:

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

 

### [Here is a 7 min video that describes the visualization of links in more detail](https://youtu.be/ljdsmwe5teU)

## Next steps

Now you learned about different ways to visualize links with the Visual Scheduling Widget, [check out other powerful features](https://blog.netronic.com/html5-javascript-gantt-charts-vsw-se-32-new-features).

And if you want to develop your own HTML5 Gantt charts within 6 minutes, watch our video ["Hello Gantt World"](https://youtu.be/fBZqllH22sc) and download a free trial version now.

[View full post](https://blog.netronic.com/links-as-visualization-of-dependencies-in-html5-gantt-charts-vsw-tip)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Juergen Theis"
  },
  "dateModified" : "2021-09-16T11:07:12.173Z",
  "datePublished" : "2021-02-03T13:00:00Z",
  "headline" : "Links as the visualization of dependencies in an HTML5 Gantt - VSW tip",
  "image" : {
    "@type" : "ImageObject",
    "height" : 226,
    "url" : "https://f.hubspotusercontent40.net/hubfs/315990/2017%20Relaunch/Images/For%20Developers/NWAF/links%20VSW%203.png",
    "width" : 459
  },
  "mainEntityOfPage" : "https://blog.netronic.com/links-as-visualization-of-dependencies-in-html5-gantt-charts-vsw-tip",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "SMB Production Scheduling Software Blog"
  }
}
```