vis.js is a dynamic, browser-based visualization library
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.

84 lines
2.0 KiB

9 years ago
  1. <html>
  2. <head>
  3. <title>Timeline | Bridge</title>
  4. <script src="js/vis/vis.js"></script>
  5. <script src="js/eve.js"></script>
  6. <script src="js/timelineAgent.js"></script>
  7. <link href="js/vis/vis.css" rel="stylesheet" type="text/css" />
  8. <link href="./css/timelineStyle.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11. <p>This page demonstrates the Timeline with custom css classes for individual items.</p>
  12. <div id="mytimeline"></div>
  13. <script type="text/javascript">
  14. var connected = false;
  15. // create data
  16. // note that months are zero-based in the JavaScript Date object
  17. var data = new vis.DataSet();
  18. // called from agent
  19. function addToDataset(item) {
  20. console.log(item)
  21. data.add(item);
  22. }
  23. // called from agent
  24. function clearDataset() {
  25. data.clear();
  26. }
  27. function sessionClosed() {
  28. if (connected === true) {
  29. document.getElementById("overlayNC").style.display = 'block';
  30. }
  31. }
  32. // specify options
  33. var options = {
  34. editable: true
  35. };
  36. // to run this, also have webHttp.js running in node.
  37. eve.system.init({
  38. transports: [
  39. {
  40. type: 'ws',
  41. url: 'ws://agents/:id'
  42. },
  43. {
  44. type: 'http'
  45. }
  46. ]
  47. });
  48. var proxyAddress = 'ws://afternoon-beyond-2302.herokuapp.com/agents/proxy';
  49. var proxyAddressHTTP = 'https://afternoon-beyond-2302.herokuapp.com/agents/proxy';
  50. // proxyAddress = 'ws://127.0.0.1:5000/agents/proxy';
  51. // proxyAddressHTTP = 'http://127.0.0.1:5000/agents/proxy';
  52. timelineProxy = new timelineAgent('timelineAgent', proxyAddress);
  53. timelineProxy.wakeProxy(proxyAddressHTTP);
  54. timelineProxy.connectToProxy();
  55. timelineProxy.getTimelineEvents().then(function (reply) {
  56. addToDataset(reply);
  57. }).catch(function (err) {
  58. console.error(err);
  59. });
  60. // create the timeline
  61. var container = document.getElementById('mytimeline');
  62. timeline = new vis.Timeline(container, data, options);
  63. </script>
  64. </body>
  65. </html>