How to set hAxis as date format in Google Chart? - charts

Question

I use Google Chart as DataTable.
I try to make hAxis like as date format:
hAxis: {
title: '',
format: 'date',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
}
And add rows as:
data.addRows([
[{v: [8, 0, 0], f: '03/02/13'}, 1],
[{v: [9, 0, 0], f: '04/02/13'}, 2],
[{v: [10, 0, 0], f:'05/02/13'}, 3],
[{v: [11, 0, 0], f: '06/02/13'}, 4],
[{v: [12, 0, 0], f: '07/02/13'}, 5]
]);
I need to get in horizontal line(hAxis) titles in date format: dd/mm/yy

Answer 1

hAxis.format expects a pattern, or pattern name
so it would be something like...
hAxis: {
format: 'short'
// or
format: 'dd/MM/yy'
}
however, as pointed out in the comments, the column type appears to be timeofday
to avoid changing the column type, you can provide your own custom hAxis.ticks,
using the data provided to the chart
see following, working snippet. uses rawData to populate chart data and ticks...
google.charts.load('current', {
callback: function () {
var rawData = [
[{v: [8, 0, 0], f: '03/02/13'}, 1],
[{v: [9, 0, 0], f: '04/02/13'}, 2],
[{v: [10, 0, 0], f:'05/02/13'}, 3],
[{v: [11, 0, 0], f: '06/02/13'}, 4],
[{v: [12, 0, 0], f: '07/02/13'}, 5]
];
var data = new google.visualization.DataTable();
data.addColumn({label: 'Date', type: 'timeofday'});
data.addColumn({label: 'Count', type: 'number'});
data.addRows(rawData);
var hTicks = [];
for (var i = 0; i < rawData.length; i++) {
hTicks.push(rawData[i][0]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
hAxis: {
ticks: hTicks,
title: '',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
}
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>