I have Binded the whole chart Property configuration kindly give suggestions to locate the correct value with respect to Xaxis time
I need all the time to plot in the Xaxis kindly give suggestions.
- XY Chart Configurations
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"title": {
"text": "Hourwise Energy (kWh)",
"appearance": {
"color": "#000000",
"font": {
"size": 20,
"weight": 1000
},
"padding": {
"bottom": 5,
"left": 15,
"right": 10
}
}
},
"legend": {
"enabled": false,
"markers": {
"width": 10,
"height": 3,
"stroke": {
"color": "#000000"
}
},
"labels": {
"font": {
"weight": 1000,
"size": 15,
"color": "#000000"
}
}
},
"cursor": {
"series": "example",
"lineX": {
"stroke": {
"color": "#2B2B2B",
"width": 0.5
}
},
"lineY": {
"stroke": {
"color": "#2B2B2B",
"width": 0.5
}
}
},
"enableTransitions": true,
"xAxes": [
{
"name": "time",
"label": {
"enabled": false,
"text": "Time",
"color": "#2B2B2B"
},
"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": true,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "HH:mm:ss",
"format": "hh:mma"
},
"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": "#000000",
"opacity": 2,
"position": 90,
"rotation": 45
},
"grid": {
"color": "#2B2B2B",
"opacity": 0.5,
"dashArray": "",
"minDistance": 90,
"position": 0.5
},
"font": {
"size": 18,
"weight": 1000
}
}
}
],
"yAxes": [
{
"name": "KWH1",
"label": {
"enabled": true,
"text": "kWh",
"color": "#000000"
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "value",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": true
},
"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": "#2B2B2B",
"opacity": 1
},
"grid": {
"color": "",
"opacity": 0.5,
"dashArray": "",
"minDistance": null,
"position": 0.2
},
"font": {
"size": 18,
"weight": 1000
}
}
}
],
"series": [
{
"name": "KWH1",
"label": {
"text": "Energy"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "time",
"y": "KWH1"
},
"xAxis": "time",
"yAxis": "KWH1",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]\nDate:[bold]{dateX}[/]",
"cornerRadius": 1,
"pointerLength": 1,
"background": {
"color": "#2B2B2B",
"opacity": 1
}
},
"render": "line",
"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": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"width": null,
"height": null,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": 0,
"y": 0
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 2,
"opacity": 2,
"color": "#2B2B2B",
"dashArray": ""
},
"fill": {
"opacity": 0.5,
"color": "#CCCCFF"
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 2,
"height": 2,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "#8A8AFF",
"opacity": 2
},
"stroke": {
"color": "#000000",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]\nDate:[bold]{dateX}[/]\nTime:[bold]{dateX.formatDate('HH:mm:ss')}[/]",
"cornerRadius": 3,
"pointerLength": 3,
"background": {
"color": "#8A8AFF",
"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": ""
}
}
]
}
}
}
],
"style": {
"backgroundColor": "#D5D5D5",
"color": "#000000",
"fontSize": 20,
"fontWeight": "bold"
},
"dataSources": {}
},
"meta": {
"name": "XYChart"
},
"position": {
"x": 13.907540000000001,
"y": 12.911142089843793,
"height": 316,
"width": 802
},
"custom": {},
"propConfig": {
"props.dataSources.example": {
"binding": {
"config": {
"parameters": {
"bg": "{.../BG_Dropdown.props.value}",
"ll": "{.../Line_Dropdown.props.value}",
"ma": "{.../Machine_Dropdown.props.value}",
"pl": "{.../Plant_Dropdown.props.value}",
"sp": "dateArithmetic({.../DateTimeInput.props.value}, 25, \"hours\")",
"st": "dateArithmetic({.../DateTimeInput.props.value},0,\"hours\")"
},
"polling": {
"enabled": true,
"rate": "300"
},
"queryPath": "HalfNHour",
"returnFormat": "dataset"
},
"type": "query"
}
}
}
}
]
2.Dataset configurations
{
"example": {
"$": [
"ds",
192,
1698214706770
],
"$columns": [
{
"name": "time",
"type": "Date",
"data": [
1698193801343,
1698197401487,
1698201001357,
1698204601123,
1698208201007,
1698211801317
]
},
{
"name": "kwh",
"type": "String",
"data": [
"4.89372e+007",
"4.89382e+007",
"4.89391e+007",
"4.89398e+007",
"4.89403e+007",
"4.89408e+007"
]
},
{
"name": "KWH1",
"type": "Double",
"data": [
null,
1000.0,
900.0,
700.0,
500.0,
500.0
]
}
]
}
}
