Periodic events with duration - highcharts

Question

I need to show on graph duration of periodic events. For example user with ID 1 is calling to user with ID 2 at 10:00 AM and they are speaking 5 minutes. Then he is calling him again at 2:00PM and they are speaking 2 minutes. So this events are happening periodically and I need to show them on the graph as horizontal bars. They should look something like that: User 1: [ 5min ][ 2min ][ ... ][ ... ]
I've almost achieved what I want except that I can't find the way to show time at X axis. The X axis should show time with 30 minutes interval.
Here is my configuration:
title: null,
chart: {
type: 'bar',
backgroundColor: '#F9F9F9',
plotBackgroundColor: '#F9F9F9',
borderColor: '#F9F9F9',
borderWidth: 1,
animation: 0
},
legend: {
enabled: false
},
series: [
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] }
],
xAxis: {
categories: ['User 1']
},
yAxis: {
allowDecimals: false,
min: 0,
type: '',
title: {
text: 'Time'
},
stackLabels: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: false
},
borderWidth: 0
}
Here is demonstration of concept: http://jsfiddle.net/dimitrykislichenko/SjdR5/

Answer 1

I think you should be using columnrange series with axis type: 'datetime'. See: http://jsfiddle.net/SjdR5/2/
Note requires change in series object:
series: [{
data: [{
x: 0,
low: Date.UTC(2013, 1, 1, 10, 53),
high: Date.UTC(2013, 1, 1, 10, 59),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 12, 12),
high: Date.UTC(2013, 1, 1, 12, 17),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 16, 35),
high: Date.UTC(2013, 1, 1, 16, 55),
color: 'red'
}]
}],
x:0 -it's category index ( 0 = User 1 )
low and high is like from and to for time
color is just color of bar ;)