Hello,
I am using Perspective to create a chart. I needed someone to explain how to change the X axis to the values of a tag. What properties do I change and what type of binding would I use?
The XY Chart needs to be supplied with a datasource. Drop an XY Chart into a view and you will see the sample data in the Perspective Property Editor under PROPS.dataSources.example.
Study that and how the axes are using the data.
If you have further questions then post a set of data here and format it as code. Your dataset will need to have at least two columns - one for the X-axis and one for the Y-axis.
Hello,
Is a dataset necessary? Right now, I have 2 tags. I would like to use the value of tag 1 for the x axis and the value of tag 2 for the y axis??
Do you mean, "I want to plot a single point on an XY Chart. Tag1 will provide the X-coordinate and Tag2 will provide the Y-coordinate."?
If so, yes, you will still need a datasource (which is not the same thing as a dataset).
- Create a new dataSource array. I've called mine
pointData. - In that, add an object. It should show up as
0. - In
0add valuesxandy. - Create a tag binding on
xto Tag1. - Create a tag binding on
yto Tag2.
You'll then have to sort out the series properties to use these values.
If you get stuck then post the chart JSON here. See Wiki - how to post code on this forum.
No, sorry for the confusion. I was hoping that with the tag history I would be able to create a line graph. Using the tag history of tag 1 and tag 2.
This is the first mention of "tag history" in the thread. You need to define your requirements much more clearly.
Are you now saying, "I want to plot on an XY Chart a line showing the history of Tag2 (y-value) as a function of Tag1 (x-value)."?
If so, then,
- Create a new datasource,
pointData. - Create a Tag History binding on the array.
- Return Format : Wide.
- Set Query Mode as required.
- Set Time Range : Historical.
- Enter the Start Date and End Date manually for now.
- In Select Tags add the two tags using the tag picker. Set the alias of Tag1 to
xand Tag2 toy.
This will return a dataset with three columns, t_stamp (which you won't use), x and y.
Check that you have set,
series
0
data
source : <-- name of your dataSource>
x : x <-- This will use the x-values of your dataSource.
y : y <-- This will use the y-values of your dataSource.
Thank you for that suggestion! I have added that to the properties. I don't receive an error, now it is just blank!
I was able to reproduce what you're showing. I don't know why but changing the binding alias and updating the Series-Data-y and Series-Data-x parameters solved it.
1 Like
I have changed the alias names and now I am getting the x and y x is which is great, but I am still not getting the line.
Can you copy the chart object and paste it into a post? Wiki - how to post code on this forum.
Then copy the dataSources and post those too (as we won't get any data otherwise since the database binding won't work on our installations).
1 Like
Did you also change the Series Data to reflect your alias changes like in my second screenshot?
They need to be the exact same and seem to be case sensitive.
Either that or an empty dataset seem to be what can cause this behaviour but pasting your component as a code here will elucidate that
{
"$": [
"ds",
192,
1732565425879
],
"$columns": [
{
"name": "t_stamp",
"type": "Date",
"data": [
1732559083178,
1732559119178,
1732559155178,
1732559191178,
1732559227178,
1732559263178,
1732559299178,
1732559335178,
1732559371178,
1732559407178,
1732559443178,
1732559479178,
1732559515178,
1732559551178,
1732559587178,
1732559623178,
1732559659178,
1732559695178,
1732559731178,
1732559767178,
1732559803178,
1732559839178,
1732559875178,
1732559911178,
1732559947178,
1732559983178,
1732560019178,
1732560055178,
1732560091178,
1732560127178,
1732560163178,
1732560199178,
1732560235178,
1732560271178,
1732560307178,
1732560343178,
1732560379178,
1732560415178,
1732560451178,
1732560487178,
1732560523178,
1732560559178,
1732560595178,
1732560631178,
1732560667178,
1732560703178,
1732560739178,
1732560775178,
1732560811178,
1732560847178,
1732560883178,
1732560919178,
1732560955178,
1732560991178,
1732561027178,
1732561063178,
1732561099178,
1732561135178,
1732561171178,
1732561207178,
1732561243178,
1732561279178,
1732561315178,
1732561351178,
1732561387178,
1732561423178,
1732561459178,
1732561495178,
1732561531178,
1732561567178,
1732561603178,
1732561639178,
1732561675178,
1732561711178,
1732561747178,
1732561783178,
1732561819178,
1732561855178,
1732561891178,
1732561927178,
1732561963178,
1732561999178,
1732562035178,
1732562071178,
1732562107178,
1732562143178,
1732562179178,
1732562215178,
1732562251178,
1732562287178,
1732562323178,
1732562359178,
1732562395178,
1732562431178,
1732562467178,
1732562503178,
1732562539178,
1732562575178,
1732562611178,
1732562647178
]
},
{
"name": "Columnx",
"type": "Long",
"data": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
},
{
"name": "Columny",
"type": "Long",
"data": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
}
]
}
[
{
"name": "x",
"label": {
"enabled": true,
"text": "x",
"color": ""
},
"inversed": false,
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"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"
},
"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": 60,
"position": 0.5
},
"font": {
"size": "",
"weight": 500
}
}
}
]
[
{
"name": "y",
"label": {
"enabled": true,
"text": "y",
"color": ""
},
"inversed": false,
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"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": "",
"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.5
},
"font": {
"size": "",
"weight": 500
}
}
}
]
[
{
"name": "y",
"label": {
"text": "y"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "pointData",
"x": "Columnx",
"y": "Columny"
},
"xAxis": "x",
"yAxis": "y",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"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
},
"width": null,
"height": null,
"stacked": false,
"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": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": false,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"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": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
}
]
Yes, I did make that change
Thanks for posting the code.
Look at your dataset in the first code block. All the Columnx and Columny values are null! That would explain the empty chart.
Use the dataset viewer button beside your dataSource to see what's going on.
1 Like