Google charts vAxis timespans - angularjs

Question

Hi Guys according to the documentation of google charts a row type can either be :
The type can be one of the following: 'string', 'number', 'boolean',
'date', 'datetime', and 'timeofday'.
https://developers.google.com/chart/interactive/docs/datesandtimes
I need to have timespan type, so I can have vAxis with values 0 hour, 1 hour, 2 hours, ....up to any number. Which will mean between each two is 60 degrees like a timespan, but not 100 degree like numbers.
Is there a way to acheive this? timeofday will not work also when reaching 24 hours it turns it into 00:00

Answer 1

using the option --> hAxis.ticks
combined with object notation for values --> {v: value, f: formattedValue}
you could probably use just about any type (other than 'string')
see the following working snippet for a basic example...
a custom set of hAxis.ticks is built, one tick for each hour, in a 48 hour timespan
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'Timespan');
dataTable.addColumn('number', 'Y');
var oneHour = (1000 * 60 * 60);
var startDate = new Date();
var endDate = new Date(startDate.getTime() + (oneHour * 24 * 2));
var ticksAxisH = [];
for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneHour) {
var tickValue = new Date(i);
var tickFormat = (tickValue.getTime() - startDate.getTime()) / oneHour;
var tick = {
v: tickValue,
f: tickFormat + 'h'
};
ticksAxisH.push(tick);
dataTable.addRow([tick, (2 * tickFormat) - 8]);
}
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(dataTable, {
hAxis: {
ticks: ticksAxisH
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>