Hey everyone
I wanted to use some dates in Highcharts Visuals inside quicksight.
This is the second time I try using it, first time it did not work so I didn’t give much attention.
But now, seems like everytime I add a Date to group by, the visual transforms it to epoch date, and I cannot use a simple date in x axis with Highcharts.
Should I do something in the json code?
{
“xAxis”: {
"type":"category",
"categories": ["getColumn", 0] //Product
},
“yAxis”: {
"min": 0,
"title": {
"text": "Sales"
}
},
//Using a shared tooltip to plot Current year sales, Product target and Prior year sales.
//Product target is present only in the bullet series.
//So, using an #if check to add it only when point.target has got value.
“tooltip”: {
"headerFormat": "<span style='font-size:10px'>{point.key}</span><table>",
"pointFormat": "<tr><td>{series.name}: </td><td style='padding:0'><b>${point.y:,.0f}</b></td></tr>{#if point.target}<tr><td>Target: </td><td style='padding:0'><b>${point.target:,.0f}</b></td></tr>{/if}",
"footerFormat": "</table>",
"shared": true,
"useHTML": true
},
“plotOptions”: {
"column": {
"borderWidth": 0,
"grouping": false,
"shadow": false
}
},
“subtitle”: {
"text": "<span style='color:black'> \u25CF </span><b>Prior year sales</b> <b>\u2015 Target Sales</b> <b> Current year sales : </b><span style='color:#50E287'> \u25CF </span><span>Acheived target, </span><span style='color:#FAE702'> \u25CF </span><span>Surpassed prior year, </span><span style='color:#FD554E'> \u25CF </span><span>Below prior year </span>",
"align": "center",
"verticalAlign": "bottom",
"y": 10,
"useHTML": true
},
“legend”: {
"enabled":false
},
“series”: [
{
"type": "bullet",
"name": "Current Year Sales",
"data": [
"map",
["getColumn", 1, 2], //Current Year Sales, Prior Year Sales, Product Target
{
"y": ["get", ["item"], 0], //Current Year Sales
"target":["get", ["item"], 1], //Product Target
"targetOptions":{
"color":"black",
"width":30
},
"color": [
"case",
//If Current year sales >= Product Target, then green
[">=", ["get", ["item"], 0], ["get", ["item"], 2]],
"#50E287",
//If Current year sales >= Prior year sales, then yellow
[">=", ["get", ["item"], 0], ["get", ["item"], 1]],
"#FAE702",
//Else red; Rules are evaluated top down in case expression.
"#FD554E"
],
"pointPadding": 0.0
}
]
},
{
"type": "column",
"name": "Prior Year Sales",
"color": "black",
"data": ["getColumn", 1],
"pointPadding": 0.3
}
]
}
NOTE: I just copied the example, so pretty much everything here is worthless. I just wanted to transform the date to Date and not epoch.
