Grouped Scatter or Bars Chart - charts

Question

Is there a way to make a grouped bars/scatter chart with date intervals?
I've tried 2 different ways to achieve the desired result.
1 - Used a grouped bars charts and trie to apply intervals (with no success).
http://jsfiddle.net/W6pgu/
$(function () {
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Basic Info',
},
xAxis: {
categories: [
'Basic Info', ]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
shared: true,
valueSuffix: ' mm'
},
plotOptions: {
bar: {
grouping: false,
shadow: false
}
},
series: [{
name: 'Basic Info 1',
data: [49.9],
pointPadding: 0
}, {
name: 'Basic Info 1',
data: [83.6],
pointPadding: 0.1
}, {
name: 'Basic Info 3',
data: [48.9],
pointPadding: 0.2
}, {
name: 'Basic Info 4',
data: [42.4],
pointPadding: 0.3
}]
});
});
2 - Used a scatter chart to reproduce something similar to a Gantt chart, but I can't group this.
http://jsfiddle.net/r6emu/1814/
var tasks = [{
name: 'Sleep',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 0),
to: Date.UTC(0, 0, 0, 6),
}, {
from: Date.UTC(0, 0, 0, 22),
to: Date.UTC(0, 0, 0, 24),
}]
}, {
name: 'Family time',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 6),
to: Date.UTC(0, 0, 0, 8),
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 22)
}]
}, {
name: 'Eat',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 7),
to: Date.UTC(0, 0, 0, 8),
}, {
from: Date.UTC(0, 0, 0, 12),
to: Date.UTC(0, 0, 0, 12, 30)
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 17),
}, {
from: Date.UTC(0, 0, 0, 20, 30),
to: Date.UTC(0, 0, 0, 21)
}]
}, {
name: 'Work',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 8),
to: Date.UTC(0, 0, 0, 16)
}]
}];
var series = [];
$.each(tasks.reverse(), function (i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function (j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to,
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]);
}
});
series.push(item);
});
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Daily activities'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: false,
startOnTick: false,
endOnTick: false,
},
legend: {
enabled: false
},
tooltip: {
shared: true,
},
plotOptions: {
line: {
lineWidth: 9,
grouping: false,
shadow: false,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function () {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
I need a mixing of both. Any suggestion?

Answer 1

Use columnrange series instead of bars, see: http://jsfiddle.net/W6pgu/1/
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Basic Info',
},
xAxis: {
categories: [
'Basic Info',
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
shared: true,
valueSuffix: ' mm'
},
plotOptions: {
columnrange: {
grouping: false,
shadow: false
}
},
series: [{
name: 'Basic Info 1',
data: [[0,15,49.9]],
pointPadding: 0
}, {
name: 'Basic Info 1',
data: [[3,30,83.6]],
pointPadding: 0.1
}, {
name: 'Basic Info 3',
data: [[1,15,48.9]],
pointPadding: 0.2
}, {
name: 'Basic Info 4',
data: [[0,15,42.4]],
pointPadding: 0.3
}]
});
});