Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Adding 3rd level hierarchy for nested groups fixing #2846 #3940

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Adding 3rd level hierarchy for nested groups fixing #2846 #3940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d1e9d5
Merged Jobrian's changes && tried formatting to project style
JobrianTrinidad Sep 19, 2017
d9f531e
Merge branch 'develop' into develop
yotamberk Jul 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 193 additions & 0 deletions examples/timeline/groups/nestedThreeLevels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
<!DOCTYPE HTML>
<html>

<head>
<title>Timeline | Nested Groups example</title>

<style>
body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}

#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>

<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>
This example demonstrate nested groups that are 3 levels deep. Note that a DataSet is used for both items and groups, allowing to dynamically add, update or remove both items and groups via the DataSet.
</p>
<div id="visualization"></div>

<script>
var sdt = [{
"group3": [{
id: 1243,
treeLevel: 3,
content: "Level 3 1243"
}, {
id: 1525,
treeLevel: 3,
content: "Level 3 1525"
}, {
id: 1624,
treeLevel: 3,
content: "Level 3 1624"
}, {
id: 2076,
treeLevel: 3,
content: "Level 3 2076"
}, {
id: 1345,
treeLevel: 3,
content: "Level 3 1345"
}, {
id: 2078,
treeLevel: 3,
content: "Level 3 2078"
}, {
id: 1826,
treeLevel: 3,
content: "Level 3 1826"
}, {
id: 2107,
treeLevel: 3,
content: "Level 3 2107"
}],
"groups": [{
id: 10,
title: "Group 10",
content: "Group 10",
treeLevel: 1,
nestedGroups: [1, 2, 3, 4, 5, 6]
}, {
id: 1,
content: "North America",
treeLevel: 2,
nestedGroups: [1243, 1525, 1624, 1345, 2078, 1826, 2076, 2107]
}, {
id: 2,
treeLevel: 2,
content: "Latin America"
}, {
id: 3,
treeLevel: 2,
content: "Europe"
}, {
id: 4,
treeLevel: 2,
content: "Asia"
}, {
id: 5,
treeLevel: 2,
content: "Oceania"
}, {
id: 6,
treeLevel: 2,
content: "Africa"
}, {
id: 100,
title: "Group 100",
content: "Group 100",
treeLevel: 1,
nestedGroups: [101, 102, 103, 104, 105, 106],
"text": "Totals",
"EditionId": 0,
"groupId": 0
}, {
id: 101,
treeLevel: 2,
content: "North America"
}, {
id: 102,
treeLevel: 2,
content: "Latin America"
}, {
id: 103,
treeLevel: 2,
content: "Europe"
}, {
id: 104,
treeLevel: 2,
content: "Asia"
}, {
id: 105,
treeLevel: 2,
content: "Oceania"
}, {
id: 106,
treeLevel: 2,
content: "Africa"
}],
}];

function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

let startDay = moment().startOf("month").startOf("week").isoWeekday(1);

// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');

// Create a DataSet (allows two way data-binding)
//var items = new vis.DataSet(data.result);

var now = moment().minutes(0).seconds(0).milliseconds(0);
var itemCount = 60;

// create a data set with groups
var groups = new vis.DataSet();

groups.add(sdt[0].groups);
groups.add(sdt[0].group3);

// create a dataset with items
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = ['box', 'point', 'range', 'background']
for (var i = 0; i < itemCount; i++) {
var rInt = randomIntFromInterval(1, 30);
var start = startDay.clone().add(rInt, 'days');
var end = start.clone().add(24, 'hours');
var randomGroupId = groupIds[randomIntFromInterval(1, groupIds.length)];
var type = types[randomIntFromInterval(0, 3)]

items.add({
id: i,
group: randomGroupId,
content: 'item ' + i + ' ' + rInt,
start: start,
end: end,
type: type
});
}

// specify options
let options = {
start: startDay.toDate(),
end: new Date(1000 * 60 * 60 * 24 + (new Date()).valueOf()),
horizontalScroll: true,
zoomKey: 'ctrlKey',
orientation: 'both',
zoomMin: 1000 * 60 * 60 * 240
};

// create a Timeline
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>

</html>
Loading