vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
50 lines (43 loc) • 1.56 kB
HTML
<html>
<head>
<title>Timeline | Markers example</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 a function to add multiple custom time markers which can be dragged by the user.</p>
<p>In this example, you can add new markers by double-clicking the timeline below and delete the markers by double-clicking it.</p>
<p>
<input type="text" id="markerText" placeholder="marker text">
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
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 timeline = new vis.Timeline(container, items, options);
timeline.on('doubleClick', function (properties) {
var eventProps = timeline.getEventProperties(properties.event);
if (eventProps.what === 'custom-time') {
timeline.removeCustomTime(eventProps.customTime);
} else {
var id = new Date().getTime();
var markerText = document.getElementById('markerText').value || undefined;
timeline.addCustomTime(eventProps.time, id);
timeline.setCustomTimeMarker(markerText, id);
}
});
</script>
</body>
</html>