Hours: Mintues: Seconds in HighCharts Bargraph - highcharts

Question

I am trying to graph the length of times that each employee spends on the phone in a bargraph using Highcharts. I am not getting any errors, but the graph is not drawing. Any advice moving forward would be greatly appreciated.
<script type="text/javascript">
<!-- create the highcharts object -->
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: 'transparent'
},
title: {
text: ''
},
xAxis: {
categories: ['May 2013', 'June 2013', 'July 2013', 'August 2013', 'September 2013', 'October 2013', 'November 2013', 'December 2013', 'January 2014', 'February 2014', 'March 2014', 'April 2014', ]
},
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'
},
title: {
text: 'Time Spent on Phone'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} calls</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{ name: 'Michelle', data: ["02:19:36", "02:37:26", "01:57:27", "02:23:49", "02:10:49", "02:32:33", "02:16:10", "01:25:01", "00:50:49", "0", "0", "0", ] },{ name: 'Kim', data: ["04:53:56", "09:21:07", "10:32:46", "10:30:21", "09:15:12", "09:15:57", "06:19:16", "08:59:23", "06:11:48", "0", "0", "0", ] },{ name: 'Katie', data: ["0", "0", "0", "0", "0", "0", "0", "08:00:14", "03:59:01", "0", "0", "0", ] }, ]
});
});
</script>
</div>

Answer 1

You need to set your yAxis.type: 'datetime' and you need to format your series.data to be a valid time javascript time. Currently you have yAxis set to just be values (default) and your data is actually a string ("02:19:36" for example). This needs to be converted to a javascript time.
Edit - example of Date.UTC().
To convert your first entry for 'Michelle' use:
Date.UTC(0, 0, 0, 2, 19, 36)
Since you dont care about year/month/day but the function requires year and month I just set them to 0. Replace all your string dates such that yourdata` looks like:
data: [Date.UTC(0, 0, 0, 2, 19, 36), Date.UTC(....), etc]
Here is an updated fiddle with just one set of data. Noticed I changed series type to 'line. The 'column' type was acting funny.
Fixed the 'column' type issue but setting arbitrary yAxis min year/month/day and setting the data points to use that same value so that the only difference is the time.