Time Axis Format with Appsmith and a Custom Fustion Chart - scatter

Question

I use a Custom Fusion Chart (Scatter) and I have loaded the data I want to display. I stick to the required x, y format with my data. I would now like to scatter the data along a time axis (x). The import of the data works like a charm, but the axis looks like it just uses the x value as String/Integer. Does anyone have an idea how to properly format the x-axis or the data to be a time axis?
What I also found out that by using regular charts it looks a bit better but the time-stamps do not scale properly across the x-axis (can be seen in the 2nd image).
The json for the custom chart:
{
"type": "scatter",
"dataSource": {
"chart": {
"caption": "Axes",
"subCaption": "Aggregated History",
"baseFont": "Helvetica Neue,Arial",
"xAxisName": "Date",
"yAxisName": "Price",
"theme": "fusion"
},
"categories": [],
"dataset": [
{
"seriesname": "Offer",
"showregressionline": "0",
"data": [
{
"x": "2022-01-20T13:50:00Z",
"y": 105.316
},
{
"x": "2022-02-01T11:16:00Z",
"y": 104.64
},
{
"x": "2022-02-01T11:16:00Z",
"y": 104.64
},
{
"x": "2022-02-01T12:18:00Z",
"y": 104.599
},
{
"x": "2022-02-01T12:18:00Z",
"y": 104.599
},
{
"x": "2022-02-01T12:19:00Z",
"y": 104.564
},
{
"x": "2022-02-01T12:49:00Z",
"y": 104.608
},
{
"x": "2022-02-01T12:49:00Z",
"y": 104.572
},
{
"x": "2022-02-01T13:03:00Z",
"y": 104.56
},
{
"x": "2022-02-01T13:19:00Z",
"y": 104.593
}
]
},
{
"seriesname": "Bid",
"showregressionline": "0",
"data": [
{
"x": "2022-02-14T13:47:00Z",
"y": 102.415
},
{
"x": "2022-02-14T13:47:00Z",
"y": 102.415
},
{
"x": "2022-02-14T13:47:00Z",
"y": 102.415
},
{
"x": "2022-02-14T14:17:00Z",
"y": 102.421
},
{
"x": "2022-02-14T14:17:00Z",
"y": 102.421
},
{
"x": "2022-02-14T14:17:00Z",
"y": 102.421
},
{
"x": "2022-02-14T14:47:00Z",
"y": 102.373
},
{
"x": "2022-02-14T14:47:00Z",
"y": 102.373
},
{
"x": "2022-02-14T14:47:00Z",
"y": 102.373
},
{
"x": "2022-02-14T15:17:00Z",
"y": 102.443
}
]
}
],
"vtrendlines": []
}
}

Answer 1

This worked for me, Basically the scatter chart is having a hard time understanding the date objects directly. To resolve that we will need to use some configs from the fusion chart and also the moment lib to get the right value
Start with adding the category object in the `categories object.
...
"categories": [{
"category": [
{
"x": "{{moment('2022-01-20').unix()}}",
"label": "2022-01-20",
"showverticalline": "0"
}, ...
]
}]
...
notice that the x key value will correspond to the value in your dataset.
Now we do the same for the dataset as well.
...
"dataset": [
{
"seriesname": "Offer",
"showregressionline": "0",
"data": [
{
"x": "{{moment('2022-01-20T13:50:00Z').unix()}}",
"y": 105.316
}, ...
]
}
], ...
the result of this is:
My JS object
var x = {
"type": "scatter",
"dataSource": {
"chart": {
"caption": "Axes",
"subCaption": "Aggregated History",
"baseFont": "Helvetica Neue,Arial",
"xAxisName": "Date",
"yAxisName": "Price",
"theme": "fusion"
},
"categories": [{
"category": [
{
"x": "{{moment('2022-01-20').unix()}}",
"label": "2022-01-20",
"showverticalline": "0"
},
{
"x": "{{moment('2022-02-01').unix()}}",
"label": "2022-02-01",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-02').unix()}}",
"label": "2022-02-02",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-03').unix()}}",
"label": "2022-02-03",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-04').unix()}}",
"label": "2022-02-04",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-05').unix()}}",
"label": "2022-02-05",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-06').unix()}}",
"label": "2022-02-06",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-07').unix()}}",
"label": "2022-02-07",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-08').unix()}}",
"label": "2022-02-08",
"showverticalline": "1"
},
{
"x": "{{moment('2022-02-09').unix()}}",
"label": "2022-02-09",
"showverticalline": "1"
}
]
}],
"dataset": [
{
"seriesname": "Offer",
"showregressionline": "0",
"data": [
{
"x": "{{moment('2022-01-20T13:50:00Z').unix()}}",
"y": 105.316
},
{
"x": "{{moment('2022-02-01T11:16:00Z').unix()}}",
"y": 104.64
},
{
"x": "{{moment('2022-02-01T11:16:00Z').unix()}}",
"y": 104.64
},
{
"x": "{{moment('2022-02-01T12:18:00Z').unix()}}",
"y": 104.599
},
{
"x": "{{moment('2022-02-01T12:18:00Z').unix()}}",
"y": 104.599
},
{
"x": "{{moment('2022-02-01T12:19:00Z').unix()}}",
"y": 104.564
},
{
"x": "{{moment('2022-02-01T12:49:00Z').unix()}}",
"y": 104.608
},
{
"x": "{{moment('2022-02-01T12:49:00Z').unix()}}",
"y": 104.572
},
{
"x": "{{moment('2022-02-01T13:03:00Z').unix()}}",
"y": 104.56
},
{
"x": "{{moment('2022-02-01T13:19:00Z').unix()}}",
"y": 104.593
}
]
}
],
"vtrendlines": []
}
}
console.log(x)