Multiple Dashboards

by Yuriy Bablyukh

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="xtabstrip" class="k-content">
  <ul>
    <li>Paris</li>
    <li>New York</li>
    <li>Gross_Profit_Margin_by_Location</li>
    <li>Pie_Chart</li>
  </ul>
<div>
	<span class="rainy">&nbsp;</span>
	<div class="weather">
		<h2>17<span>&ordm;C</span></h2>
		<p>Rainy weather in Paris.</p>

	</div>
</div>
<div>
	<span class="sunny">&nbsp;</span>
	<div class="weather">
		<h2>29<span>&ordm;C</span></h2>
		<p>Sunny weather in New York.</p>
	</div>
</div>
<div>
	<span class="sunny">&nbsp;</span>
	<div class="weather">
		<h2>21<span>&ordm;C</span></h2>
		<p>Gross_Profit_Margin_by_Location.</p>
<div id="xcontainer2">
    
    </div>
    <script>
        visualize(function (v) {
    				let cDashboard = v.dashboard({
    					resource: "/Self_Service/Gross_Profit_Margin_by_Location",
    					container: "#xcontainer2",
    					success: function() { console.log("dashboard rendered"); },
    					error: function(e) { alert(e); },
    					params: {},
    					runImmediately: true
    				});
        });
            
    </script>
    
	</div>
</div>
<div>
	<div class="weather">
		<h2>16<span>&ordm;C</span></h2>
		<p>Pie_Chart.</p>
    <div id="xcontainer1">
    
    </div>
    <script>
        visualize(function (v) {
    				let cDashboard = v.dashboard({
    					resource: "/Self_Service/Pie_Chart",
    					container: "#xcontainer1",
    					success: function() { console.log("dashboard rendered"); },
    					error: function(e) { alert(e); },
    					params: {},
    					runImmediately: true
    				});
        });
            
    </script>
    
	</div>
</div>
</div>

CSS

#tabstrip {
    width: 700px;
}
.tab {
    padding-left: 10px;
    padding-right: 10px;
}

JavaScript

/* $(document).ready(function () {



    $('#xtabstrip').kendoTabStrip();

    var tabstrip = $('#xtabstrip').data("kendoTabStrip");

    tabstrip.select(0);

}); */