Plotting seconds, minutes and hours on the yAxis with Highcharts

Question

I have some data that looks like this:

min="00:09" med="03:11" mean="23:39" max="12:40:26"

I'd like to be able to be able to use these values as datapoints but I'm not sure how to plot them as they are not simple integers. Ideally I'd like to have the labels on the Y axis show something like 'hours' or if I was to use multiple y axes then it could show 'seconds' for the 'min' values, 'minutes' for the 'mean' values and so on adapting to the appropriate time window.

I'm not sure if I can use datetime objects as I only have a time value and not a date.

Any ideas will be appreciated and thanks in advance.

Answer 1

If the times that you have are static strings, you can convert them into a datetime object...

//convert 'string' times into a timestamp (milliseconds)
//so long as your string times are consistently formatted
//e.g. "0:03:00" not "3:00"
var t = Date.parse("1-1-1 " + yourTime)

...But if you can turn them into a millisecond value at all, you should be fine.

Then use normal time format for the y-axis, and format it as you like using the date label format...

var chart = new HighChart({
    //...
    yAxis: {
        type: 'datetime', //y-axis will be in milliseconds
        dateTimeLabelFormats: { //force all formats to be hour:minute:second
            second: '%H:%M:%S',
            minute: '%H:%M:%S',
            hour: '%H:%M:%S',
            day: '%H:%M:%S',
            week: '%H:%M:%S',
            month: '%H:%M:%S',
            year: '%H:%M:%S'
        }
    }
});