You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.8 KiB
65 lines
1.8 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Timeline | Show current and custom time bars</title>
|
|
|
|
<style type="text/css">
|
|
body, html {
|
|
font-family: sans-serif;
|
|
font-size: 11pt;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../dist/vis.js"></script>
|
|
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
|
|
<p>
|
|
<input type="text" id="setTime" value="2014-02-07" />
|
|
<input type="button" id="set" value="Set custom time" />
|
|
</p>
|
|
<p>
|
|
<input type="button" id="get" value="Get custom time" />
|
|
<span id="getTime"></span>
|
|
</p>
|
|
<p>
|
|
<code>timechange</code> event: <span id="timechangeEvent"></span>
|
|
</p>
|
|
<p>
|
|
<code>timechanged</code> event: <span id="timechangedEvent"></span>
|
|
</p>
|
|
|
|
<div id="visualization"></div>
|
|
|
|
<script type="text/javascript">
|
|
var container = document.getElementById('visualization');
|
|
var items = new vis.DataSet();
|
|
var options = {
|
|
showCurrentTime: true,
|
|
showCustomTime: true,
|
|
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);
|
|
|
|
document.getElementById('set').onclick = function () {
|
|
var time = document.getElementById('setTime').value;
|
|
timeline.setCustomTime(time);
|
|
};
|
|
document.getElementById('setTime').value = new Date().toISOString().substring(0, 10);
|
|
|
|
document.getElementById('get').onclick = function () {
|
|
document.getElementById('getTime').innerHTML = timeline.getCustomTime();
|
|
};
|
|
|
|
timeline.on('timechange', function (properties) {
|
|
document.getElementById('timechangeEvent').innerHTML = properties.time;
|
|
});
|
|
timeline.on('timechanged', function (properties) {
|
|
document.getElementById('timechangedEvent').innerHTML = properties.time;
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|