diff --git a/examples/timeline/30_subgroups.html b/examples/timeline/30_subgroups.html
index c370de13..86511fb3 100644
--- a/examples/timeline/30_subgroups.html
+++ b/examples/timeline/30_subgroups.html
@@ -48,13 +48,13 @@
{id: 'B', content:'1',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
{id: 0, content: 'item 4', start: '2014-01-20', end: '2014-01-22',group:'foo'},
- {id: 'ab', content:'1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:0},
- {id: 'bb', content:'1',start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:0},
- {id: 1, content: '0', start: '2014-01-25 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:0},
- {id: 'aab', content:'1',start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:1},
- {id: 'bab', content:'1',start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:1},
+ {id: 'ab', content:'1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'banana'},
+ {id: 'bb', content:'1',start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'banana'},
+ {id: 1, content: '0', start: '2014-01-25 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'banana'},
+ {id: 'aab', content:'1',start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'putty'},
+ {id: 'bab', content:'1',start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'putty'},
{id: 'bdab', content:'1',start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
- {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:1},
+ {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'putty'},
]);
var container = document.getElementById('visualization');
diff --git a/lib/timeline/Stack.js b/lib/timeline/Stack.js
index 35850c22..0e3fb867 100644
--- a/lib/timeline/Stack.js
+++ b/lib/timeline/Stack.js
@@ -89,10 +89,10 @@ exports.nostack = function(items, margin, subgroups) {
for (i = 0, iMax = items.length; i < iMax; i++) {
if (items[i].data.subgroup !== undefined) {
newTop = margin.axis;
- for (var subgroupIdx in subgroups) {
- if (subgroups.hasOwnProperty(subgroupIdx)) {
- if (subgroups[subgroupIdx].visible == true && subgroupIdx < items[i].data.subgroup) {
- newTop += subgroups[subgroupIdx].height + margin.item.vertical;
+ for (var subgroup in subgroups) {
+ if (subgroups.hasOwnProperty(subgroup)) {
+ if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroups[items[i].data.subgroup].index) {
+ newTop += subgroups[subgroup].height + margin.item.vertical;
}
}
}
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index 0ce7d484..386646ec 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -284,9 +284,11 @@ Group.prototype.add = function(item) {
item.setParent(this);
// add to
+ var index = 0;
if (item.data.subgroup !== undefined) {
if (this.subgroups[item.data.subgroup] === undefined) {
- this.subgroups[item.data.subgroup] = {height:0, visible: false};
+ this.subgroups[item.data.subgroup] = {height:0, visible: false, index:index};
+ index++;
}
}
diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js
index aaef2fd7..c2f32552 100644
--- a/lib/timeline/component/item/BackgroundItem.js
+++ b/lib/timeline/component/item/BackgroundItem.js
@@ -145,38 +145,39 @@ BackgroundItem.prototype.repositionY = function(margin) {
// special positioning for subgroups
if (this.data.subgroup !== undefined) {
- var subgroup = this.data.subgroup;
+ var itemSubgroup = this.data.subgroup;
var subgroups = this.parent.subgroups;
+ var subgroupIndex = subgroups[itemSubgroup].index;
// if the orientation is top, we need to take the difference in height into account.
if (onTop == true) {
// the first subgroup will have to account for the distance from the top to the first item.
- height = this.parent.subgroups[subgroup].height + margin.item.vertical;
- height += subgroup == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
+ height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
+ height += subgroupIndex == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
var newTop = this.parent.top;
- for (var subgroupIdx in subgroups) {
- if (subgroups.hasOwnProperty(subgroupIdx)) {
- if (subgroups[subgroupIdx].visible == true && subgroupIdx < subgroup) {
- newTop += subgroups[subgroupIdx].height + margin.item.vertical;
+ for (var subgroup in subgroups) {
+ if (subgroups.hasOwnProperty(subgroup)) {
+ if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroupIndex) {
+ newTop += subgroups[subgroup].height + margin.item.vertical;
}
}
}
// the others will have to be offset downwards with this same distance.
- newTop += subgroup != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
+ newTop += subgroupIndex != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
this.dom.box.style.top = newTop + 'px';
this.dom.box.style.bottom = '';
}
// and when the orientation is bottom:
else {
var newTop = this.parent.top;
- for (var subgroupIdx in subgroups) {
- if (subgroups.hasOwnProperty(subgroupIdx)) {
- if (subgroups[subgroupIdx].visible == true && subgroupIdx > subgroup) {
- newTop += subgroups[subgroupIdx].height + margin.item.vertical;
+ for (var subgroup in subgroups) {
+ if (subgroups.hasOwnProperty(subgroup)) {
+ if (subgroups[subgroup].visible == true && subgroups[subgroup].index > subgroupIndex) {
+ newTop += subgroups[subgroup].height + margin.item.vertical;
}
}
}
- height = this.parent.subgroups[subgroup].height + margin.item.vertical;
+ height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
this.dom.box.style.top = newTop + 'px';
this.dom.box.style.bottom = '';
}