|
|
@ -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> |