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.

144 lines
5.1 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph2d | Toggle Groups Example</title>
  5. <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  6. <meta content="utf-8" http-equiv="encoding">
  7. <style type="text/css">
  8. body, html {
  9. font-family: sans-serif;
  10. }
  11. div.graphs {
  12. width:300px;
  13. display:inline-block;
  14. }
  15. </style>
  16. <script src="../../dist/vis.js"></script>
  17. <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  18. </head>
  19. <body>
  20. <h2>Graph2d | Groups Example</h2>
  21. <div style="width:700px; font-size:14px; text-align: justify;">
  22. This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
  23. all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
  24. you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
  25. We then use a setOptions like so:
  26. <pre class="prettyprint lang-js">
  27. graph2d1.setOptions({
  28. groups:{
  29. visibility:{
  30. 0:true, // group id:0 visible
  31. 1:false, // group id:1 hidden
  32. 2:false, // group id:2 hidden
  33. 3:false, // group id:3 hidden
  34. "__ungrouped__":false // default group hidden
  35. }
  36. }
  37. })
  38. </pre>
  39. </div>
  40. <br />
  41. <div class="graphs" id="visualization1"></div>
  42. <div class="graphs" id="visualization2"></div>
  43. <div class="graphs" id="visualization3"></div>
  44. <div class="graphs" id="visualization4"></div>
  45. <div class="graphs" id="visualization5"></div>
  46. <div class="graphs" id="visualization6"></div>
  47. <script type="text/javascript">
  48. // create a dataSet with groups
  49. var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  50. var groups = new vis.DataSet();
  51. groups.add({
  52. id: 0,
  53. content: names[0],
  54. options: {
  55. drawPoints: {
  56. style: 'square' // square, circle
  57. },
  58. shaded: {
  59. orientation: 'bottom' // top, bottom
  60. }
  61. }});
  62. groups.add({
  63. id: 1,
  64. content: names[1],
  65. options: {
  66. style:'bar'
  67. }});
  68. groups.add({
  69. id: 2,
  70. content: names[2],
  71. options: {drawPoints: false}
  72. });
  73. groups.add({
  74. id: 3,
  75. content: names[3],
  76. options: {
  77. drawPoints: {
  78. style: 'circle' // square, circle
  79. },
  80. shaded: {
  81. orientation: 'top' // top, bottom
  82. }
  83. }});
  84. var container = document.getElementById('visualization');
  85. var items = [
  86. {x: '2014-06-13', y: 60},
  87. {x: '2014-06-14', y: 40},
  88. {x: '2014-06-15', y: 55},
  89. {x: '2014-06-16', y: 40},
  90. {x: '2014-06-17', y: 50},
  91. {x: '2014-06-13', y: 30, group: 0},
  92. {x: '2014-06-14', y: 10, group: 0},
  93. {x: '2014-06-15', y: 15, group: 1},
  94. {x: '2014-06-16', y: 30, group: 1},
  95. {x: '2014-06-17', y: 10, group: 1},
  96. {x: '2014-06-18', y: 15, group: 1},
  97. {x: '2014-06-19', y: 52, group: 1},
  98. {x: '2014-06-20', y: 10, group: 1},
  99. {x: '2014-06-21', y: 20, group: 2},
  100. {x: '2014-06-22', y: 60, group: 2},
  101. {x: '2014-06-23', y: 10, group: 2},
  102. {x: '2014-06-24', y: 25, group: 2},
  103. {x: '2014-06-25', y: 30, group: 2},
  104. {x: '2014-06-26', y: 20, group: 3},
  105. {x: '2014-06-27', y: 60, group: 3},
  106. {x: '2014-06-28', y: 10, group: 3},
  107. {x: '2014-06-29', y: 25, group: 3},
  108. {x: '2014-06-30', y: 30, group: 3}
  109. ];
  110. var dataset = new vis.DataSet(items);
  111. var options = {
  112. defaultGroup: 'ungrouped',
  113. legend: false,
  114. graphHeight:200,
  115. start: '2014-06-10',
  116. end: '2014-07-04',
  117. showMajorLabels:false,
  118. showMinorLabels:false
  119. };
  120. var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, groups, options);
  121. var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
  122. var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
  123. var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
  124. var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
  125. var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);
  126. graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
  127. graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
  128. graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
  129. graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
  130. graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
  131. </script>
  132. </body>
  133. </html>