I am making a column range chart with some time range. Basically want to plot different time taken by different processes as they progress one after other. Here is the fiddle as an example.
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['02/07/2013', '03/07/2013', '04/07/2013']
},
yAxis: {
type: 'datetime',
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 4, 0, 0)],
[Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 5, 0, 0)],
[Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 6, 0, 0)]
]
}]
});
});
In this example, I am not able to get the tool top as "process X started at x time and ended as y time".
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b> started at <b>' + Highcharts.dateFormat('%H:%M', this.y[0]);
}
When I am taking value as this.Y, I am getting only the start time.
Any help in this regard will be highly appreciated.