Multiple Dashboards

by Yuriy Bablyukh

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Paris</a></li>
    <li><a href="#tabs-2">New York</a></li>
    <li><a href="#tabs-3">Gross_Profit_Margin_by_Location</a></li>
    <li><a href="#tabs-4">Pie_Chart</a></li>
  </ul>
  <div id="tabs-1">

    
  </div>
  <div id="tabs-2">
    
  </div>
  <div id="tabs-3">

    
  </div>
  <div id="tabs-4">
   
  </div>
</div>

CSS

#tabs {
  width: 700px;
}

.tab {
  padding-left: 10px;
  padding-right: 10px;
}

JavaScript

$(document).ready(function() {

  $(function() {
    $("#tabs").tabs();
  });

  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
    });

    let cDashboard2 = v.dashboard({
      resource: "/Self_Service/Pie_Chart",
      container: "#xcontainer1",
      success: function() {
        console.log("dashboard rendered");
      },
      error: function(e) {
        alert(e);
      },
      params: {},
      runImmediately: true
    });

  });

});