Gantt Chart

Gantt chart is typically used for illustrating project schedule and 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:

• The gantt chart is able to visualize items where the duration is zero (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 dependant item 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

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: Information is shown as a table, left side of the gantt chart. There can be several of these mappings.
• Completion percentage: Optionally, gantt chart is able to show visually the completion percentage for each item. The completion percentage needs to be provided as a percentage value between 0 and 100.
• Item id: Technical id for the items. This is needed when defining parents and dependencies.
• Parent item id: Defines the parent item for each time. Refers to the Item id of the parent. When this mapping is defined, the swimlanes are shown in a hierachy. When this mapping is defined, also the Item id mapping is needed.
• Dependant on item id: Defines from which other item, the item is dependant. The dependencies are shown as arrows in the gantt chart. When this mapping is defined, also the Item id mapping is needed.
• Show in tooltip: Information is shown in the tooltip which is the box appearing when an item is hovered with the mouse.
• Show in datalabel: Information 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
		}
	}
}