jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Added an example showing custom ordering of groups

css_transitions
jos 10 years ago
parent
4ab1d08876
commit
8c5fe02e41
6 changed files with 81 additions and 32 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      examples/timeline/05_groups.html
  2. +67
    -0
      examples/timeline/09_order_groups.html
  3. +1
    -0
      examples/timeline/index.html
  4. +3
    -4
      src/timeline/component/Group.js
  5. +3
    -9
      test/timeline.html
  6. +6
    -18
      test/timeline_groups.html

+ 1
- 1
examples/timeline/05_groups.html View File

@ -60,7 +60,7 @@
// create visualization // create visualization
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
groupOrder: 'content'
groupOrder: 'content' // groupOrder can be a property name or a sorting function
}; };
var timeline = new vis.Timeline(container); var timeline = new vis.Timeline(container);

+ 67
- 0
examples/timeline/09_order_groups.html View File

@ -0,0 +1,67 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Order groups</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrate custom ordering of groups.
</p>
<div id="visualization"></div>
<script>
var groups = new vis.DataSet();
groups.add([
{id: 0, content: 'First', value: 1},
{id: 1, content: 'Third', value: 3},
{id: 2, content: 'Second', value: 2}
]);
// create a dataset with items
var items = new vis.DataSet();
items.add([
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17)},
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19)},
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16)},
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23)},
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22)},
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24)}
]);
// create visualization
var container = document.getElementById('visualization');
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -20,6 +20,7 @@
<p><a href="06_event_listeners.html">06_event_listeners.html</a></p> <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
<p><a href="07_custom_time_bar.html">07_custom_time_bar.html</a></p> <p><a href="07_custom_time_bar.html">07_custom_time_bar.html</a></p>
<p><a href="08_edit_items.html">08_edit_items.html</a></p> <p><a href="08_edit_items.html">08_edit_items.html</a></p>
<p><a href="09_order_groups.html">09_order_groups.html</a></p>
</div> </div>
</body> </body>

+ 3
- 4
src/timeline/component/Group.js View File

@ -91,6 +91,7 @@ Group.prototype.setItems = function setItems(itemsData) {
if (this.itemSet) { if (this.itemSet) {
// remove current item set // remove current item set
this.itemSet.setItems(); this.itemSet.setItems();
this.itemSet.hide();
this.groupPanel.frame.removeChild(this.itemSet.getFrame()); this.groupPanel.frame.removeChild(this.itemSet.getFrame());
this.itemSet = null; this.itemSet = null;
} }
@ -129,16 +130,14 @@ Group.prototype.show = function show() {
this.labelPanel.frame.appendChild(this.dom.label); this.labelPanel.frame.appendChild(this.dom.label);
} }
if (this.itemSet) {
this.itemSet.show();
}
var itemSetFrame = this.itemSet && this.itemSet.getFrame(); var itemSetFrame = this.itemSet && this.itemSet.getFrame();
if (itemSetFrame) { if (itemSetFrame) {
if (itemSetFrame.parentNode) { if (itemSetFrame.parentNode) {
itemSetFrame.parentNode.removeChild(itemSetFrame); itemSetFrame.parentNode.removeChild(itemSetFrame);
} }
this.groupPanel.frame.appendChild(itemSetFrame); this.groupPanel.frame.appendChild(itemSetFrame);
this.itemSet.show();
} }
}; };

+ 3
- 9
test/timeline.html View File

@ -113,15 +113,9 @@
}); });
*/ */
items.on('add', function (nodes) {
console.log('add', nodes);
});
items.on('update', function (nodes) {
console.log('update', nodes);
});
items.on('remove', function (nodes) {
console.log('remove', nodes);
});
items.on('add', console.log.bind(console));
items.on('update', console.log.bind(console));
items.on('remove', console.log.bind(console));
</script> </script>
</body> </body>

+ 6
- 18
test/timeline_groups.html View File

@ -107,25 +107,13 @@
}); });
*/ */
items.on('add', function (nodes) {
console.log('items add', nodes);
});
items.on('update', function (nodes) {
console.log('items update', nodes);
});
items.on('remove', function (nodes) {
console.log('items remove', nodes);
});
items.on('add', console.log.bind(console));
items.on('update', console.log.bind(console));
items.on('remove', console.log.bind(console));
groups.on('add', function (nodes) {
console.log('groups add', nodes);
});
groups.on('update', function (nodes) {
console.log('groups update', nodes);
});
groups.on('remove', function (nodes) {
console.log('groups remove', nodes);
});
groups.on('add', console.log.bind(console));
groups.on('update', console.log.bind(console));
groups.on('remove', console.log.bind(console));
</script> </script>
</body> </body>

Write Preview
Loading…
Cancel
Save