Google Charts API CalendarChart - charts

Question

I am using Google Charts API for my Data Visualisations. I would like to retrieve the date of the selected day on the Chart.
What I retrieve is quite strange.. I am using a selectHandler on the chart as recommended by documentation.
function selectHandler() {
console.log(chart.getSelection()[0]);
}
google.visualization.events.addListener(chart, 'select', selectHandler);
On clicking following date, I am reading following output on console:
22/04/2020 : 1587513600000
19/06/2020 : 1592524800000
What kind of date format is this?
Can anyone help me?

Answer 1

this is the date represented as the number of milliseconds since the Unix Epoch.
it is the same value as returned by the getTime() method on a date object.
you can pass the value received from the selection to the date constructor to get the date...
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedDate = new Date(selection[0].date);
}
see following working snippet...
google.charts.load('current', {
packages: ['calendar']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
function selectHandler() {
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedDate = new Date(selection[0].date);
console.log(selectedDate);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>
note: you should check the length of the selection before accessing the contents.
the select event is also called when a date is un-selected.
in this case the selection array will be empty...