Gantt Chart

Gantt chart is typically used for illustrating project schedules and project breakdown into tasks, but in process mining gantt chart can also be used to visualize events in an individual case, or how multiple cases go in relation to each other. The gantt chart has the calendar time axis horizontally and swimlanes vertically.

Overview

Gantt chart has the following features:

• Items with zero duration can be visualized (i.e., start time is same as the end time, or the end time is not defined). These items are shown as the milestone diamonds.
• The gantt chart is able to visualize the dependencies between items by drawing arrows between them. This requires a unique id for each item and the predecessor item id to be defined.
• The gantt chart is able to show the swimlanes in a hierarchy. This requires a unique id for each item and the parent id to be defined.
• Filters can be created in the gantt chart by clicking one or several items.
• The gantt chart can be zoomed using the lasso tool (move the mouse in the gantt chart while keeping the mouse button pressed).
• Current time indicator is shown.

Mappings

The features in the gantt chart are activated by taking into use the different mappings available. The mappings settings can be found in the measure, dimension or column settings. Gantt chart has the following mappings:

• Swimlane name: Swimlane where the item belongs to. Swimlane names are unique, so if there are several items with the same name, they go to the same swimlane. This mapping is mandatory.
• Start time: Start time of the item. This mapping is mandatory.
• End time: End time of the item. If the end time is not mapped or contains a null value, the item is shown as a milestone diamond. This mapping is optional.
• Table column: Data mapped as Table column is shown as a table, left side of the gantt chart. There can be several of the table column mappings, each appearing as separate columns.
• Completion percentage: Gantt chart can to show the completion percentage for each item. The completion percentage needs to be provided as a percentage value between 0 and 100. This mapping is optional.
• Item id: Technical id for the items, defining the item id for parents and predecessors. If this mapping is not defined, the swimlane mapping is used as the item id.
• Parent id: Defines the parent for each item. Refers to the Item id (if defined) or swimlane of the parent. When this mapping is defined, the swimlanes are shown in a hierachy.
• Predecessor id: Defines the predecessor (dependency) for an item. Refers to the Item id (if defined) or swimlane of the predecessor item. The predecessors are shown as arrows.
• Show in tooltip: Data is shown in the tooltip which is the box appearing when an item is hovered with the mouse.
• Show in datalabel: Data is shown on top of the item in the gantt chart.
• Color: Defines how the items are colored. Each item with the same value will get the same color.

Colors and conditional formatting

Items in the gantt chart get colors from the color palette (available in the chart settings), when the Color mapping nor the conditional formatting are defined. The Color mapping is an easy way to show which items have the same value for the measure/dimension/column mapped to the Color. The most advanced method is to use the conditional formatting which freely defines the color for each items.

Conditional formatting can be used to define gantt item colors flexibly. The conditional formatting json needs to be defined to the measure/dimension/column that is mapped to the swimlane.

Traffic lights colors based on a numerical values:

{
  "color": {
    "value": {
      "type": "dimension",
      "index": 3
    },
    "rules": [
      {
        "color": "#FF0000",
        "value": 20,
        "comparison": "<"
      },
      {
        "color": "#00FF00"
      }
    ]
  }
}

Color scale based on a numerical values defined in the 4th column:

{
  "color": {
    "value": {
      "type": "dimension",
      "index": 3
    },
    "scale": [
      {
        "value": 0,
        "color": "#FFFFFF"
      },
      {
        "value": {
          "type": "dimension",
          "index": 3,
          "aggregate": "max"
        },
        "color": "#FFD851"
      }
    ]
  }
}

Color code coming from a column:

{
	"color": {
		"color": {
		  "type":"dimension",
		  "index": 3
		}
	}
}