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.

105 lines
2.5 KiB

9 years ago
  1. /**
  2. * Created by Alex on 10/27/2014.
  3. */
  4. 'use strict';
  5. var timeline;
  6. var timelineItems = new vis.DataSet();
  7. var timelineGroups = new vis.DataSet();
  8. var graph2d;
  9. var graph2dDataset = [];
  10. var graph2DItems = new vis.DataSet();
  11. var graph2dGroups = new vis.DataSet();
  12. graph2dGroups.add({
  13. id: 'differencePositive', content: 'differencePositive', className: "differencePositive", options: {
  14. drawPoints: false,
  15. style: 'bar',
  16. barChart: {width: 50, align: 'center'} // align: left, center, right
  17. }
  18. });
  19. graph2dGroups.add({
  20. id: 'differenceNegative', content: 'differenceNegative', className: "differenceNegative", options: {
  21. drawPoints: false,
  22. style: 'bar',
  23. barChart: {width: 50, align: 'center'} // align: left, center, right
  24. }
  25. });
  26. var eventCounter;
  27. var selectedGroup = 'duration';
  28. var showDuration = true;
  29. var showPrediction = false;
  30. var showTimeline = true;
  31. var showGraph = false;
  32. var differenceWithPrediction = false;
  33. function draw() {
  34. eventCounter = document.getElementById('eventCounter');
  35. // add items to the DataSet
  36. var timelineContainer = document.getElementById('timeline');
  37. var timelineOptions = {
  38. hiddenDates: [
  39. {start: '2013-10-26 00:00:00', end: '2013-10-28 00:00:00', repeat: 'weekly'}, // daily weekly monthly yearly
  40. {start: '2013-03-29 18:30:00', end: '2013-03-30 08:00:00', repeat: 'daily'} // daily weekly monthly yearly
  41. ],
  42. start: TIMELINE_START,
  43. end: TIMELINE_END,
  44. autoResize: false,
  45. showCustomTime: true,
  46. showCurrentTime: false,
  47. stack: false
  48. };
  49. timeline = new vis.Timeline(timelineContainer, timelineItems, timelineGroups, timelineOptions);
  50. var graph2dContainer = document.getElementById('graph2d');
  51. var graph2dOptions = {
  52. style:'bar',
  53. barChart: {width:50, align:'center', handleOverlap:'sideBySide'},
  54. start: '2014-08-25',
  55. end: '2014-09-25',
  56. autoResize: false,
  57. // height: '450px',
  58. showCurrentTime: false,
  59. catmullRom: false,
  60. showMajorLabels: false,
  61. showMinorLabels: false,
  62. graphHeight:'450px',
  63. dataAxis: {
  64. customRange: {
  65. left: {
  66. min:-0.5
  67. }
  68. }
  69. },
  70. drawPoints:false //{style:'circle'}
  71. };
  72. graph2d = new vis.Graph2d(graph2dContainer, graph2DItems, graph2dGroups, graph2dOptions);
  73. }
  74. window.onresize = function () {
  75. timeline.redraw();
  76. graph2d.redraw();
  77. }
  78. var conn;
  79. if (ONLINE_ONLY == true) {
  80. eve.system.init({
  81. transports: [
  82. {
  83. type: 'local'
  84. }
  85. ]
  86. });
  87. }
  88. else {
  89. eve.system.init({
  90. transports: [
  91. {
  92. type: 'ws'
  93. }
  94. ]
  95. });
  96. }