Gantt widgets in Decision Optimization experiments

Last updated: Feb 29, 2024

You can add Gantt charts in the Visualization view to better display, for example, planning and scheduling solutions.

Gantt charts are automatically created to display the solution for scheduling problems created with the Modeling Assistant. You can, however, edit, create and configure Gantt charts for any data where it is meaningful, using the Gantt widget. You can use the Widget Editor to select the relevant scenario, and Resources, Activities, Reservations and Dates to be displayed. You can also use the JSON editor to configure Gantt charts, by clicking the pencil icon and selecting the JSON pane.

The Gantt chart automatically generated for the Modeling Assistant uses the following JSON code. The data field value $cognitive-gantt here dynamically enables the Gantt widget to connect to the Modeling Assistant solution. This dynamic loading can also imply that it might take a moment for the Gantt chart to appear.

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": "$cognitive-gantt",
    "spec": {},
    "search": ""
  }
}

To define your own Gantt chart, you can use the Widget Editor or edit the JSON code and provide the names of 3 of your tables to define the resources, activities and reservations data, as follows:

  "data": [
    "resourcesTableName",
    "activitiesTableName",
    "reservationsTableName"
  ],

Also provide a spec section to define these tables, as follows. The parent fields are optional but all other fields are mandatory.

  "resources": {
    "data": "resourcesTableName",
    "id": "id",
    "parent": "parent",
    "name": "name"
  },
  "activities": {
    "data": "activitiesTableName",
    "id": "id",
    "name": "name",
    "start": "start",
    "end": "end",
    "parent": "parent"
  },
  "reservations": {
    "data": "reservationsTableName",
    "activity": "activity",
    "resource": "resource"
  },

Another mandatory field that you must also define in the specification is the dateFormat so that all the common date formats can get converted into real dates. Some common date formats are for example 'yyyy-MM-dd', 'yyyy-MM-dd HH:mm:ss', and so on. You can also use S for milliseconds for Epoch time, for example, "dateFormat": "S". The dateFormat must match the "start" and "end" fields of the "activity" table.

The error message No time window defined is displayed until you define the activity table, with start and end fields that use the specified dateFormat.

The following optional fields are also available:

resourceQuantity where you can configure the quantity column in the resources table to enable the Gantt chart to get the necessary information to populate a Load Resource Chart for you. You can set this column as follows: "resourceQuantity": "quantity"
You can also set the type of Gantt chart that you need: ActivityChart or ScheduleChart. You can set the type as follows:"type": "ActivityChart",. You can also omit this setting and the default is ScheduleChart. If you choose to have an ActivityChart, you must provide more information about the constraints table name and the mapping for this table:
```
  "constraints": {
    "data": "constraintsTableName",
    "from": "from",
    "to": "to",
    "type": "type"
  },
```
The from and to values are the column names in your constraints table that define the order of precedence of tasks. The type values here correspond to the Gantt-chart library values 0 to 3:
```
START_TO_START: 0,
START_TO_END: 2,
END_TO_END: 3,
END_TO_START: 1,
```
For example, if your to task starts after the end of your from task, select 1 as the type value.

ScheduleChart example

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations"
    ],
    "spec": {
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}

ActivityChart example

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations",
      "constraints"
    ],
    "spec": {
      "type": "ActivityChart",
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "constraints": {
        "data": "constraints",
        "from": "from",
        "to": "to",
        "type": "type"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}