diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
| commit | b28028ac4082842143b0f528d6bc539da6ccb419 (patch) | |
| tree | 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/timeline/editing/updateDataOnEvent.html | |
| parent | 676270d21beed31d767a06c89522198c77d5d865 (diff) | |
mega changes, including updates and X
Diffstat (limited to 'www/lib/vis/examples/timeline/editing/updateDataOnEvent.html')
| -rw-r--r-- | www/lib/vis/examples/timeline/editing/updateDataOnEvent.html | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html new file mode 100644 index 00000000..985551ee --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html @@ -0,0 +1,90 @@ +<html> +<head> + <title>Timeline | Update data on event</title> + + <style type="text/css"> + body { + font: 11pt verdana; + } + + .vis.timeline .item.past { + filter: alpha(opacity=50); + opacity: 0.5; + } + </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 style="width: 600px;"> + When the custom time bar is shown, the user can drag this bar to a specific + time. The Timeline sends an event that the custom time is changed, after + which the contents of the timeline can be changed according to the specified + time in past or future. +</p> + +<div id="customTime"> </div> +<p></p> + +<div id="mytimeline"></div> + + +<script> + // create a data set + var data = new vis.DataSet([ + { + id: 1, + start: new Date((new Date()).getTime() - 60 * 1000), + end: new Date(), + content: 'Dynamic event' + } + ]); + + // specify options + var options = { + showCurrentTime: true + }; + + // create a timeline + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, data, options); + + timeline.addCustomTime(new Date()); + + // add event listener + timeline.on('timechange', function (event) { + document.getElementById("customTime").innerHTML = "Custom Time: " + event.time; + + var item = data.get(1); + if (event.time > item.start) { + item.end = new Date(event.time); + var now = new Date(); + if (event.time < now) { + item.content = "Dynamic event (past)"; + item.className = 'past'; + } + else if (event.time > now) { + item.content = "Dynamic event (future)"; + item.className = 'future'; + } + else { + item.content = "Dynamic event (now)"; + item.className = 'now'; + } + + data.update(item); + } + }); + + // set a custom range from -2 minute to +3 minutes current time + var start = new Date((new Date()).getTime() - 2 * 60 * 1000); + var end = new Date((new Date()).getTime() + 3 * 60 * 1000); + timeline.setWindow(start, end, {animation: false}); + +</script> + +</body> +</html> |