How do I make a number of milliseconds into a timespan for use in Google Charts?

Question

I have a column that is number of milliseconds that I'd like to use in a Google Charts chart to represent a duration. How do I turn that number into a time span?

Answer 1

In Google Charts, a time span can be represented using the timeofday type, which will allow you to add two times and get a third, and make charts automatically format things properly. A timeofday is actually an array with four elements: hours, minutes, seconds, and (optionally) milliseconds. See this page's explanation of the timeofday under the type property for a DataTable's cols.

Each field of the timeofday has to be within the bounds of that that type of increment; you can't dump your whole timespan into the milliseconds field and call it a day, because anything over 999 is out-of-bounds.

You can use this function to turn a millisecond time span into a timeofday:

function toTimeSpan(milliseconds)
{
    var timespan = [0, 0, Math.floor(milliseconds / 1000), milliseconds % 1000];

    // Minutes
    if (timespan[2] >= 60)
    {
        timespan[1] = Math.floor(timespan[2] / 60);
        timespan[2] %= 60;

        // Hours
        if (timespan[1] >= 60)
        {
           timespan[0] = Math.floor(timespan[1] / 60);
           timespan[1] %= 60;
        }
    }

    return timespan;
}

A caveat: I don't think a timeofday will allow you to hold a span greater than 24 hours. If you need that functionality, you may need to use a number column and write your own formatting.

Answer 2

To expand on Kenny's answer, if you input your data as milliseconds, you can use a DataView to convert that to a timeofday data type:

var timeFormatter = new google.visualization.DateFormat('HH:mm:ss.SSS'); // set this pattern however you need to format your time display
var view = new google.visualization.DataView(data);
view.setColumns([/* columns before timeofday */, {
    type: 'timeofday',
    label: 'Time of Day',
    calc: function (dt, row) {
        var timeOfDay = toTimeSpan(data.getValue(row, /* time column index */);
        var formattedTime = timeFormatter.formatValue(timeOfDay);
        return {v: timeOfDay, f: formattedTime};
    }
}, /* columns after timeofday */]);

Answer 3

Using as asgallant answer, that expanded the answer from Kenny Dewhirst I ended up doing something very similar but instead of using the function toTimeStamp, I used the new Date(milliseconds). Code below using livescript.

   function millisToDate dt, row
      date = new Date(dt.getValue(row, 0))
      dateFormatter = new google.visualization.DateFormat({pattern: "EEEE d 'de' MMMM 'de' yyyy, H:mm"});
      {v: date, f: dateFormatter.formatValue date}

   view = new google.visualization.DataView data
     view.setColumns([/* columns before timeofday */, {
     type: 'datetime',
     calc: millisToDate
    },  /* columns after timeofday */])

NOTE: Using type: 'date' made that the horizontal axis did not displayed the hours in case the graph show one day data. Changing to datetime fixed this.