Horizotal scrollable highcharts timeline chart - highcharts

Question

Reference from the question below regarding the timeline chart -->
How I can stick together the lines on the Highcharts timeline chart?
I have reconstructed this into jsfiddle --> http://jsfiddle.net/0hafgqys/
My next question is how do i have it scroll-able horizontally if I want to go back in time assuming i have historical data
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Equipment Status'
},
scrollbar: {
enabled: true
},
xAxis: {
categories: ['Status']
},
yAxis: {
type: 'datetime',
title: {
text: 'Timespan'
}
},
plotOptions: {
columnrange: {
grouping: false , borderWidth:0,
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
}
},
series: [{
name: 'Producing',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 4, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 10, 0, 0),
high: Date.UTC(2013, 07, 03, 12, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 14, 0, 0),
high: Date.UTC(2013, 07, 03, 15, 0, 0)
}
]
}, {
name: 'Breakdown',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}]
}, {
name: "Changeover",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 1, 0, 0),
high: Date.UTC(2013, 07, 04, 5, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 10, 0, 0),
high: Date.UTC(2013, 07, 02, 23, 0, 0)
}, ]
}, {
name: "TrialRun",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 5, 0, 0),
high: Date.UTC(2013, 07, 04, 13, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 2, 0, 0),
high: Date.UTC(2013, 07, 02, 10, 0, 0)
}]
}]
});
});

Answer 1

If you change columnrange to xrange series type, you will be able to use default navigator and scrollbar under the xAxis:
$('#container').highcharts({
chart: {
type: 'xrange'
},
...,
series: [{
name: 'Producing',
data: [{
y: 0,
x: Date.UTC(2013, 07, 03, 0, 0, 0),
x2: Date.UTC(2013, 07, 03, 4, 0, 0)
}, {
y: 0,
x: Date.UTC(2013, 07, 03, 10, 0, 0),
x2: Date.UTC(2013, 07, 03, 12, 0, 0)
}, ...
]
}, ... ]
});
Docs: https://www.highcharts.com/docs/chart-and-series-types/x-range-series
Live demo: http://jsfiddle.net/BlackLabel/oy1xLkc5/

Answer 2

I got it.... please see the revised code below and jsfiddle --> http://jsfiddle.net/0hafgqys/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Equipment Status'
},
xAxis: {
categories: ['Status']
},
yAxis: {
type: 'datetime',
title: {
text: 'Timespan'
},
min : Date.UTC(2013, 07, 04, 13, 0, 0) - (24*60*60*1000),
scrollbar: {
enabled: true
},
},
plotOptions: {
columnrange: {
grouping: false , borderWidth:0,
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
}
},
series: [{
name: 'Producing',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 4, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 10, 0, 0),
high: Date.UTC(2013, 07, 03, 12, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 14, 0, 0),
high: Date.UTC(2013, 07, 03, 15, 0, 0)
}
]
}, {
name: 'Breakdown',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}]
}, {
name: "Changeover",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 1, 0, 0),
high: Date.UTC(2013, 07, 04, 5, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 10, 0, 0),
high: Date.UTC(2013, 07, 02, 23, 0, 0)
}, ]
}, {
name: "TrialRun",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 5, 0, 0),
high: Date.UTC(2013, 07, 04, 13, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 2, 0, 0),
high: Date.UTC(2013, 07, 02, 10, 0, 0)
}]
}]
});
});