Can someone tell me if it is possible to make a chart like this in the XY Chart Tool in Perspective? I tried to make a candlestick with the with each series running from the zone to zone but that does not appear to work?
http://software.es.net/react-timeseries-charts/#/example/trend
I tried creating each swipe as candlestick but that does not seem to work. Any help or pointers to read up more on the xy chart and options would be helpful.
what is not working? what do you see?
I get no bars.
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"xAxes": [
{
"name": "Sample",
"label": {
"enabled": true,
"text": "Time",
"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"
},
"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": "Value",
"label": {
"enabled": true,
"text": "Random\n",
"color": ""
},
"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": "minute",
"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.5
},
"font": {
"size": "",
"weight": 500
}
}
}
],
"series": [
{
"name": "Value",
"label": {
"text": "RandomData"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "Sample",
"y": "Value"
},
"xAxis": "Sample",
"yAxis": "Value",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "candlestick",
"candlestick": {
"open": {
"x": "Sample",
"y": "Value"
},
"high": {
"x": "Sample",
"y": "Zone3UL"
},
"low": {
"x": "Sample",
"y": "Zone3LL"
},
"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": "",
"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": ""
}
}
]
}
}
},
{
"name": "Value",
"label": {
"text": "RandomData"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "Sample",
"y": "Value"
},
"xAxis": "Sample",
"yAxis": "Value",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "step line",
"candlestick": {
"open": {
"x": "Sample",
"y": "Value"
},
"high": {
"x": "Sample",
"y": "Zone3UL"
},
"low": {
"x": "Sample",
"y": "Zone3LL"
},
"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": "",
"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": [
{
"Sample": "1",
"Value": "47",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "2",
"Value": "26",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "3",
"Value": "1",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "4",
"Value": "45",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "5",
"Value": "17",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "6",
"Value": "6",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "7",
"Value": "1",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "8",
"Value": "25",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "9",
"Value": "5",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "10",
"Value": "47",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "11",
"Value": "35",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "12",
"Value": "1",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "13",
"Value": "41",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "14",
"Value": "11",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "15",
"Value": "20",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "16",
"Value": "36",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "17",
"Value": "29",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "18",
"Value": "5",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "19",
"Value": "7",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": "20",
"Value": "42",
"Zone3LL": "0",
"Zone2LL": "7",
"Zone1LL": "15",
"Zone1UL": "35",
"Zone2UL": "43",
"Zone3UL": "50"
},
{
"Sample": ""
}
]
}
},
"meta": {
"name": "XYChart_0"
},
"position": {
"x": 12,
"y": 53,
"height": 657,
"width": 773
},
"custom": {}
}
]
Acutally i think the candle chart doesnt work yet. because candlesticks should have 4 props not 3 :
high open close low
yet ignition has just 3. very weird
Has anyone ever made a candlestick chart? @cmallonee pretty sure this is a bug
I went ahead and changed the title for you
I was able to get this working (after requesting some help form the Dev who implemented the chart). Here are the important pieces for setting up a “standard” candlestick chart:
The object for each data entry will need to supply five pieces of data: date, high, low, open, close. Going forward in my example, we will use those five values as keys.
I have only one entry for xAxes and one entry for yAxes. My xAxes entry is named “dateAxis”, and my yAxes entry is named “valuation”.
With those aforementioned settings in place, the following configuration displayed a candlestick chart.
series.data.y is set to close, and that there is no candlestick.close property. I have no idea why it was implemented this way, but I suspect it was because the underlying library probably requires a y value be supplied, and so in some way it made sense to default to that y value for the close. 
We are aware of this issue reported recently in regard to the “low” value always appearing to be 0.
Can the requirement for the x-axis be a date be changed to allow it to be categories? Can we improve the documentation? None of this explained in the documentation.
Thanks (sorry for the rant), I am normally a fan of most things Inductive Automation and Ignition.
i agree this example should be in the docs too, as it only has 2 examples and this candlestick definitly needs one as its quite different^^
For posterity, I ended up incorporating Cody’s example into the user manual.
