UNPKG

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