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