Gantt Chart¶

The Gantt chart consists of a series of horizontal bars, with start and end dates illustrating a project schedule. The width 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.

In Rulex Studio, this widget allows visualizing and editing the projects easily, through a 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, but users can also manually modify the date ranges of tasks, as explained in the interactive area section

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 chart’s main element, and they represent an activity or an operation which will be performed within a project. Each task is made of specific attributes referring to start and end date, hierarchy, nodes and links. Tasks are built by dragging the attributes onto the corresponding fields, listed below. As they follow a parent-child hierarchy, a collapse icon is added next to the parent value, and can be clicked to collapse or to expand the child values of the corresponding parent value.

Four fields 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.

Name field

The Name field in the Gantt chart widget contains the tasks’ names and their values, organized following the parent-child hierarchy.

To build 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 fields

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

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

Dur field

The Dur field is automatically filled, when the attributes on the Start and End fields have been filled.

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.

Gantt Interactive Area¶

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

According to the Duration options parameters defined in the task area, users can visualize each task’s duration graphically, as each task on a specific row corresponds to a bar on the corresponding 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 on all 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	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.
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 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 in the header area, its value can only be of the same or smaller dimension. For example, if on the first axis a Day is present, only the Day or Hour format can be chosen in the second one. If Hour is chosen, only Minute will be available in the subsequent 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 Axes options window.
To visualize the month value in numbers, users can specify yyyy MM dd in the Format field of the Axes options window.

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

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 displayed.
	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.