vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
59 lines (52 loc) • 1.79 kB
HTML
<html>
<head>
<title>Timeline | Marker events</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</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>The timeline has two marker events.</p>
<ol>
<li>
<p><code>markerchange</code> which is fired when a marker title has been changed.</p>
</li>
<li>
<p><code>markerchanged</code> which is fired when an alteration to a marker title is committed.</p>
</li>
</ol>
<div id="visualization"></div><br>
<div id="log"></div>
<script type="text/javascript">
var items = new vis.DataSet();
var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var container = document.getElementById('visualization');
var timeline = new vis.Timeline(container, items, options);
var id = "id";
timeline.addCustomTime(new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 3), id);
timeline.setCustomTimeMarker('Enter some text', id, true);
timeline.on("markerchange", function (properties) {
logEvent("markerchange", properties);
});
timeline.on("markerchanged", function (properties) {
logEvent("markerchanged", properties);
});
function logEvent (event, properties) {
var log = document.getElementById('log');
var msg = document.createElement('div');
msg.innerHTML = 'event=' + event + ', ' + 'properties=' + JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
</script>
</body>
</html>