Dan Dan - 1 month ago 12
Javascript Question

Displaying formatted time on Y axis in Google Charts

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

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>