Here is the JSON of the example shown above. You can paste it into the view.
Example XY
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"xAxes": [
{
"name": "time",
"label": {
"enabled": true,
"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": 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": "h a dd MMM"
},
"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
}
},
"renderer": {
"labels": {
"template": {
"wrap": true,
"maxWidth": 80
}
}
}
}
],
"yAxes": [
{
"name": "flow",
"label": {
"enabled": true,
"text": "Flow",
"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": "",
"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
}
}
}
],
"series": [
{
"name": "Flow",
"label": {
"text": "Flow"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "Timestamp",
"y": "Flow"
},
"xAxis": "time",
"yAxis": "flow",
"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
},
"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": [
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717547400000
},
"Flow": 1.399999976158142
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717551000000
},
"Flow": 1.25
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717554600000
},
"Flow": 1.100000023841858
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717558200000
},
"Flow": 1.5
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717561800000
},
"Flow": 2
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717565400000
},
"Flow": 1.7999999523162842
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717569000000
},
"Flow": 1.100000023841858
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717572600000
},
"Flow": 0.8999999761581421
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717576200000
},
"Flow": 0.8500000238418579
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717579800000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717583400000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717587000000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717590600000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717594200000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717597800000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717601400000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717605000000
},
"Flow": 1.100000023841858
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717608600000
},
"Flow": 0.8999999761581421
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717612200000
},
"Flow": 0
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717615800000
},
"Flow": 0.20000000298023224
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717619400000
},
"Flow": 0.30000001192092896
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717623000000
},
"Flow": 0.5
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717626600000
},
"Flow": 0.800000011920929
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717630200000
},
"Flow": 1
},
{
"Timestamp": {
"$": [
"ts",
192,
1718342995379
],
"$ts": 1717633800000
},
"Flow": 1.399999976158142
}
]
}
},
"meta": {
"name": "XYChart"
},
"position": {
"x": -3,
"y": 61,
"height": 377,
"width": 801
},
"custom": {}
}
]
If you have different data, please post a few samples here so that other volunteers can help brainstorm solutions.