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