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:
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:
-
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.
-
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.
-
From the Perspective Component Palette, drag and drop a XY Chart onto your newly created view.
-
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.
-
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"
}
]noteAny 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.
-
Set XY Chart's variables cursor.series and scrollbars.horizontal.series to "schedule data".
-
Set legend.enabled to false, to disable the legend.
-
Set the X axes properties as follows:
- 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".
- Set the properties xAxes[0].appearance.grid.minDistance to NULL.
-
Set the Y axes properties as follows:
- Delete the yAxes[1] property since it will not be used.
- Set the property yAxes[0].name to "Operator".
- Disable the Y axes label by setting the yAxes[0].label.enabled property to false.
- Set the property yAxes[0].render to "category".
- Set your yAxes[0].appearance.grid.position to "0".
-
Set the series properties as follows:
- Delete the series[1] property since it will not be used.
- Set your series[0].name to "schedule data". This links your Horizontal Scroll bar from step 6 to your chart's series.
- Set your series[0].data.source to "schedule_data". This links your chart's series to your data source from step 4.
- Configure your series[0].data.x to be "toDate" and your series[0].data.y to be "name".
- Configure your series[0].xAxis to be "time" and your series[0].yAxis to be "Operator".
- Set your series[0].render property to "column".
- Your series[0].column.open.x property must be set to "fromDate".
- To help with data visualization, set your series[0].tooltip.text to
{name}: [bold]{fromDate} - {toDate}[/].
-
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.
-
Save your project.
-
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": {}
}
]