I would like to display the Name of the day of the week. I would like to only show one item on the x-axis for each day. (not Monday Monday Monday Tuesday Tuedsay .. etc) Or even just the date, but one time. I assume this is set somewhere about the date.format value but I don't know how to bind to it properly from the date source series.
Is there a way to clean up the Gantt chart format?
Is there a way to only show one day per date?
Is there a way to show the date as the name of the day?
You should be able to use EEEE in props.xAxes.0.date.format
edit: EEE if you want "Mon" instead of "Monday" The component uses Dates | Ignition User Manual
It may be your data or a chart configuration, it would be more helpful if you could paste your configuration and wrap it in ``` to form a code block along with some sample data.
Thank you. I will post config and sample data shortly.
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"legend": {
"enabled": false
},
"cursor": {
"enabled": false,
"series": "schedule_data"
},
"scrollBars": {
"horizontal": {
"enabled": false,
"series": "schedule_data"
},
"vertical": {
"enabled": false
}
},
"xAxes": [
{
"name": "Date",
"label": {
"enabled": false,
"text": "Production Week",
"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.5
}
},
"date": {
"baseInterval": {
"enabled": true,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": true
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.5
},
"inputFormat": "M/d/yyyy",
"format": "EEE"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": true,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": true,
"inside": false,
"labels": {
"color": "",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": 0,
"position": 0
},
"font": {
"size": "",
"weight": 100
}
}
}
],
"yAxes": [
{
"name": "Work Center",
"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.5
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "day",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.5
},
"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,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": null,
"position": 0
},
"font": {
"size": "",
"weight": 500
}
}
}
],
"series": [
{
"name": "schedule_data",
"label": {
"text": "Process Temp"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "schedule_data",
"x": "toDate",
"y": "name"
},
"xAxis": "Date",
"yAxis": "Work Center",
"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": ""
}
}
]
}
}
},
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": null
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "schedule_data",
"x": "fromDate",
"y": "name"
},
"defaultState": {
"visible": false
},
"hiddenInLegend": false,
"label": {
"text": "hhhh"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 50,
"dy": 0
},
"text": "[White Left Bold] {Label}"
},
"render": "label",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 0,
"enabled": false,
"pointerLength": 0,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": false,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.05,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 0
},
"tensionX": 0,
"tensionY": 0
},
"open": {
"x": 0,
"y": 0
}
},
"name": "LabelSrs",
"render": "line",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": false,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"visible": true,
"xAxis": "Date",
"yAxis": "Work Center",
"zIndex": 0
}
],
"dataSources": {
"schedule_data": [
{
"Label": "8.5Hrs 17:30",
"color": "#00FF30",
"fromDate": "2018-01-01 08:00:00.000",
"name": "John",
"toDate": "2018-01-01 10:00:00.000"
},
{
"Label": "8.5Hrs 17:30",
"color": "#FF0030",
"fromDate": "2018-01-03 12:00",
"name": "John",
"toDate": "2018-01-03 15:00"
},
{
"Label": "8.5Hrs 17:30",
"color": "#00FF30",
"fromDate": "2018-01-01 15:30",
"name": "John",
"toDate": "2018-01-01 21:30"
},
{
"Label": "value",
"color": "#00FF30",
"fromDate": "2018-01-01 09:00",
"name": "Jane",
"toDate": "2018-01-01 12:00"
},
{
"Label": "value",
"color": "#FF0030",
"fromDate": "2018-01-01 13:00",
"name": "Jane",
"toDate": "2018-01-01 17:00"
},
{
"Label": "value",
"color": "#00FF30",
"fromDate": "2018-01-01 11:00",
"name": "Peter",
"toDate": "2018-01-01 16:00"
},
{
"Label": "value",
"color": "#00FF30",
"fromDate": "2018-01-02 16:00",
"name": "Peter",
"toDate": "2018-01-02 19:00"
},
{
"Label": "8.5Hrs 17:30",
"color": "#00FF30",
"fromDate": "09:00",
"name": "JEff",
"toDate": "2018-01-02 02:00"
}
]
},
"value": {
"$": [
"ts",
192,
1776106610923
],
"$ts": 1776052800000
}
},
"meta": {
"name": "XYChart"
},
"position": {
"x": 1.5,
"y": 32,
"height": 821,
"width": 1479
},
"custom": {},
}
]
With real data, I can't get the Days to only group by Days. There is only one Monday per week.
I will probably create another post, but I can't figure out how to style the "bullet" labels to left justify on each heatmap as well.
I am starting to think this is not possible with XY Charts. Would someone please help if it is possible.