-
Notifications
You must be signed in to change notification settings - Fork 13
/
9_Single_Visualization.html
117 lines (99 loc) · 3.5 KB
/
9_Single_Visualization.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"
src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
<!-- This is for the jsfiddle button. You don't need it in your application. -->
<script type="text/javascript" src="js/jsfiddle.js"></script>
</head>
<body>
<div>This example shows how to use Embedding SDK to show single visualization. </div>
<div id="visualPanel">
<select id="visualSelector"></select>
<button onclick="resizeVisual('maximized')">Max Size</button>
<button onclick="resizeVisual('normal')">Normal Size</button>
<input type="checkbox" id="resizeButtonVisible" checked><span>Resize Button</span>
</div>
<div id="mydossier"></div>
<script type="text/javascript">
var url = "https://demo.microstrategy.com/MicroStrategyLibrary/app/EC70648611E7A2F962E90080EFD58751/B9AD59BA4AD8B047047212BAE1A236A3";
var key = "W367";
document.addEventListener("DOMContentLoaded", function () {
var container = document.getElementById("mydossier");
//This page has multiple visualizations
microstrategy.dossier.create({
url: url,
enableResponsive: true,
placeholder: container,
containerHeight: '1000px',
enableCollaboration: false,
dockedTOC: {
canClose: true,
dockChangeable: false,
isDocked: false
},
navigationBar: {
enabled: false
},
//Config the visualization appearances
visualizationAppearances: [{
visualizationKey: key,
size: "maximized",
resizeButtonVisible: false
}]
}).then((dossier) => {
d = dossier;
d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_SWITCHED, updateVisuals);
d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_LOADED, updateVisuals);
d.registerEventHandler(microstrategy.dossier.EventType.ON_VISUALIZATION_RESIZED, handleVisualizationResized);
updateVisuals();
})
});
//Event handler for visualization resized.
handleVisualizationResized = function (e) {
//Add your code here
console.log("Visualization Resized Event");
}
//Populate the visualization selector
updateVisuals = function () {
d.getCurrentPageVisualizationList().then((visuals) => {
let s = document.getElementById("visualSelector");
while (s.firstChild) {
s.removeChild(s.lastChild);
}
for (visual of visuals) {
let o = document.createElement("option");
o.value = visual.key;
o.innerText = visual.name;
if (visual.key === key) {
o.selected = true;
}
s.appendChild(o);
}
})
}
resizeVisual = function (size) {
//Change Visualization Size programmatically
let visualSelector = document.getElementById("visualSelector");
let key = visualSelector.selectedOptions[0].value;
let resizeButtonVisible = document.getElementById("resizeButtonVisible").checked;
d.changeVisualizationSize({
visualizationKey: key,
size: size,
resizeButtonVisible: resizeButtonVisible
})
.then((visualization) => {
console.log(
"The follow visualization is resized: ",
visualization
);
})
.catch((error) => {
console.log(error);
});
}
</script>
</body>
</html>