Introducing the Gantt Chart Custom Widget for SAP Analytics Cloud

[alexander_khobotov]

Intoduction

While SAP Analytics Cloud (SAC) provides powerful tools for visualizing and analyzing data, one notable visualization currently missing from its standard offering is the Gantt Chart. Gantt charts are widely used for visualizing timelines, dependencies, and resource allocation, making them indispensable for effective project management and scheduling.

To bridge this gap, I've developed a custom Gantt Chart widget specifically designed for SAC users. This widget seamlessly integrates into your SAC environment.

SAP users across various business functions can leverage this custom widget to visualize numerous use cases, including:

• Project Timelines
• Maintenance Scheduling
• Production Planning
• Employee Resource Allocation
• Release Management

In this blog, you'll learn step-by-step how to integrate and configure this custom Gantt Chart widget in your SAC environment to effectively visualize and manage your scheduling data.

Installing the Gantt Chart Custom Widget

To integrate the Gantt Chart custom widget into your SAP Analytics Cloud environment, please follow these steps:

1. Download Required Files: Download UI5GanttChart.json and UI5GanttChart.zip files from the GitHub repository.

2. Upload JSON Definition File:

   • Log in to your SAP Analytics Cloud.
   • Navigate to Stories and select the Custom Widgets tab.
   • Click Create and upload the UI5GanttChart.json file you downloaded earlier.

3. Upload Resource Files:

   • After uploading the JSON file, click the Select File button that appears.
   • Select and upload the UI5GanttChart.zip archive file containing the widget's resource files.

For additional information, refer to the official SAP Analytics Cloud documentation.

Technical Implementation Overview

The Gantt Chart custom widget is built using the standard UI5 GanttChartWithTable control. Some properties of the underlying UI5 control are exposed through the widget's Builder and Styling panels, allowing you to customize and adapt the visualization according to your needs. However, the UI5 GanttChartWithTable control offers numerous additional features, many of which are not yet implemented in this custom widget. This provides significant opportunities for future improvements and feature enhancements. A detailed discussion of the technical implementation will be covered in a separate blog post.

Data Binding for the Custom Widget

The Gantt Chart custom widget does not utilize standard SAC data binding capabilities like those available for table or chart widgets. Instead, it provides an API method named setDataSet that accepts one argument of type Array of ResultSet. You can easily obtain this data array by retrieving it from a standard SAC table widget. Specifically, call the getDataSource().getResultSet() method on the table widget, then pass the result directly to the custom widget using the following code:

var tasksResultSet = Table_Tasks.getDataSource().getResultSet();
GanttChart_1.setDataSet(tasksResultSet);

This approach requires you to use a standard table to retrieve the necessary data, even if this table is hidden from view. It's convenient to implement the provided code snippet within the onResultChanged event handler of the table, ensuring that each time the table data changes (e.g., applying a new filter), the Gantt Chart widget updates automatically.

Because of this approach, data will not be visualized in the Gantt Chart in design mode (designtime).

The custom widget also needs to understand how to extract information from the ResultSet. Thus, required fields need to be mapped to corresponding elements in the ResultSet through the "Dataset Parsing Settings" section in the widget's Builder Panel.

To inspect your ResultSet structure, you can use the following script to log it to the console:

console.log(tasksResultSet);

Here is an example of what your ResultSet might look like:

[
    {
        "@MeasureDimension": {
            "id": "DUMMY",
            "description": "DUMMY",
            "rawValue": "1",
            "formattedValue": "1"
        },
        "ID": {
            "id": "1",
            "description": "1",
            "properties": {}
        },
        "Name": {
            "id": "Phase 1",
            "description": "Phase 1",
            "properties": {}
        },
        "Description": {
            "id": "Initial phase of the project",
            "description": "Initial phase of the project",
            "properties": {}
        },
        "Start_Datetime": {
            "id": "2025-01-01 08:00:00.0000000",
            "description": "Jan 1, 2025 8:00:00",
            "properties": {}
        },
        "End_Datetime": {
            "id": "2025-03-31 18:00:00.0000000",
            "description": "Mar 31, 2025 18:00:00",
            "properties": {}
        },
        "Parent_ID": {
            "id": "",
            "description": "",
            "properties": {}
        },
        "Color": {
            "id": "#3357FF",
            "description": "#3357FF",
            "properties": {}
        }
    },
    {
        "@MeasureDimension": {
            "id": "DUMMY",
            "description": "DUMMY",
            "rawValue": "1",
            "formattedValue": "1"
        },
        "ID": {
            "id": "5",
            "description": "5",
            "properties": {}
        },
        "Name": {
            "id": "Task 1.1",
            "description": "Task 1.1",
            "properties": {}
        },
        "Description": {
            "id": "Research and planning",
            "description": "Research and planning",
            "properties": {}
        },
        "Start_Datetime": {
            "id": "2025-01-05 09:00:00.0000000",
            "description": "Jan 5, 2025 9:00:00",
            "properties": {}
        },
        "End_Datetime": {
            "id": "2025-01-25 17:00:00.0000000",
            "description": "Jan 25, 2025 17:00:00",
            "properties": {}
        },
        "Parent_ID": {
            "id": "1",
            "description": "1",
            "properties": {}
        },
        "Color": {
            "id": "#3357FF",
            "description": "#3357FF",
            "properties": {}
        }
    },
...
]

And the corresponding settings in the Builder panel:

Values in the ResultSet can be addressed in the following ways:

• Name.id – the id of the corresponding dimension will be used
• Name.description – the description of the corresponding dimension will be used
• Name – equivalent to Name.id

Below is an overview of each field required for configuring the Gantt Chart custom widget datset parsing:

• Event ID: Unique identifier for each bar on the Gantt Chart.
• Event Name: Text displayed directly on the bar of the Gantt Chart.
• Event Description (optional): Text displayed as a tooltip when hovering over a bar.
• Event Start Time, Event End Time: Define the start and end times corresponding to the Gantt Chart bar.
• Parent ID (optional): Enables hierarchical organization of bars into a two-level structure. This field should reference the Event ID of the parent bar.
• Color of Event Bar (optional): Hexadecimal color code used to define the color of the corresponding bar on the Gantt Chart.

Additional Settings

The Gantt Chart custom widget provides additional configuration options to fine-tune its appearance and behavior. These settings are available in the widget's Builder panel. Styling-related settings will be covered in a separate section.

Time Zone Settings

• Dataset Timezone Offset from UTC (UTC ± X): If the value is not zero, the Start Time and End Time will be converted from the specified offset to UTC. This setting can also be used to visually shift the Gantt bars by a defined number of hours.

Horizon Settings

Total Horizon defines the complete time frame that is visible in the Gantt Chart. It can either be fixed or dynamic:

• If Dynamic Total Horizon is disabled, the horizon boundaries are defined by the values set in Start Time and End Time properties.
• If Dynamic Total Horizon is enabled, the horizon is calculated based on the current date and time, using the specified number of minutes to look back and forward (Look Back and Look Forward properties).

Visual Horizon defines the portion of the Total Horizon that is visible to the initially visible to the user.

• If Dynamic Visual Horizon is enabled, its boundaries are calculated automatically to ensure all bars from the dataset are included and visible in the chart area by default.
• Otherwise, the visual horizon is equal to the total horizon.

Display Mode

• Compact Representation: When enabled, all bars with the same name will be displayed on a single row, while still maintaining unique IDs. This is especially useful for visualizing recurring events or grouped tasks. If disabled, each bar is shown on its own row even if multiple bars share the same name.

Compact Representation

Table Settings

• Table Columns: This property defines the columns that appear in the table section (left pane) of the Gantt Chart. It expects a JSON array of objects, each specifying a column with two required properties:
  • field: Refers to a dimension in the dataset in the same way as parsing settings (either id or description).
  • label: The display name shown in the table header.

Example:

[
  {
    "field": "Name",
    "label": "Tasks"
  },
  {
    "field": "Description",
    "label": "Description"
  },
  {
    "field": "Start_Datetime.description",
    "label": "Start"
  },
  {
    "field": "End_Datetime.description",
    "label": "End"
  }
]

Gantt Chart Styling

The Gantt Chart custom widget offers several visual customization options located in the widget's Styling panel. These settings allow to control the appearance of the chart bars and labels for improved readability and alignment with visual design standards.

Apply Same Color for All Bars

• This setting enables users to define a uniform color for all bars in the chart.
• It accepts a hex color code (e.g., #3498DB).
• When applied, the color defined here overrides the color values provided in the dataset.

Automatic Text Color

• A checkbox that, when enabled, automatically selects either white or black text based on the bar color to ensure readability.
• This option is useful when bar colors vary and text contrast must be preserved.

 

Fixed Text Color

• This field is only active when Automatic Text Color is disabled.
• Users can manually define a hex color code to be used for text labels across all bars.

Bars Opacity

• Defines the transparency level of the bars. Default value is 0.8.
• Accepts a numeric value from 0 (completely transparent) to 1 (fully opaque).

Conclusion

The Gantt Chart custom widget for SAP Analytics Cloud fills a critical visualization gap by enabling intuitive and flexible timeline representation directly within SAC stories and applications. With its support for hierarchical structures, dynamic time horizons, and extensive customization options, the widget seamlessly integrates into diverse planning and reporting scenarios.

By following the setup and configuration steps outlined in this post, you can easily incorporate the widget into your dashboards.

Further enhancements and deep-dives into the technical implementation will be covered in upcoming posts. Feedback and contributions are welcome — feel free to comment and help shape the future of this custom visualization.