JavaScript
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
zoomType: 'y',
panning: true,
panKey: 'shift'
},
title: {
text: 'BepiTimeline Test'
},
scrollbar: {
enabled: true
},
xAxis: {
categories: ['MERTIS', 'BELA', 'MGNS', 'PHEBUS']
},
yAxis: {
type: 'datetime',
title: {
text: 'Timespan'
}
},
plotOptions: {
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function() {
return '<b>' + 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: 'MERTIS',
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: 'BELA',
data: [{
x: 1,
low: Date.UTC(2013, 07, 02, 16, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
}, {
x: 1,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}]
}, {
name: "MGNS",
data: [{
x: 2,
low: Date.UTC(2013, 07, 04, 1, 0, 0),
high: Date.UTC(2013, 07, 04, 5, 0, 0)
}, {
x: 2,
low: Date.UTC(2013, 07, 02, 10, 0, 0),
high: Date.UTC(2013, 07, 02, 23, 0, 0)
}, ]
}, {
name: "PHEBUS",
data: [{
x: 3,
low: Date.UTC(2013, 07, 04, 5, 0,...