Good afternoon,
in an XY Chart in perspective I have the problem that the data are shown wrong when I change the baseInterval count in the xAxes properties.
The problem is that the data are not consistent with the xAxes label:
Here the video.
Try playing with xAxes.0.appearance.grid.position.
It defaults to 0.5. You might get what you want with 0.25 or 0.75.
This also interacts with xAxes.0.appearance.grid.minDistance which determines how many gridlines you get.
If you're going to change the count you may want to change the above two properties by an expression binding based on the count value.
The XY Chart is based on https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#location-of-axis-elements and that link will take you to the 'location of axis section' which states:
Basic location
Each axis element has a settinglocationwhich is a relative number from0(zero) meaning the start of the cell to1(one) denoting end of the cell.
So, if we'd like our grid to to be displayed in the middle of the cell, rather than default start position, we would setlocationto0.5
Thanks for the suggestion, I'll play with the 2 props.
I’m already using an expression on the count based on the xAxes range, I will do the same with the other 2 props and I'll update you.
Have a nice weekend.
I'm going crazy running tests; it seems that even when I change minDistance and position, nothing ever changes when the count property change from 1 to a higher number, the data starts shifting and there's no way to get them back in sync.
The dataset I'm passing is quite simple: Date on the X-axis (the data is day by day) and value on the Y-axis.
The point is that I have to modify the count property, because otherwise, if you set more than one month, the X-axis becomes absolutely unreadable.
If you have any ideas, they’re more than welcome, because I don’t know what else to try.
Can you post your XY Chart object and your dataSources here so we can reproduce? Please see Wiki - how to post code on this forum. You can use the Hide Details to keep your post compact.
PROPS.dataSources and copy. Format as shown...Of course, thanks for your time.
In the XY chart is already present the dataset, but in any case I past also the dataSources.
Is missing the binding to xAxes.0.date.baseInterval.count that is calculated, but you will see that in you set the property to 1 it works good, if you change to 2 or more the problem appear.
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"title": {
"appearance": {
"color": "black",
"font": {
"size": 20,
"weight": 800
},
"padding": {
"bottom": 10
}
}
},
"cursor": {
"series": "resa",
"lineX": {
"stroke": {
"color": "#6DA2E3",
"width": 0.6,
"opacity": 1,
"dashArray": "''"
}
},
"lineY": {
"stroke": {
"color": "#6DA2E3",
"width": 0.6,
"opacity": 1,
"dashArray": "''"
}
}
},
"enableTransitions": true,
"background": {
"render": "color",
"color": "#E5E0DF"
},
"xAxes": [
{
"name": "Data",
"label": {
"enabled": false,
"text": "Time",
"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.05
}
},
"date": {
"baseInterval": {
"enabled": true,
"timeUnit": "day",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd",
"format": "d/M"
},
"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": "black",
"opacity": 0.8,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "black",
"opacity": 0.3,
"dashArray": "",
"minDistance": 0,
"position": 0
},
"font": {
"size": "clamp(8px, calc(0.5*(1vmax + 1vmin)), 15px)",
"weight": 0
}
}
}
],
"yAxes": [
{
"name": "Totale_Rotture_Giorno",
"label": {
"enabled": false,
"text": "",
"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": "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": 0,
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "black",
"opacity": 0.8,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "black",
"opacity": 0.3,
"dashArray": "",
"minDistance": null,
"position": 0.5
},
"font": {
"size": "clamp(8px, calc(0.5*(1vmax + 1vmin)), 15px)",
"weight": 0
}
}
}
],
"series": [
{
"name": "Rotture",
"label": {
"text": ""
},
"visible": false,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "data",
"x": "Data",
"y": "Totale_Rotture"
},
"xAxis": "Data",
"yAxis": "Totale_Rotture_Giorno",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "",
"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
},
"stacked": false,
"width": null,
"height": null,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "",
"y": 0
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "#003A56",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "#003A56",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "Giorno: [bold] {dateX.formatDate('dd/MM/yyyy')} [/]\nRotture: [bold] {Totale_Rotture} [/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 0,
"dataField": ""
}
},
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 20
},
"text": "[font-size:0.7rem black] {valueY}"
},
"render": "label",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"width": 10,
"enabled": true
}
]
}
},
"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": "data",
"x": "Data",
"y": "Trend_Totale_Rotture"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": ""
},
"line": {
"appearance": {
"bullets": ,
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "red",
"dashArray": "",
"opacity": 1,
"width": 1
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": 0
}
},
"name": "Linea tendenza",
"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": true,
"pointerLength": 4,
"text": ""
},
"visible": false,
"xAxis": "Data",
"yAxis": "Totale_Rotture_Giorno",
"zIndex": 0
}
],
"style": {
"borderColor": "#00ABEB",
"borderStyle": "solid",
"borderWidth": "2px"
},
"dataSources": {
"data": {
"$": [
"ds",
192,
1763926871555
],
"$columns": [
{
"name": "Data",
"data": [
1761343200000,
1761429600000,
1761519600000,
1761606000000,
1761692400000,
1761778800000,
1761865200000,
1761951600000,
1762038000000,
1762124400000,
1762210800000,
1762297200000,
1762383600000,
1762470000000,
1762556400000,
1762642800000,
1762729200000,
1762815600000,
1762902000000,
1762988400000,
1763074800000,
1763161200000,
1763247600000,
1763334000000,
1763420400000,
1763506800000,
1763593200000,
1763679600000,
1763766000000,
1763852400000
],
"type": "Date"
},
{
"name": "Totale_Rotture",
"data": [
76,
91,
64,
57,
57,
72,
64,
69,
53,
48,
45,
54,
49,
39,
52,
36,
39,
48,
53,
59,
56,
44,
48,
39,
37,
65,
37,
46,
47,
13
],
"type": "Integer"
},
{
"name": "Trend_Totale_Rotture",
"data": [
66.77931034482758,
65.81231527093595,
64.84532019704433,
63.8783251231527,
62.911330049261075,
61.94433497536945,
60.977339901477826,
60.0103448275862,
59.04334975369457,
58.07635467980295,
57.10935960591132,
56.1423645320197,
55.175369458128074,
54.20837438423644,
53.24137931034482,
52.274384236453194,
51.30738916256157,
50.34039408866994,
49.373399014778315,
48.40640394088669,
47.439408866995066,
46.47241379310344,
45.50541871921182,
44.538423645320194,
43.57142857142856,
42.60443349753694,
41.63743842364531,
40.67044334975368,
39.70344827586206,
38.736453201970434
],
"type": "Double"
}
]
}
}
},
"meta": {
"name": "XYChart_Rotture"
},
"position": {
"position": "left"
},
"custom": {},
"propConfig": {
"props.dataSources.data": {
"binding": {
"type": "property",
"enabled": false,
"config": {
"path": "view.custom.chart_data.data"
}
}
}
}
}
]
{
"data": {
"$": [
"ds",
192,
1763927069644
],
"$columns": [
{
"name": "Data",
"type": "Date",
"data": [
1761343200000,
1761429600000,
1761519600000,
1761606000000,
1761692400000,
1761778800000,
1761865200000,
1761951600000,
1762038000000,
1762124400000,
1762210800000,
1762297200000,
1762383600000,
1762470000000,
1762556400000,
1762642800000,
1762729200000,
1762815600000,
1762902000000,
1762988400000,
1763074800000,
1763161200000,
1763247600000,
1763334000000,
1763420400000,
1763506800000,
1763593200000,
1763679600000,
1763766000000,
1763852400000
]
},
{
"name": "Totale_Rotture",
"type": "Integer",
"data": [
76,
91,
64,
57,
57,
72,
64,
69,
53,
48,
45,
54,
49,
39,
52,
36,
39,
48,
53,
59,
56,
44,
48,
39,
37,
65,
37,
46,
47,
13
]
},
{
"name": "Trend_Totale_Rotture",
"type": "Double",
"data": [
66.77931034482758,
65.81231527093595,
64.84532019704433,
63.8783251231527,
62.911330049261075,
61.94433497536945,
60.977339901477826,
60.0103448275862,
59.04334975369457,
58.07635467980295,
57.10935960591132,
56.1423645320197,
55.175369458128074,
54.20837438423644,
53.24137931034482,
52.274384236453194,
51.30738916256157,
50.34039408866994,
49.373399014778315,
48.40640394088669,
47.439408866995066,
46.47241379310344,
45.50541871921182,
44.538423645320194,
43.57142857142856,
42.60443349753694,
41.63743842364531,
40.67044334975368,
39.70344827586206,
38.736453201970434
]
}
]
}
}
You forgot to format the XY Chart JSON as code, so the copy to clipboard doesn't appear, the post is very long and all the indentation is lost. (You can edit to fix.)
I also couldn't paste it into Designer which made me suspect a JSON error. Pasting it into the https://jsonlint.com validator revealed the problem:
"bullets": , to "bullets": null, sorted that out.
I'm still not sure how you want this to look.
I'm playing around with xAxes.0.appearance.labels.hoizontalCenter : left | middle | right but left and right appear reversed to me.
Does this help?
I can’t figure out how to copy the XY chart as JSON, how can I do this?
About the bullets I guess the error that you show is supposed to come out from the series 1 where there are no bullets configured, but I have no error on this. I just add the 2 bullets indexes on the series 0 so to render the circle and the labels.
I have all my data saved once per day, so format shows always the midnight because I don’t care about the hours.
The gridlines I would like to exist only when the day in the xAxes is shown.
I’m doing some test with your configuration, if I set count: 2 they are perfect, if I try with count: 3 the result is not good, you don’t really understand the day of the bullets, is not intuitive at all, even changing minDistance and position properties.
Sorry, I don't think I can help further. I've just noticed that the dataset timestamps are all 23:00:00. You have the date.baseInterval : day so that seems to strip off everything else.
I wonder if you should be using the Timeseries Chart component instead.
Don't worry, you've helped me a lot so far, and I really appreciate your time.
One last question: where do you see the 23:00:00 timestamp? Because in my 'Date' column, I have 00:00:00.
Anyway, yes, you're right. I'll try using the Timeseries Chart now and see what changes. I'll keep you updated. Thanks again.
I’m making some test with Time Series Chart.
With this chart the X and Y data are consistent, I add 2 trends
type: lines
type: scatter
to simulate the same results as the picture above, the problem is that I’m not able to show the label next to the bullets as in the XY chart, and I can’t find anything on the forum about this.
