Displaying formatted time on Y axis in Google Charts

Question

Here's some example data:

Best running time on 1000 ft depending on age:

               | 7 yrs | 8 yrs | 9 yrs | ...

--------------------------------------------

time, seconds  |  100  |  80   |  70   |

I want time (on Y axis) to displayed as a formatted value, not just plain number. This could be anything readable like 01:23. Failed to find any working example

Answer 1

Use 'timeofday' column type for y-axis

From the docs --> Working with Timeofday

See following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['timeofday', '7 yrs', '8 yrs', '9 yrs'],
    ['s', [0, 1, 40], [0, 1, 20], [0, 1, 10]]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(container);
  chart.draw(data, {
    orientation: 'vertical'
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Displaying formatted time on Y axis in Google Charts

Sign up