---
title: "XY Chart Example - Gantt Chart"
---

# XY Chart Example - Gantt Chart

> In addition to basic data plotting, an XY Chart can be used to plot horizontal bar across different lanes, in this fashion:

![](image2021-8-24_14-45-42.png)

This can useful when it comes to machine downtime scheduling, shift scheduling, and maintenance scheduling. To achieve this functionality with the XY Chart, follow the example below:

1. From the Perspective section of the Project Browser on your Designer, right click on the Views folder and select **New View...** to create a new view.
2. This will bring up the New View window. Give your view a name and select the Coordinate Root Container Type. The Page URL setting will remain unchecked for this example.

    ![](timeSeriesView.png)

3. From the Perspective Component Palette, drag and drop a XY Chart onto your newly created view. 
4. Click to select your newly added XY Chart and from the property editor, click on the + icon next to the **dataSources** property and select Array to create a new data source array and name it schedule_data. 

    ![](2020-06-24_14-44-26.png)

5. Right-click on your newly created schedule_data dataSource and paste the following: 

    ```
    [
    {
        "name": "John",
        "fromDate": "2018-01-01 08:00",
        "toDate": "2018-01-01 10:00",
        "color": "#00FF30"
    },
    {
        "name": "John",
        "fromDate": "2018-01-01 12:00",
        "toDate": "2018-01-01 15:00",
        "color": "#FF0030"
    },
    {
        "name": "John",
        "fromDate": "2018-01-01 15:30",
        "toDate": "2018-01-01 21:30",
        "color": "#00FF30"
    },
    {
        "name": "Jane",
        "fromDate": "2018-01-01 09:00",
        "toDate": "2018-01-01 12:00",
        "color": "#00FF30"
    },
    {
        "name": "Jane",
        "fromDate": "2018-01-01 13:00",
        "toDate": "2018-01-01 17:00",
        "color": "#FF0030"
    },
    {
        "name": "Peter",
        "fromDate": "2018-01-01 11:00",
        "toDate": "2018-01-01 16:00",
        "color": "#00FF30"
    },
    {
        "name": "Peter",
        "fromDate": "2018-01-01 16:00",
        "toDate": "2018-01-01 19:00",
        "color": "#00FF30"
    }
    ]
    ```
    :::note
    Any data that you wish to plot on the XY Chart to build a Gantt Chart needs to come in the format specified by the **schedule_data** property above. 
    :::

6. Set XY Chart's variables **cursor.series** and **scrollbars.horizontal.series** to "schedule data".
7. Set **legend.enabled** to false, to disable the legend. 
8. Set the X axes properties as follows:
    1. Configure the X axes date format by setting the property **xAxes[0].date.format** to be a date format that works for you. For this example, we chose **date** from the dropdown, which sets it to "M/d/yyyy".
    1. Set the properties **xAxes[0].appearance.grid.minDistance** to NULL.
9. Set the Y axes properties as follows:
    1. Delete the **yAxes[1]** property since it will not be used.
    1. Set the property **yAxes[0].name** to "Operator".
    1. Disable the Y axes label by setting the **yAxes[0].label.enabled** property to false.
    1. Set the property **yAxes[0].render** to "category".
    1. Set your **yAxes[0].appearance.grid.position** to "0".
10. Set the series properties as follows:
    1. Delete the **series[1]** property since it will not be used.
    1. Set your **series[0].name** to "schedule data". This links your Horizontal Scroll bar from step 6 to your chart's series.
    1. Set your **series[0].data.source** to "schedule_data". This links your chart's series to your data source from step 4.
    1. Configure your **series[0].data.x** to be "toDate" and your **series[0].data.y** to be "name". 
    1. Configure your **series[0].xAxis** to be "time" and your **series[0].yAxis** to be "Operator". 
    1. Set your **series[0].render** property to "column".
    1. Your **series[0].column.open.x** property must be set to "fromDate".
    1. To help with data visualization, set your **series[0].tooltip.text** to `{name}: [bold]{fromDate} - {toDate}[/]`.
11. Our data includes a key for color, but our chart isn't currently using it. Set **series[0].column.appearance.deriveFieldsFromData.fill.color** to "color". This will map the "color" key in our data source to each block in the chart. 
12. Save your project.
13. Put the Designer into Preview mode to see the chart in action. 

### Example Configuration
The JSON string below can be used to replicate the heatmap example. Simply copy the contents of the code block below (**double-click** on any part of the JSON to select all of it) , and paste it into a container in your Designer. 

```
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "legend": {
        "enabled": false
      },
      "cursor": {
        "series": "mySeries"
      },
      "scrollBars": {
        "horizontal": {
          "series": "mySeries"
        }
      },
      "xAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Time",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "Operator",
          "label": {
            "enabled": false,
            "text": "Process Temp",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "mySeries",
          "label": {
            "text": "Process Temp"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "toDate",
            "y": "name"
          },
          "xAxis": "time",
          "yAxis": "Operator",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{fromDate} - {toDate}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "fromDate",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "color",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {
        "example": [
          {
            "name": "John",
            "fromDate": "2018-01-01 08:00",
            "toDate": "2018-01-01 10:00",
            "color": "#00FF30"
          },
          {
            "name": "John",
            "fromDate": "2018-01-01 12:00",
            "toDate": "2018-01-01 15:00",
            "color": "#FF0030"
          },
          {
            "name": "John",
            "fromDate": "2018-01-01 15:30",
            "toDate": "2018-01-01 21:30",
            "color": "#00FF30"
          },
          {
            "name": "Jane",
            "fromDate": "2018-01-01 09:00",
            "toDate": "2018-01-01 12:00",
            "color": "#00FF30"
          },
          {
            "name": "Jane",
            "fromDate": "2018-01-01 13:00",
            "toDate": "2018-01-01 17:00",
            "color": "#FF0030"
          },
          {
            "name": "Peter",
            "fromDate": "2018-01-01 11:00",
            "toDate": "2018-01-01 16:00",
            "color": "#00FF30"
          },
          {
            "name": "Peter",
            "fromDate": "2018-01-01 16:00",
            "toDate": "2018-01-01 19:00",
            "color": "#00FF30"
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart_1"
    },
    "position": {
      "x": 36.5,
      "y": 271,
      "height": 375,
      "width": 700
    },
    "custom": {}
  }
]
```