ArrayToDataTable not accepting datetime type - google-visualization

Question

I have this code here for filtering my areachart by date, but it's not working correctly because arrayToDataTable is not accepting dateTime type.
Any help would be appreciated.
Anyone know how to fix this?
This is my script:
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["controls", "corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "GoogleChart.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter-range',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'AreaChart',
chartOptions: {
chartArea: {
width: '100%',
left: 36,
right: 18
},
height: 72
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart_div',
options: {
width: 1800,
height: 600,
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(rangeFilter, chart);
dashboard.draw(data);
},
});
}
</script>

Answer 1

in order to create date time values,
you will need to manually change each row in the data.
instead of using arrayToDataTable...
var data = google.visualization.arrayToDataTable(r.d);
create a blank data table,
then use the column headings in the data to create the columns,
and the rest to create the rows...
var data = new google.visualization.DataTable();
r.d.forEach(function (row, index) {
if (index === 0) {
data.addColumn('date', row[0]);
data.addColumn('number', row[1]);
} else {
data.addRow([new Date(row[0]), row[1]]);
}
});