Google charts timeline with relative "timestamps"

Question

I'm trying to visualise speedrun times in a linechart, per date. I have the following data:

ID	Date	Time
1	2021-10-20 00:00:00	1:59:11.19
2	2021-10-21 00:00:00	1:55:33.43
3	2021-10-22 00:00:00	1:54:52.82
4	2021-10-23 00:00:00	1:53:44.15

The data will be converted to an array, as such;

var runs = [
    [1, "2021-10-20 00:00:00", "1:59:11.19"],
    [2, "2021-10-21 00:00:00", "1:55:33.43"],
    [3, "2021-10-22 00:00:00", "1:54:52.82"],
    [4, "2021-10-23 00:00:00", "1:53:44.15"]
];

I tried following the example from the dev docs , and the example JSFiddle without any luck. As they only show examples that support numbers or absolute datetimes / created times.

Is there a way to make a linechart work with relative times (including ms), showing all times chronologically per date?

Answer 1

if you are wanting to display the date on the x-axis and the time on the y-axis,
you can use google's timeofday data type for the y-axis

The DataTable timeofday column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively.
For example, the time 8:30am would be: [8, 30, 0, 0]

following is routine used to build data.table

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('timeofday', 'Time');

for (var i = 0; i < runs.length; i++) {
  // convert date
  var rowDate = new Date(runs[i][1]);
  
  // convert time to timeofday data type [h, m, sec, ms]
  var rowTime = runs[i][2].split(':');
  var ms = rowTime[rowTime.length - 1].split('.');
  rowTime = rowTime.map(function (timeValue, index) {
    if (index === (rowTime.length - 1)) {
      return parseInt(ms[0]);
    } else {
      return parseInt(timeValue);
    }
  });
  rowTime.push(parseInt(ms[1]));
  
  // add data row
  data.addRow([rowDate, rowTime]);
}

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var runs = [ [1, "2021-10-20 00:00:00", "1:59:11.19"], [2, "2021-10-21 00:00:00", "1:55:33.43"], [3, "2021-10-22 00:00:00", "1:54:52.82"], [4, "2021-10-23 00:00:00", "1:53:44.15"] ]; var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('timeofday', 'Time'); for (var i = 0; i < runs.length; i++) { // convert date var rowDate = new Date(runs[i][1]); // convert time to timeofday data type [h, m, sec, ms] var rowTime = runs[i][2].split(':'); var ms = rowTime[rowTime.length - 1].split('.'); rowTime = rowTime.map(function (timeValue, index) { if (index === (rowTime.length - 1)) { return parseInt(ms[0]); } else { return parseInt(timeValue); } }); rowTime.push(parseInt(ms[1])); // add data row data.addRow([rowDate, rowTime]); } var chart = new google.visualization.LineChart(document.getElementById('chart')); chart.draw(data, { chartArea: { height: '100%', width: '100%', top: 40, left: 64, right: 40, bottom: 40 }, hAxis: { format: 'MM/dd/yyyy', ticks: data.getDistinctValues(0) }, height: '100%', legend: { position: 'top' }, width: '100%' }); });

 html, body { height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #chart { min-height: 400px; height: 100%; }

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