Gantt Chart¶

The Gantt chart consists of a series of horizontal bars, with start and end dates illustrating a project schedule. The lenght of the horizontal bars indicates the duration of each activity. The Gantt chart is mainly used as a project management tool to monitor the project plan.

It is possible to set up the Gantt chart so that it allows editing the underlying dataset through its interactive area options.

In Rulex Studio, this widget allows users to easily visualize and edit projects through its drag-and-drop interface.

This widget is made of two sections:

Input area - on the left-hand side of the widget, it contains a table where users need to drag attributes that will be used to build the so-called tasks, which are then represented graphically on the right-hand side of the widget.
Interactive area - on the right-hand side of the widget, it contains the graphical representation of data defined in the input area, including nodes, links, start and end dates. This part of the widget is built automatically based on what is defined in the input area.

Both these areas can be used to edit the underlying dataset through specific options listed in this page. More information about the editing operations available for this widget is available in the dedicated paragraph.

All the features and customization options of this widget are listed in the paragraphs below.

Gantt Input Area¶

When building a Gantt chart, users need to start dragging the required attributes on the left-hand side of the widget to build tasks.

Tasks are the main elements of the chart and represent activities or operations to be performed within a project. Each task consists of specific attributes related to start and end dates, hierarchy, nodes, and links. Tasks are created by dragging attributes onto the corresponding fields listed below. Since tasks follow a parent-child hierarchy, a collapse icon appears next to each parent value. This icon can be clicked to collapse or expand the corresponding parent-child values.

Four columns are present:

Name - made of Nodes and Links.
Start - containing the start date of the project.
End - containing the ending date of the project.
Dur - calculated automatically once the Start and End fields have been filled.

Each field has an icon next to its name, which becomes blue once an attribute is dragged onto it.

It is possible to customize the format and the units of measure of the input table by right-clicking on its headers and selecting Set unit of measure and format to open the Unit of measure and format menu.

In this window, it is possible to customize the following options:

Subsection	Option	Description
Format options	Start date format	Type the format of the Start column.
	End date format	Type the format of the End column.
Duration options	Unit of measure	Select from the drop-down list the unit of measure of the Duration column. The possible values are: Year, Quarter, Month, Week, Day, Hour, Minute, Second, Millisecond.

Name column

The Name column in the Gantt chart widget contains the tasks’ names and their values, organized following the parent-child hierarchy. The Name column contains two fields: Node and Link.

To populate this column, users need to drag the required attributes onto the Nodes and Links fields, which can be easily identified on the interface with the N and L icons next to the Name column header.

For a full definition of Node and Link, go to the corresponding page.

In the Node field, users can define two options:

The Name (mandatory), which is the attribute containing the list of activities.
A Key attribute (optional), which is the attribute containing the unique characteristics of the values of the Name field. For example, if the Name contains two identical values, the Key attribute helps to distinguish each single value of the Name attribute. If a Key has been dragged onto the field, a golden key icon is added onto the N icon.

Both the Name and the Key attributes must be of nominal type.

In the Link field, users can define two options:

Parent: the parent attribute, containing the parent task.
Child: the child attribute, containing the child task.

Start and End columns

The Start and End columns define, respectively, the starting and ending dates of the project which will be represented in the interactive area.

The attributes on both the Start and End fields must be of datetime, date, quarter type.

Dur column

The Dur column is automatically filled, when the attributes in the Start and End fields have been defined.

Gantt Interactive Area¶

The Gantt interactive area is filled with the nodes representing the time intervals of each task. Reading it horizontally allows users to understand the duration of each task, while reading it vertically to see the list of tasks in the considered time interval.

Based on the Duration options defined in the input area, opened by right-clicking on any header, users can view each task’s duration graphically, as each task corresponds to a bar on the same row of the chart.

See also

When collapsing the tasks in the input area, by default also the nodes in the interactive area collapse. If a task is collapsed in the input area, the node will change its layout as follows:

The parent node’s name will be written on the outer-right side of the node.
The parent node’s color will be present only on the outer edges.
The parent node will be filled with the tasks’ colors.
If more than one child task is present within the same time frame, the only one visible will be the last one in the tasks’ order.
If no child task is present within a specific time frame, the corresponding section in the parent task is left empty.

By right-clicking on the interactive area’s headers, a context menu appears, which contains two entries, the Set gantt options and the Set axis option, each one of them opening a dedicated window.

The Gantt options menu can be accessed by right-clicking any point of the interactive area and selecting Set gantt options.

This menu is made of five tabs, whose options are explained in the table below:

GENERAL

Subsection	Option	Description
Node customization	Node default color	The default color of the node in the chart. By clicking on the color, which is blue by default, a popup opens, where Standard colors can be used, as well as Rgb, Hex, Hsl and Hsv colors and generated color palettes.
	Node default icon	It defines the type of icon to be displayed on nodes. By clicking it, users can select the desired one in the corresponding Select icons window. In this window, users can also define the Color and visualize a Preview of the selected icon. By clicking on the Custom option in the Select icons window, you can upload an icon present on your local machine in SVG or PNG formats by clicking on the Search button.
	Show nodes’ names	If selected (default), the nodes’ names will be displayed.
	Show children (when collapsed)	If selected (default), the child nodes are displayed even when the tasks are collapsed in the input table.
	Show parent	If selected (default), the parent of the considered children tasks is always displayed.
	Show children names	If selected, the children names will be displayed.
	Show children tooltip	If selected (default), the children’s tooltip is displayed when hovering over them.
Grid customization	Minimum cell width	The minimum dimension of a cell in the Gantt interactive area. Its value must be equal or above 12.
	Grid snap cell size	Specify the snap size which will be applied when moving any node onto the Gantt interactive area.

ICON

This tab has the same options which have already been described in the Link analysis dimension menus. To know the description of each option, go to the corresponding page.

COLOR

This tab has the same options (apart from the Color stroke instead of fill option, which is not present in the Gantt chart) which have already been described in the Link analysis dimension menus. To know the description of each option, go to the corresponding page.

TEXT

This tab has the same options which have already been described in the Link analysis dimension menus, plus the option Text position, which indicates whether the text will be located Inside or Outside the node. To know the description of each option, go to the corresponding page.

TOOLTIP

This tab has the same options which have already been described in the Link analysis dimension menus. To know the description of each option, go to the corresponding page.

The Axis options window, opened by clicking the Set axis option button, is made of a unique tab, which can be ideally divided into two sub-sections:

The date definition section, where the start and end dates of the Gantt chart can be defined.
The axis section, where the corresponding axis’ options can be set up. The axis is defined as the header area of the chart. Multiple axis can be added and configured by clicking on the Add new axis button.

Warning

When an axis is added to the header area, its value can only be of the same or smaller granularity. For example, if the first axis displays the Day level, only Day or Hour can be selected for the second axis. If Hour is selected, only Minute will be available for the next axis, and so on.

Tip

When dealing with a date, it is possible to choose whether the month value is written in letters or in numeral format. For example:

To visualize the month value in letters, users can specify yyyy MMM dd in the Format field of the Axis options window.
To visualize the month value in numbers, users can specify yyyy MM dd in the Format field of the Axis options window.

To know more about the supported formats, visit this page.

Gantt Editing Operations¶

It is possible to set up the Gantt chart in a way which allows users to edit the underlying dataset.

To enable editing of both the input area and the interactive area, select the Enable editing checkbox in the Editing tab of the Widget layout menu, which can be accessed by right-clicking on the widget.

Warning

Any changes made to the input area are automatically applied to the interactive area, and vice versa.

Then, depending on the options set in the Editing tab, the editing operations are made persistent either through a General Button or automatically.

The options available in the Editing tab are the following:

Subsection	Option	Description
Editing	Enable editing	If selected, it will be possible to perform editing operations on the Gantt chart.
	Editing color	The background color of the chart when the editing operations are active. By clicking on the color, which is orange by default, a popup opens, where Standard colors can be used, as well as Rgb, Hex, Hsl and Hsv colors and generated color palettes.
	Enable auto insert	If selected, all the editing operations are automatically saved on the underlying table.
	Insert button	Select from the drop-down list the General Button which will make the editing operations persistent on the underlying table. This operation is possible only if the Enable auto insert checkbox is not selected.
	Reset button	Select from the drop-down list the General Button which will cancel the pending editing operations performed on the underlying table. This operation is possible only if the Enable auto insert checkbox is not selected.

In the input area, users can:

Edit any individual cell in the table - whether it’s the task name or the start/end date - by simply clicking the cell, typing the new value, and pressing Enter on the keyboard. If a start or end date is modified, the Duration column automatically updates based on the new dates.
Delete tasks by selecting them, right-clicking on them and selecting Delete. If users need to delete multiple tasks at a once, they can be selected by pressing the CTRL button and clicking on the tasks.

Note

If parent tasks are cancelled, the children tasks will not be cancelled, and will gain one level in the parent-child hierarchy.

In the interactive area, users can:

Edit the bar length by selecting it and dragging the desired edge to increase or decrease its length. The Duration column data automatically updates based on the new bar length.
Move the bar by selecting it and moving it on the interactive area. Multiple bars can be moved at the same time by selecting them while keeping the CTRL key pressed.
Delete the bar by selecting it, right-clicking on it and selecting Delete. Multiple bars can be cancelled by selecting them while keeping the CTRL key pressed.

Gantt Layout Menu¶

It is possible to set up the Gantt chart layout options by double-clicking on the chart’s edges or by right-clicking on them and selecting Open widget layout from the widget’s context menu.

The layout menu is made of three tabs, whose options are listed in the table below:

The General tab
The Tasks tab
The Gantt tab

GENERAL

Subsection	Option	Description
General	Hide table	If selected, the input table is hidden and only the interactive area is displayed.
	Axis height	Type the height in px of the axis to define the height of the headers both in the input table and in the interactive area.
	Line height	Type the height in px of the lines to define the height of the tasks both in the input table and in the interactive area.

TASKS

Subsection	Option	Description
Horizontal lines	Hide horizontal lines	If selected, the horizontal lines of the widget will be hidden.
	Horizontal lines color	Select the color of the horizontal lines of the input table. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is grey.
	Horizontal lines size (px)	It defines the size of the horizontal lines.
	Horizontal lines style	Choose from the drop-down list the style of the horizontal lines of the chart. Possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.
Vertical lines	Hide vertical lines	If selected (default), the vertical lines dividing each column in the input table are hidden.
	Vertical lines color	Select the color of the vertical lines of the input table. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is grey.
	Vertical lines size (px)	It defines the size of the vertical lines.
	Vertical lines style	Choose from the drop-down list the style of the vertical lines of the chart. Possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.
Header divider	Hide header divider	If selected, the divider between the headers and the rows of the input table columns is hidden.
	Header divider color	Select the color of the divider. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is dark blue.
	Header divider size (px)	It defines the size of the header divider.
	Header divider style	Choose from the drop-down list the style of the header divider. Possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.
Columns	Column Name	Type the dimension of the Name column in the input table.
	Column Start	Type the dimension of the Start column in the input table.
	Column End	Type the dimension of the End column in the input table.
	Column Dur	Type the dimension of the Dur column in the input table.

GANTT

Subsection	Option	Description
Horizontal lines	Hide horizontal lines	If selected, the horizontal lines in the interactive area are hidden.
	Horizontal lines color	Select the color of the horizontal lines of the interactive area. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is grey.
	Horizontal lines size(px)	It defines the size of the horizontal lines of the interactive area.
	Horizontal lines style	Choose from the drop-down list the style of the horizontal lines of the interactive area. Possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.
Vertical lines	Hide vertical lines	If selected, the vertical lines in the interactive area are hidden.
	Vertical lines color	Select the color of the vertical lines of the interactive area. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is grey.
	Vertical lines size(px)	It defines the size of the vertical lines of the interactive area.
	Vertical lines style	Choose from the drop-down list the style of the vertical lines of the interactive area. Possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.
Header divider	Hide header divider	If selected, the header divider in the interactive area is hidden.
	Header divider color	Select the color of the header divider of the interactive area. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is grey.
	Header divider size(px)	It defines the size of the header divider of the interactive area.
	Header divider style	Choose from the drop-down list the style of the header divider lines of the interactive area. Possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.