Vizlib Home Try Vizlib

Vizlib Gantt | Dependencies / Critical Flow

Creating Dependencies by adding an Order ID and a Predecessor

Vizlib Gantt supports Dependencies, which are added and defined in the Dimensions section of the property panel.

We base our logic on the popular project planning tool MS Project; therefore, files with that data structure are compatible with Vizlib Gantt. 

NOTE: To create dependencies, we recommend you have an Order ID and a Predecessor ID column in your dataset to link the events. You don't need the Order ID column in your dataset as long as the field you are referencing in the Predecessor column has a unique value. This documentation will assume you have an Order ID column.

In Figure 1 the highlighted columns show how the Order and Predecessors column reference one another.

Figure 1 - Example dataset with an Order and a Predecessor column to create dependencies in a Vizlib Gantt chart. 


Adding the Event Order  

Follow the setup guide for the Vizlib Gantt Setup Wizard and consider steps 1, 2, and 3 when populating the Wizard when using Dependencies.

NOTE: Dependencies are only visible after you define them in the property panel under the first dimension in Figure 4.

  1. In Event Field (1), select the column with the Event Order ID.
  2. (Optional step) In Name Field (2), you can change the field's name to represent a more meaningful name.
  3. Complete the rest of the Setup Wizard as you would normally.

Figure 2 - Gantt event dependencies orders

Figure 2 - Gantt event dependencies orders

Adding Dependencies

There are four Dependency links: Finish to Start (most common), Start to Start, Start to Finish, and Finish to Finish. Vizlib Gantt checks your data and visualizes the data based on the Order number you've assigned in your data set.

Figure 3 - Dependency types

NOTE: Currently, the Vizlib Gantt only supports Finish to Start event linking.

The Predecessors field is set within the first dimension:

  1. Select the Vizlib Gantt chart and expand the first dimension.
  2. (Optional step) Scroll down and tick the check box Cascading events [Figure 4]. This design choice makes event linking more obvious (each event has its own row).
  3. Scroll to the Draw dependencies feature and toggle it to Enabled.
  4. In the Predecessors input field, click the expression button to view the list of fields.
  5. Insert your Predecessors field and click Apply.
  6. The outcome should look similar to Figure 5.

Figure 4 - Select the Predecessors field.
Figure 5 - Applying Cascading Events format.

----- ----- ----- ----- -----

Dependencies with dates that are far away

Event dependencies that link to or are being liked to events not rendered within Gantt's view area are presented with a dashed line at the beginning or end of the Event, as seen in Figure 6 ( ----- / ----> ).

Figure 6 - Linked events

----- ----- ----- ----- -----

Practice applying Dependencies

Two (2) sample CSV files at the bottom of this article contain example dataset requirements for dependencies to work.

Appearance and Styling options

Dependency styling options include (Figure 7): 

  • Link weight - measured in pixels.
  • Link color - enter a color or select from the color picker.
  • Highlight on hover - slide the toggle to the right to enable the option. 
  • Link color on hover - entered in a color or selected from the color picker.

Figure 7 - Aesthetic options for links

Example of Dependencies in Vizlib Gantt

An example of using Dependencies is shown in the quick Vizlib Monthly Roundup Two-minute video (the two-minute segment starts at 03:00). 

Please see the Vizlib channel on YouTube for more demos and overviews of our new features. 

Video 1: Vizlib Gantt dependencies in the August 2022 Monthly Roundup video

Luke is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.