Updated on 2025-05-20 GMT+08:00

Gantt Chart

This section describes basic information about a Gantt chart and how to use the chart.

Field

  1. On the Field tab, double-click or drag the required dimensions and metrics to the Dimension and Metric areas.
  2. Set a filter.
    1. Find the data field you need in the dimension and metric lists within the data column.
    2. Click next to the field you wish to filter and you will be directed to the filter settings page.
    3. Click OK.
      Table 1 Filter parameters

      Type

      Parameter

      Description

      string

      Condition

      Filter Mode: The options are Condition and Enumeration.

      Condition Type: The options are And condition and Or condition.

      Filter Condition: The options are Exact match, Contain, Start with, End with, Not match, Not contain, Null, and Not null.

      Enumeration

      Query Mode: The options are Single-select and multi-select.

      Filter Condition: The options are >, , <, , =, , Null, and Not null.

      Metric

      Condition Type

      The options are And condition and Or condition.

      Filter Condition

      The options are >, , <, , =, , Null, and Not null. You can select Before aggregation and After aggregation for data.

      NOTE:

      If you select Before aggregation, data is filtered before aggregation. If you select After aggregation, data is filtered after aggregation. For aggregation concepts, see Creating a Dataset.

      You can click Create Filter Condition to set multiple filter criteria.

      Date

      Range value

      Select a time range for filtering.

      Single value

      Set a single time for filtering.

      Condition

      You can select And condition or Or condition as the condition type and select filter condition like >, , <, , and =.

      You can click Create Filter Condition to set multiple filter criteria.

  3. Set the maximum number of query results.

    Enter the maximum number of records that can be returned in the text box. The default value is 1000.

  4. Set automatic refresh.

    The auto refresh interval supports the following options: no refresh, 1 minute, 5 minutes, 15 minutes, and 30 minutes.

Style

  • Size/Position
    • W: width of the target, in pixels.
    • H: height of the target, in pixels.
    • X: position of the target on the canvas, in pixels.
    • Y: position of the target on the canvas, in pixels.
    • Opacity: Adjust the transparency of the target on the canvas using a slider or by manually entering a percentage. A higher percentage means lower transparency.
    Figure 1 Size/Position
  • Global Style

    Font: font of the text in the chart.

    Figure 2 Global Style
  • Gantt Chart Style
    • Chart Label
      • Font Size: font size of the Gantt chart label, which can be customized. The value ranges from 10 to 100.
      • Color: color of the Gantt chart label, which can be customized.
      • Font Weight: The options include Normal, Bold, Bolder, and Lighter.
    • Status-Color Configuration: Obtain the range of status enumerated values based on the Status/Dimension area on the Fields tab and customize the colors for the values.
  • Margin: You can customize the top, bottom, left, and right margins of the Gantt chart.
  • X Axis/Y Axis

    Axis Label: font size, font color, and font weight of the X axis and Y axis labels.

    Figure 3 X/Y axis
  • Tooltips
    • Show Tooltips: If the checkbox is selected (), a tooltip is displayed when you preview or view a published component. If the checkbox is not selected (), no tooltip is displayed when you preview or view a published component.
    • Color: font color of tooltips.
    • Font Size: font size of tooltips.
    • Font Weight: font weight of tooltips.
      Figure 4 Tooltips

Interactions

  • Link

    On the Interactions tab, choose Advanced > Link. In the Chart Linkage Configuration dialog box that appears, set parameters by referring to Table 2. For details, see Example linkage.

    • Filter
      1. Click Filter. The Filter tab is displayed.
      2. Click next to Fields to Bound. The associated field box is displayed.
      3. Click , select the field to be bound, select the associated chart, and click OK.
    • Shown/Hidden
      1. Click Show/Hidden. The Shown/Hidden tab is displayed.
      2. Select the associated chart and click OK.
      Table 2 Chart linkage configuration parameters

      Parameter

      Description

      Filter

      • Fields to Bound: Select the fields to be bound.
      • Associated Charts: Set linked associated charts. You can select charts from the same dataset or different datasets.

      Shown/Hidden

      Select the required fields first and then select the charts to be associated with them. You can select all charts on the large screen.

      • Click Show/Hidden. The Shown/Hidden tab is displayed.
      • Select the associated chart.
  • Redirect
    1. On the Interactions tab, click the edit icon next to Redirect under Advanced.
    2. In the Chart Redirect dialog box that appears, click next to Component to Be Bound.
    3. Set Redirect Type, Open Mode, Redirect to Reports/Screens, and Associated Parameters, and click OK. For details, see Redirect Example.
      • You can redirect with parameters. For specific examples, refer to Example of Redirection with Parameters.
      • To set up redirection, drag the desired fields to the Fields tab. Then, navigate to the chart redirection page to configure the bound fields. Failure to do so will result in unsuccessful redirection.
      Table 3 Parameters

      Parameter

      Description

      Redirect Type

      Intra-system redirect: Redirect to the internal screen and dashboard projects.

      External redirect: Redirect to a link that is not in the software.

      Open Mode

      Open in this window: After you click the chart with redirection set, the target chart is opened in the current window.

      Open in new window: After you click the chart with redirection set, the target chart is opened in a new window.

      Open in popup window: After you click the chart with redirection set, the target chart is opened as a pop-up window. The size of the pop-up window is customizable.

      Redirect to Reports/Screens

      1. Select a project first.
      2. Select a dashboard/screen.
        NOTE:

        This step is mandatory when Redirect Type is set to Intra-system redirect.

      Associated Parameters

      Set Effective Parameters of This Screen.

      • Associated Parameters: Carry associated fields to the chart that you are redirecting to.
      • Enter a fixed value: The chart that you redirect to only filters the fixed value. For example, if the fixed value is set to city, the chart that you redirect to displays the filtered city field.
      • Control Variables: Each value selected in the drop-down box, search, or tab list is a variable value set by the control variable. For example, if you select city in the drop-down box, the variable value of the control variable is city, and the chart that you redirect to filters out the city field.
      • Global Parameters: Carry the values in the global variables to the chart that you redirect to.

      Carry condition

      When Redirect Type is Intra-system redirect, null values can be carried. Carrying null values is mainly used for filtering null values in data tables, making it easier for users to analyze data.

      • Prerequisites: Set up two large screens, A and B, with screen A linking to screen B.
      • Procedure
        • Configure global parameters in screen B and ensure that the same fields exist in screen A.
        • Set the redirect parameters in screen A, select screen B as the target, and choose associated fields from the global parameters.
        • Select Carry null value and click OK.
        • The bound field in screen A will be underlined. Click it to redirect to screen B and filter out rows with null fields. The URL of screen B will display the param parameter.
        • Deselect Carry null value and click OK.
        • The bound field in screen A will be underlined. Click it to redirect to screen B and display all chart data. The URL of screen B will not display the param parameter.

Example of Using a Gantt Chart

Display the optimal sales period for a store's products.

  • Displays data.
    Table 4 Product type table

    Product Type

    Product Name

    Color

    Start Date

    End Time

    Mobile phone

    Mobile phone A

    White

    May 2023

    July 2, 2023

    Mobile phone

    Mobile phone B

    Red

    May 2023

    July 3, 2023

    Mobile phone

    Mobile phone C

    Black

    May 2023

    August 4, 2023

    Desktop computer

    Computer A

    Black

    January 2023

    August 5, 2023

    Desktop computer

    Computer B

    Black

    May 2023

    August 6, 2023

    Desktop computer

    Computer C

    Black

    May 2023

    August 7, 2023

    Tablet

    Tablet D

    Red

    May 2023

    August 8, 2023

    Tablet

    Tablet M

    Pink

    June 2023

    August 9, 2023

    Laptop

    Laptop A

    Pink

    June 2023

    August 10, 2023

    Laptop

    Laptop C

    Red

    June 2023

    August 11, 2023

  • Procedure
    1. Click in the upper left corner to select a region.
    2. In the lower left corner of the navigation pane, select an enterprise project from Enterprise Project.
    3. Create a project.
    4. Create a data source.
    5. Create a dataset by referring to Creating a Dataset.
    6. Create a large screen by referring to Creating a Large Screen. In the Common charts area in the left pane, select Gantt Chart and create it.
    7. Select the dataset created in Creating a Dataset and drag and drop the corresponding fields to the Title/Dimension, Name/Dimension, Status/Dimension, Start Time/Dimension, and End Time/Dimension areas.
    8. Click Update in the lower right corner. The Gantt chart displays data. Set the Gantt chart based on the style parameters.