vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
125 lines (102 loc) • 3.83 kB
HTML
<html>
<head>
<title>Timeline | Event listeners</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../../dist/vis-timeline-graph2d.min.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example listens for events <code>select</code>, <code>click</code>, <code>doubleClick</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline (other possible events: <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>, <code>mouseMove</code>), and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
</p>
<div id="visualization"></div>
<p></p>
<div id="hoveredItem"></div>
<div id="log"></div>
<script type="text/javascript">
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
]);
var container = document.getElementById('visualization');
var options = {
editable: true,
onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
};
var timeline = new vis.Timeline(container, items, options);
timeline.on('rangechange', function (properties) {
logEvent('rangechange', properties);
});
timeline.on('rangechanged', function (properties) {
logEvent('rangechanged', properties);
});
timeline.on('select', function (properties) {
logEvent('select', properties);
});
timeline.on('itemover', function (properties) {
logEvent('itemover', properties);
setHoveredItem(properties.item);
});
timeline.on('itemout', function (properties) {
logEvent('itemout', properties);
setHoveredItem('none');
});
timeline.on('click', function (properties) {
logEvent('click', properties);
});
timeline.on('doubleClick', function (properties) {
logEvent('doubleClick', properties);
});
timeline.on('contextmenu', function (properties) {
logEvent('contextmenu', properties);
});
timeline.on('mouseDown', function (properties) {
logEvent('mouseDown', properties);
});
timeline.on('mouseUp', function (properties) {
logEvent('mouseUp', properties);
});
// other possible events:
// timeline.on('mouseOver', function (properties) {
// logEvent('mouseOver', properties);
// });
// timeline.on("mouseMove", function(properties) {
// logEvent('mouseMove', properties);
// });
items.on('*', function (event, properties) {
logEvent(event, properties);
});
function stringifyObject (object) {
if (!object) return;
var replacer = function(key, value) {
if (value && value.tagName) {
return "DOM Element";
} else {
return value;
}
}
return JSON.stringify(object, replacer)
}
function logEvent(event, properties) {
var log = document.getElementById('log');
var msg = document.createElement('div');
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
'properties=' + stringifyObject(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function setHoveredItem(id) {
var hoveredItem = document.getElementById('hoveredItem');
hoveredItem.innerHTML = 'hoveredItem=' + id;
}
</script>
</body>
</html>