When displaying a dashboard to the user, there are some cases in which you’d like to display just one maximized visualization. In addition, you might also want to lock the initial visualization and prevent the user from accessing the whole dashboard. You can achieve both scenarios using the Web Client SDK.
Let’s assume that you have a dashboard with three visualizations, where each visualization is showing data for a different division of your company, i.e., “Marketing”, “Sales” and “HR”.
In this example, you’d like to showcase these visualizations in your corporate application. You want to include them as part of the information displayed on each division’s home page.
To open a dashboard with a maximized visualization, you need to use the MaximizedVisualization attribute of $.ig.RevealSettings. When you don’t set a visualization in this attribute, the whole dashboard is displayed.
As shown in Configuring the $.ig.RevealView object, you can display a specific dashboard in your page. This time, you also need to set the MaximizedVisualization attribute. As shown in the code snippet below with the visualization "Sales" from the dashboard with ID "AllDivisions".
<script type="text/javascript">
...
var dashboardId = 'AllDivisions';
var revealSettings = new $.ig.RevealSettings(dashboardId);
$.ig.RevealUtility.loadDashboard(dashboardId, function (dashboard) {
revealSettings.dashboard = dashboard;
revealSettings.maximizedVisualization = dashboard.getVisualizationByTitle('Sales');
new $.ig.RevealView("#revealView", revealSettings);
}, function (error) {
console.log(error);
});
</script>
<div id="revealView" style="height:500px;" />Although the initial maximized visualization will be the one with title ‘Sales’, the end user can still return to the dashboard and see the rest of the visualizations.
You may also want to lock the initial visualization, making it the only one displayed at all times. This way the dashboard works like a single visualization dashboard. This is the concept behind “single visualization mode”.
To turn on the “single visualization mode”, just set the singleVisualizationMode to true as shown below.
$.ig.revealSettings.singleVisualizationMode = true;After adding this single line, the dashboard will work as a single visualization dashboard. You can can do the same for each division’s home page, just replace the title of the visualization in getVisualizationByTitle with the right one.
It is also possible for you to dynamically change the single visualization being displayed, without reloading the page. From the user’s perspective, your app would be a single page application with a selector of divisions and a maximized visualization. After the user chooses one division from the list, the maximized visualization is updated.
You can achieve this scenario by using the maximizeVisualization method in $.ig.RevealView, as shown below:
<script type="text/javascript">
var dashboardId = 'AllDivisions';
var revealSettings = new $.ig.RevealSettings(dashboardId);
$.ig.RevealUtility.loadDashboard(dashboardId, function (dashboard) {
revealSettings.dashboard = dashboard;
revealSettings.singleVisualizationMode = true;
revealSettings.maximizedVisualization = dashboard.getVisualizationByTitle('Sales');
window.revealView = new $.ig.RevealView("#revealView", revealSettings);
}, function (error) {
console.log(error);
});
function maximizeVisualization(title) {
window.revealView.maximizeVisualization(
window.revealView.dashboard.getVisualizationByTitle(title)
);
}
</script>
<section style="display:grid;grid-template-rows:30px auto;">
<section style="display:grid;grid-template-columns:auto auto auto;">
<button onclick="maximizeVisualization('Sales')">Sales</button>
<button onclick="maximizeVisualization('HR')">HR</button>
<button onclick="maximizeVisualization('Marketing')">Marketing</button>
</section>
<div id="revealView" style="height:500px;" />
</section>To take into account:
The $.ig.RevealView object is set in _window.revealView in order to use it later when maximizeVisualization is called.
The buttons added to the section before the div are used just as an example. They were added as a means to switch the maximized visualization, in your case you’ll have to to use a similar code in your application.
In this example, the buttons are hardcoded to match the visualizations in the sample dashboard, but you can also generate the list of buttons dynamically by iterating the list of visualizations in the dashboard. For further details see $.ig.RVDashboard.visualizations.