Gantt Chart¶

A Gantt chart is a graphical tool used in project management to represent a project schedule. It displays tasks or activities along a timeline to illustrate their start and end dates, duration, and progress. Gantt charts help teams plan, monitor, and manage project timelines, dependencies, and resource allocation.

When creating a Gantt chart, users build tasks.

Tasks are the primary elements of a Gantt chart. They represent the individual activities or operations that need to be completed within a project. Each task is displayed as a row in the left-side table and as a corresponding bar in the right-side area of the Rulex Studio Gantt chart.

Each task consists of specific attributes related to the name of the activity and its start and end dates.

In Rulex Studio, the Gantt chart is made of two areas:

Tabular area - on the left-hand side of the widget, it contains a table where users can drag the required attributes onto the headers to populate the Gantt chart and create a tabular visualization of the tasks.
Graphical area - on the right-hand side of the widget, it contains the graphical representation of the corresponding project activities in the tabular area. Here users can also customize and edit the Gantt chart visualization.

Procedure

To build a Gantt chart in Rulex Studio, users need to:

Drag a Gantt chart from the Widget panel onto the central stage of the slide.
Drag the attribute containing the names of the tasks onto the Name header in the tabular area.
Drag the attribute containing the start dates of the tasks onto the Start header in the tabular area.
Drag the attribute containing the end dates of the tasks onto the End header in the tabular area.
To disambiguate duplicate values in the attribute containing the task names, drag a key attribute onto the N button containing unique characteristics of the values of the task name attribute.
To create a hierarchy between tasks, drag two attributes defining the relationships between tasks onto the L button.

The duration of each task is calculated automatically, and it is displayed in the Dur column. Users don’t need to drag any attributes onto the Dur column.

In Rulex Studio, the Gantt chart allows users to easily visualize and edit projects activities through its intuitive drag-and-drop interface.

Go to the Gantt tabular area section to know more about how to build more complex Gantt charts and the specific options of each header of the tabular area.

Once the required attributes have been dragged onto the tabular area, the graphical area is filled accordingly. Go to the Gantt graphical area to know more about its specific features.

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.

Gantt Tabular Area¶

The tabular area of the Gantt chart is located on the left-hand side of the widget. It allows users to actively build, customize and edit the chart.

Four empty columns are present:

Name - users need to drag an attribute containing the name of the tasks. Optionally users can also drag a key attribute to disambiguate tasks names, or parent-child attributes to build hierarchies between tasks.
Start - users need to drag an attribute containing the start date of the tasks in the project.
End - users need to drag an attribute containing the start date of the tasks in the project.
Dur - calculated automatically based on the Start and End columns’ values.

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

Name column

In the Name column, users need to drag an attribute containing the tasks’ names. Next to the Name column header, users can find the N and L buttons, used to build more complex charts.

In the Name column header or the N button, users need to:

Drag an attribute containing the list of the names, each one of them identifying a task of the project (mandatory).
Drag a key attribute containing unique characteristics of the values of the task name attribute to disambiguate any duplicate values (optional). For example, if the Name column contains two identical values, the Key attribute helps to distinguish each single value of the Name attribute. If a Key attribute has been dragged onto the Name header or the N icon, a golden key icon is added onto the N icon.

Warning

Both the attributes dragged onto Name and N icons must be of nominal or binary type.

In the L button, users can configure links between tasks building a parent-child hierarchy, they need to:

Drag a Parent attribute containing values about the parent task.
Drag a Child attribute containing values about the child task.

Warning

Both the attributes dragged onto L icon must be of nominal or binary type.

Start and End columns

In the Start and End columns users must drag, respectively, the attributes containing start and end dates of the project tasks (mandatory).

Warning

The attributes on both the Start and End column headers must be of datetime, date, quarter, month, week, time type.

Dur column

The Dur column indicates the duration of each task, and it is automatically calculated, when the attributes in the Start and End columns have been defined, according to the format chosen in the Unit of measure and format menu, by calculating the difference between their values.

It is possible to customize the format and the units of measure of the graphical area 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. These values depend on the Start and End values, and only those who are more general than those from which they depend on will be displayed. For example, if the value of Start and End is month, then they can be changed to quarter or year.

Tip

In the tabular area, after the first attribute has been dragged onto one of the column’s headers, users can drag the other attributes not only on the headers, but also on the corresponding columns. Key attributes, instead, must be dragged onto the N button.

Gantt Graphical Area¶

The Gantt graphical area is filled with the graphical representation of 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.

Each bar in the graphical area matches the same one in the tabular area. Nodes are located in the right-hand graphical area of the Gantt chart and are the visual representation of tasks. The node position, where it starts and ends, corresponds to the Start and End columns, while its length reflects the value in the Dur column in the left-hand tabular area.

Based on the Duration options defined in the tabular area, opened by right-clicking on the graphical area headers, 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 tabular area, by default also the children tasks in the graphical area collapse. If a task is collapsed in the tabular area, the node will change its layout as follows:

The parent tasks’s name will be written on the outer-right side of the bar.
The parent tasks’s color will be present only on the outer edges.
The parent bar 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 graphical 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 graphical 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 bar 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 the chart’s bars. 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 tasks’ names will be displayed.
	Show children (when collapsed)	If selected (default), the children tasks are displayed even when the tasks are collapsed in the tabular area.
	Show parent	If selected (default), the parent of the considered children tasks is always displayed.
	Show children names	If selected, the children tasks’ names will be displayed.
	Show children tooltip	If selected (default), the children tasks’ bars tooltip is displayed when hovering over them.
Grid customization	Minimum cell width	The minimum dimension of a cell in the Gantt graphical area. Its value must be equal or above 12.
	Grid snap cell size	Specify the snap size which will be applied when moving any bar onto the Gantt graphical area.

ICON

Subsection	Option	Description	GOLDref
	Icon attribute	Select one of the attributes coming from the dataset containing the name and key attributes which have been dragged onto the Name field. By default, no attribute is displayed. Based on the attribute selection, each bar displays a different icon for each value of the selected attribute.
	Hide icon	If selected, the bars’ icons are hidden.
	First icon	In this area, users can decide the default configuration which affects the automatic bar icon assignation. There is a predefined list of icons, and each distinct value of the chosen attribute is cyclically assigned an icon. Icons are assigned according to a cyclical sequence, meaning that if the number of distinct values exceeds the number of available icons, the icons repeat in sequence for the remaining values. From this drop-down menu, users can select which icon will start the cycle. Only available if an attribute has been selected from the Icon attribute menu.
	Icon of traces	In this area, users can decide the single icon configuration for any present bar. It displays the list of distinct values of the chosen attribute and the corresponding icon. By clicking on the icon, users can define a specific icon for the corresponding value in the Select Icons panel. Users can also define the Color of the selected icon (available for standard icons only). Additionally, a Custom option allows users to upload their own icons in PNG or SVG format. Only available if an attribute has been selected from the Icon attribute menu.

COLOR

Subsection	Option	Description	GOLDref
	Color attribute	Select the Name attribute or the Key attribute which has been dragged onto the Name field. Based on the selected attribute, users can define a rule specifying that each bar will display a different color for each unique value of that attribute.
	First color	Select the default configuration which affects automatic bars coloring. There is a predefined list of colors, and each distinct value of the chosen attribute is cyclically assigned a color. Colors are assigned according to a cyclical sequence, meaning that if the number of distinct values exceeds the number of available colors, the colors repeat in sequence for the remaining values. Only available if an attribute has been selected from the Color attribute menu. From this area, users can select: Colorway, where users are able to change the default colorway among a list of possibilities. Colorway start color index, the starting color is fundamental to obtain the desired pattern, and here users can define the color starting position.
	Color of traces	Decide the single color configuration for any present bar. It displays the list of distinct values of the chosen attribute and the corresponding color. By clicking on the color circle, users can define a specific color for the corresponding value. Only available if an attribute has been selected from the Color attribute menu.

Subsection

Option

Description

GOLDref

Color attribute

Select the Name attribute or the Key attribute which has been dragged onto the Name field. Based on the selected attribute, users can define a rule specifying that each bar will display a different color for each unique value of that attribute.

First color

Select the default configuration which affects automatic bars coloring. There is a predefined list of colors, and each distinct value of the chosen attribute is cyclically assigned a color. Colors are assigned according to a cyclical sequence, meaning that if the number of distinct values exceeds the number of available colors, the colors repeat in sequence for the remaining values. Only available if an attribute has been selected from the Color attribute menu. From this area, users can select:

Colorway, where users are able to change the default colorway among a list of possibilities.
Colorway start color index, the starting color is fundamental to obtain the desired pattern, and here users can define the color starting position.

Color of traces

Decide the single color configuration for any present bar. It displays the list of distinct values of the chosen attribute and the corresponding color. By clicking on the color circle, users can define a specific color for the corresponding value. Only available if an attribute has been selected from the Color attribute menu.

TEXT

Subsection	Option	Description
	Text attribute	Select any attribute from the dataset which has been used to build the chart, whose values will be displayed on the bars. Based on the selected attribute, users can define the text layout for the name of each single value of that attribute.
Text Layout	Text style	Define the title style, which can be bold, italic or underlined.
	Font family	Select from the drop-down list the text font.
	Font size (px)	Type the font size in pixels.
	Text position	Select from the drop-down menu the position of the bars’ text value. The possible values are: Inside (default), Outside.
	Inner text alignment	Select from the drop-down menu the text alignment. The possible values are: Left (default), Center, Right.
	Font color	The color of the bars’ text font. 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 black.

TOOLTIP

Subsection	Option	Description	GOLDref
	Text Attributes	Here users can drop extra attributes belonging to the dataset represented on the Gantt chart which will be used in constructing hover text displays. The graphical structure of this area is the standard attribute drop area.
	Tooltip Text	Insert here what will be displayed as a tooltip when hovering over each node. Users can: insert plain text to display the same value repeatedly for every single node when hovering. Reference an attribute to show the corresponding row value for each node when hovering. To reference an attribute in the dataset which has been used to build the Gantt chart, use the following syntax: `$datasetname!$"attributename`. If users haven’t dragged the corresponding attribute in the Text Attributes area, the attribute reference will not take effect. Note that variables are not accepted in this area and will be treated as text strings.
	Tooltip visible	If selected, the tooltip will be visible on mouse hover.

Subsection

Option

Description

GOLDref

Text Attributes

Here users can drop extra attributes belonging to the dataset represented on the Gantt chart which will be used in constructing hover text displays. The graphical structure of this area is the standard attribute drop area.

Tooltip Text

Insert here what will be displayed as a tooltip when hovering over each node. Users can:

insert plain text to display the same value repeatedly for every single node when hovering.
Reference an attribute to show the corresponding row value for each node when hovering. To reference an attribute in the dataset which has been used to build the Gantt chart, use the following syntax: $datasetname!$"attributename. If users haven’t dragged the corresponding attribute in the Text Attributes area, the attribute reference will not take effect. Note that variables are not accepted in this area and will be treated as text strings.

Tooltip visible

If selected, the tooltip will be visible on mouse hover.

The Axis options window, opened by right-clicking on the graphical area headers and clicking the Set axis option button. This menu can be accessed only if the graphical area is filled with nodes. It 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 graphical area headers can be defined.
The axis section, where the corresponding header axis’ options can be set up. The axis is defined as the header area of the graphical area. Multiple header axis can be added and configured by clicking on the Add new axis button.

Once the Axis options window is opened, the options listed below can be edited:

Option	Description	GOLDref
Start date	Choose the start date which will be shown on the graphical area.
End date	Choose the end date which will be shown on the graphical area.
Unit	Select from the drop-down list the unit which will be displayed in the graphical area headers. The possible values are: Year, Quarter, Month, Week, Day, Hours. These values depend on the Start and End values, and only those who are more general than those from which they depend on will be displayed.
Step	The step between each value in the graphical area headers. The maximum value of this parameter is visible on the left of the number field, and it varies according to the chosen Unit.
Format	The format with which the value is written.
Add new axis	By clicking on the plus button, a new row is added to the axis options menu, and its Unit, Step, Format can be configured. After clicking APPLY, the new sub-headers are added to the graphical area header.

Warning

When an axis is added to the header area, its value can only be of the same or smaller granularity, according to the options set in the Dur field. For example, if the first header axis displays the Day level, only Day or Hour can be selected for the second header axis. If Hour is the unit of measure of Duration, the available values will range from Day to the Duration unit of measure.

Tip

When dealing with a date, it is possible to choose whether the month value is written in letters or in numeral format in the Format field. 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 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 four tabs, whose options are listed in the table below:

The General tab
The Tasks tab
The Gantt tab
The Edit tab

GENERAL

Subsection	Option	Description
General	Hide table	If selected, the tabular area is hidden and only the graphical area is displayed.
	Axis height	Type the height in px of the axis to define the height of the headers both in the tabular area and in the graphical area.
	Line height	Type the height in px of the lines to define the height of the tasks both in the tabular area and in the graphical 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 tabular 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.
	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 tabular area are hidden.
	Vertical lines color	Select the color of the vertical lines of the tabular 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.
	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 tabular area 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 tabular area. This value must be expressed in percentage, as the sum of the Columns subsection must be 100%. If this value is exceeded, the tabular area will be bigger than the visualization window, so a scrollbar is added.
	Column Start	Type the dimension of the Start column in the tabular area. This value must be expressed in percentage, as the sum of the Columns subsection must be 100%. If this value is exceeded, the tabular area will be bigger than the visualization window, so a scrollbar is added.
	Column End	Type the dimension of the End column in the tabular area. This value must be expressed in percentage, as the sum of the Columns subsection must be 100%. If this value is exceeded, the tabular area will be bigger than the visualization window, so a scrollbar is added.
	Column Dur	Type the dimension of the Dur column in the tabular area. This value must be expressed in percentage, as the sum of the Columns subsection must be 100%. If this value is exceeded, the tabular area will be bigger than the visualization window, so a scrollbar is added.

GANTT

Subsection	Option	Description
Horizontal lines	Hide horizontal lines	If selected, the horizontal lines in the graphical area are hidden.
	Horizontal lines color	Select the color of the horizontal lines of the graphical 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 graphical area.
	Horizontal lines style	Choose from the drop-down list the style of the horizontal lines of the graphical 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 graphical area are hidden.
	Vertical lines color	Select the color of the vertical lines of the graphical 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 graphical area.
	Vertical lines style	Choose from the drop-down list the style of the vertical lines of the graphical 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 graphical area is hidden.
	Header divider color	Select the color of the header divider of the graphical 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 graphical area.
	Header divider style	Choose from the drop-down list the style of the header divider lines of the graphical area. Possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.

EDIT

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 there are pending modifications on data. 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, so the color defined in the Editing color will not be displayed.
	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 which have not been made persistent on the underlying table. This operation is possible only if the Enable auto insert checkbox is not selected.

Gantt Editing Operations¶

It is possible to set up the Gantt chart in a way which allows users to edit the underlying dataset, and consequently change the graphical representation.

To enable editing of both the tabular area and the graphical 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 tabular area are automatically applied to the graphical area, and vice versa.

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

The options available in the Editing tab are the following:

In the tabular 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 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 graphical area, users can:

Edit the bar length by selecting it and dragging the desired edge to increase or decrease its length. Alternatively, this operation can be done by right-clicking on the selected bar and clicking Edit. In the Edit Node window, users can set the Start date and the End date by clicking on the calendar icon and selecting directly the corresponding dates. The Duration column data automatically updates based on the new bar length.
Move the bar by selecting it and moving it on the graphical 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 and then by right-clicking and selecting Delete.