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 |
|
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'
|
63 | },
|
64 | shaded: {
|
65 | orientation: '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'
|
88 | },
|
89 | shaded: {
|
90 | orientation: 'top'
|
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 |