|
|
- <!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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
- <script src="../../googleAnalytics.js"></script>
- </head>
- <body>
-
- <p>
- The Timeline has functions to add multiple custom time bars which can be dragged by the user.
- </p>
- <p>
- <input type="button" id="add" value="Add custom vertical bar">
- <input type="text" id="barId" placeholder="custom bar ID">
- <input type="checkbox" id="isEdit" placeholder="user can edit time" checked>
- <label for="isEdit">Editable: User can change time.</label>
- </p>
- <p>
- <input type="button" id="remove" value="Remove custom vertical bar">
- <input type="text" id="barIndex" value="t1" placeholder="custom bar ID">
- </p>
- <p>
- <code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
- </p>
- <p>
- <code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
- </p><br>
-
- <div id="visualization"></div>
-
- <script type="text/javascript">
- var container = document.getElementById('visualization');
- var items = new vis.DataSet();
- var customDate = new Date();
- var options = {
- showCurrentTime: 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);
-
- // Set first time bar
- customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
- timeline.addCustomTime(customDate, 't1');
- timeline.setCustomTimeTitle(function(time){
- return "I'm t1!";
- }, "t1");
-
- document.getElementById('add').onclick = function () {
- try {
- customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
- var barId = document.getElementById('barId').value || undefined;
- var usereditable = document.getElementById('isEdit').checked || false;
- timeline.addCustomTime(customDate, barId, { editable: usereditable });
- timeline.setCustomTimeTitle(function(time){
- return "I'm "+barId+"!";
- }, barId);
- document.getElementById('barId').value = '';
- }
- catch (err) {
- console.log(err);
- alert(err);
- }
- };
-
- document.getElementById('remove').onclick = function () {
- try {
- timeline.removeCustomTime(document.getElementById('barIndex').value);
- document.getElementById('barIndex').value = '';
- }
- catch (err) {
- console.log(err);
- alert(err);
- }
- };
-
- timeline.on('timechange', function (properties) {
- document.getElementById('timechangeBar').innerHTML = properties.id;
- document.getElementById('timechangeEvent').innerHTML = properties.time;
- });
- timeline.on('timechanged', function (properties) {
- document.getElementById('timechangedBar').innerHTML = properties.id;
- document.getElementById('timechangedEvent').innerHTML = properties.time;
- });
-
- </script>
- </body>
- </html>
|
