/
Showing the Dashboard Viewer on the Web Page.html
75 lines (64 loc) · 2.91 KB
/
Showing the Dashboard Viewer on the Web Page.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Showing the Dashboard Viewer on the Web Page</title>
<!-- Stimulsoft Dashboards.JS -->
<script src="../scripts/stimulsoft.reports.js" type="text/javascript"></script>
<script src="../scripts/stimulsoft.dashboards.js" type="text/javascript"></script>
<script src="../scripts/stimulsoft.viewer.js" type="text/javascript"></script>
<!-- Dashboard viewer scripts, may be external -->
<script>
// Viewer options
var options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.scrollbarsMode = true;
// Create the dashboard viewer with default options
var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
// Create a new dashboard instance
var report = Stimulsoft.Report.StiReport.createNewDashboard();
// Load default dashboard from url
report.loadFile("../dashboard/Christmas.mrt");
// Assign dashboard to the viewer, the dashboard will be built automatically after rendering the viewer
viewer.report = report;
</script>
</head>
<body>
<div>
<center>
<h2>My Web Page</h2>
</center>
</div>
<br />
<div style="float: left; width: 15%">
<!-- Buttons -->
<input type="button" style="width: 100%" value="Christmas" OnClick="openDashboardChristmas();" /><br />
<input type="button" style="width: 100%" value="Financial" OnClick="openDashboardFinancial();" /><br />
<input type="button" style="width: 100%" value="Website Analytics" OnClick="openDashboardWebsiteAnalytics();" /><br />
<script>
function openDashboardChristmas() {
// Load dashboard from url
report.loadFile("../dashboard/Christmas.mrt");
// Assign dashboard to the viewer, the dashboard will be built automatically after rendering the viewer
viewer.report = report;
}
function openDashboardFinancial() {
// Load dashboard from url
report.loadFile("../dashboard/Financial.mrt");
// Assign dashboard to the viewer, the dashboard will be built automatically after rendering the viewer
viewer.report = report;
}
function openDashboardWebsiteAnalytics() {
// Load dashboard from url
report.loadFile("../dashboard/Website Analytics.mrt");
// Assign dashboard to the viewer, the dashboard will be built automatically after rendering the viewer
viewer.report = report;
}
</script>
</div>
<div style="float: right; width: 80%; border: 1px solid">
<div id="viewer">
<script>viewer.renderHtml();</script>
</div>
</div>
</body>
</html>