drawing start and end time as intervall in one thick line - highcharts

Question

I am trying to draw some highcharts graph where the time intervals is being displayed as a thick line based on the date in one line so my series data are start and end times (Timestamp Objects from the database).
Highcharts.chart('container', {
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x'
},
title: {
text: 'Workink time'
},
yAxis: {
title: {
text: 'Driving time'
}
},
xAxis: {
type: 'datetime',
},
series: [{
name: 'Date',
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}]
});
It could be look like this picture.

Answer 1

You can add a serie for each of your start and end date tuple, link all of them the first series by setting an id for the first serie
id: 'Installation'
and using
linkedTo: 'Installation',
and set the same color
var color = '#7cb5ec';
this is how the series should look like
series: [{
id: 'Installation',
name: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 21), 1], [Date.UTC(1970, 9, 22), 1]]
}, {
name: 'Manufacturing',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 23), 1], [Date.UTC(1970, 9, 24), 1]]
}, {
name: 'Sales & Distribution',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 25), 1], [Date.UTC(1970, 9, 30), 1]]
}, {
name: 'Project Development',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 10, 5), 1], [Date.UTC(1970, 10, 10), 1]]
}, {
name: 'Other',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 10, 12), 1], [Date.UTC(1970, 10, 30), 1]]
}]
here if the full fiddle http://jsfiddle.net/32mhbyc5/

Answer 2

As I am unsure what the data in your example is meant to represent, I have used the data as #Liviu Boboia parsed it, to provide another example of how to create the broken line visual using the columnrange series type.
Code:
series: [{
data: [
[1, Date.UTC(1970, 9, 21), Date.UTC(1970, 9, 22)],
[1, Date.UTC(1970, 9, 23), Date.UTC(1970, 9, 24)],
[1, Date.UTC(1970, 9, 25), Date.UTC(1970, 9, 30)],
[1, Date.UTC(1970, 10, 5), Date.UTC(1970, 10, 10)],
[1, Date.UTC(1970, 10, 12), Date.UTC(1970, 10, 30)]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/0jme6at3/
Output: