Hello all, I am using XY chart, facing the above problem, chart last value is overlapping while binding the live data, i gave the data to chart like below,
Please response, thanks in advance
Please post the XY Chart JSON so we can reproduce the fault. (Project Browser → XY Chart → Right-click → Copy, paste it in here and format it using the </> button.
We will need the dataSources too so if that is created by a binding then please copy and paste that here as well. Again, format it using the </> button.
@Transistor , i am facing this error...so,i split the xy chart code into two parts this is first half
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"title": {
"text": "Target 480",
"appearance": {
"color": "#2B2B2B",
"font": {
"size": "1vw"
}
}
},
"legend": {
"enabled": false
},
"cursor": {
"enabled": false
},
"xAxes": [
{
"name": "time",
"label": {
"enabled": true,
"text": "Time",
"color": "#000000"
},
"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"
},
"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": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 0,
"dashArray": "",
"minDistance": 60,
"position": 0.5
},
"font": {
"size": "1vw",
"weight": 900
}
}
}
],
"yAxes": [
{
"name": "process temp",
"label": {
"enabled": true,
"text": "Lites",
"color": "#2B2B2B"
},
"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": 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": 500,
"min": 0,
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 344,
"size": 0
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "#000000",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 0,
"dashArray": "",
"minDistance": null,
"position": 0.5
},
"font": {
"size": "1vw",
"weight": 500
}
}
}
],
"series": [
{
"name": "Good",
"label": {
"text": ""
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "t_stamp",
"y": "Good"
},
"xAxis": "time",
"yAxis": "process temp",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "Good: [bold]{valueY}[/]",
"cornerRadius": 10,
"pointerLength": 10,
"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": "good",
"y": ""
},
"appearance": {
"fill": {
"color": "#249cff",
"opacity": 0.9
},
"stroke": {
"color": "#47FFFF",
"opacity": 1,
"width": 1
},
"stacked": true,
"width": 50,
"height": null,
"deriveFieldsFromData": {
"fill": {
"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": "#0f6eac",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": true,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": 30
},
"open": {
"x": "",
"y": ""
}
},
This is second half,
"data": {
"source": "example",
"x": "t_stamp",
"y": "Rejected"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "Rejected"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"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": ""
}
},
"name": "Rejected",
"render": "column",
"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": 10,
"enabled": false,
"pointerLength": 10,
"text": "Rejected: [bold]{valueY}[/]"
},
"visible": false,
"xAxis": "time",
"yAxis": "process temp",
"zIndex": 0
},
{
"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": "#000080",
"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": "example",
"x": "t_stamp",
"y": "Target"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "Target"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"fill": {
"color": "#0EECEC",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 10,
"dy": 10
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 10,
"enabled": true,
"pointerLength": 10,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "#158ef9",
"dashArray": "4 2",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": 0,
"y": 0
}
},
"name": "Target",
"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": 10,
"enabled": true,
"pointerLength": 10,
"text": "{name}: [bold]{valueY}[/]"
},
"visible": true,
"xAxis": "time",
"yAxis": "process temp",
"zIndex": 0
},
{
"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": "#249CFF",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": true,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": 30
},
"open": {
"x": "good",
"y": ""
}
},
"data": {
"source": "example",
"x": "t_stamp",
"y": "Good"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": true,
"label": {
"text": ""
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "#00458b",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 1,
"label": {
"position": {
"dx": 0,
"dy": -10
},
"text": "{Good}"
},
"render": "label",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 5
},
"tooltip": {
"background": {
"color": "#249cff",
"opacity": 1
},
"cornerRadius": 3,
"enabled": false,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 1
}
],
"connect": false,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 0,
"width": 0
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"name": "Good",
"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": 10,
"enabled": true,
"pointerLength": 10,
"text": "Good: [bold]{valueY}[/]"
},
"visible": true,
"xAxis": "time",
"yAxis": "process temp",
"zIndex": 0
}
],
"style": {
"borderBottomLeftRadius": 0,
"borderBottomRightRadius": 0,
"borderTopLeftRadius": 0,
"borderTopRightRadius": 0,
"fontSize": "1.25vw",
"fontWeight": "600"
},
"dataSources": {}
},
"meta": {
"name": "XYChart"
},
"position": {
"x": 0.0306,
"y": 0.4488,
"height": 0.5189,
"width": 0.9387
},
"custom": {},
"propConfig": {
"props.dataSources.example": {
"binding": {
"config": {
"struct": {
"key": "{[G506_E1A191_SOLARGLASS_MES]Production/Current_Shift_Details/Line 2/Furnace/last_8_hours_output}",
"wc": "{view.params.workcenter}"
},
"waitOnAll": false
},
"transforms": [
{
"code": "\tsystem.perspective.sendMessage('line_running_status', {\"run_status\": system.tag.readBlocking(\"[G506_E1A191_SOLARGLASS_MES]UI/Line status/Line2 Furnace running status\")[0].value})\n\tworkcenter = str(self.view.params.workcenter)\n\tvalue = []\n\tif workcenter == '5061':\n\t\tvalue = system.tag.readBlocking(\"[G506_E1A191_SOLARGLASS_MES]Production/Current_Shift_Details/Line 1/PPL/last_8_hours_output\")[0].value[\"output\"]\n\tif workcenter == '5062':\n\t\tvalue = system.tag.readBlocking(\"[G506_E1A191_SOLARGLASS_MES]Production/Current_Shift_Details/Line 1/Furnace/last_8_hours_output\")[0].value[\"output\"]\n\tif workcenter == '5063':\n\t\tvalue = system.tag.readBlocking(\"[G506_E1A191_SOLARGLASS_MES]Production/Current_Shift_Details/Line 2/PPL/last_8_hours_output\")[0].value[\"output\"]\n\tif workcenter == '5064':\n\t\tvalue = system.tag.readBlocking(\"[G506_E1A191_SOLARGLASS_MES]Production/Current_Shift_Details/Line 2/Furnace/last_8_hours_output\")[0].value[\"output\"]\n\treturn value\n\t\t",
"type": "script"
}
],
"type": "expr-struct"
}
}
}
}
]
This is datasource of the XY Chart,
[
{
"t_stamp": "09:00",
"Rejected": 0,
"Target": 480,
"Good": 361
},
{
"t_stamp": "10:00",
"Rejected": 0,
"Target": 480,
"Good": 355
},
{
"t_stamp": "11:00",
"Rejected": 0,
"Target": 480,
"Good": 293
},
{
"t_stamp": "12:00",
"Rejected": 0,
"Target": 480,
"Good": 366
},
{
"t_stamp": "13:00",
"Rejected": 0,
"Target": 480,
"Good": 342
},
{
"t_stamp": "14:00",
"Rejected": 0,
"Target": 480,
"Good": 22
},
{
"t_stamp": "15:00",
"Rejected": 0,
"Target": 480,
"Good": 340
},
{
"t_stamp": "16:00",
"Rejected": 0,
"Target": 480,
"Good": 325
},
{
"t_stamp": "17:00",
"Rejected": 0,
"Target": 480,
"Good": 305
}
]
Okay @Transistor Thanks, I'm working with 8.1.33
If anyone comes with solution, Thanks in advance...
below problem i faced,
Hello I am unfortunatelly having same problem:
It's not realy easy to reproduce, because data is computed based on actual datetime and start of machine work (that comes from OPC). Problem is mainly when the window is inactive and then when i return it looks like this. When new value comes in, the values are correctly re-rendered.
Result in HTML looks like this:
I guess you need changing values and the window to be inactive.
Do you have any duplicated data?
Are all nulls handled correctly?
Does the number of values in the series and the bullets match?
I vaguely remember having a similar issue that went away when I worked on my queries if I recall correctly, or maybe it was an update that fixed it, I am on 39.