Multiple Dashboards

by Yuriy Bablyukh

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<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>


    </div>
  </div>
  <div>
    <div class="weather">
      <h2>16<span>&ordm;C</span></h2>
      <p>Pie_Chart.</p>
      <div id="xcontainer1">

      </div>

    </div>
  </div>
</div>

CSS

#tabstrip {
  width: 700px;
 
}

.tab {
  padding-left: 10px;
  padding-right: 10px;
}
#xcontainer2{
  height:500px;
}

#xcontainer1{
  height:500px;
}

JavaScript

$("#xtabstrip").kendoTabStrip({
  animation: {
    open: {
      effects: "fadeIn"
    }
  }
});


visualize(function(v) {


  let cDashboard = v.dashboard({
    resource: "/public/Samples/Dashboards/1._Supermart_Dashboard",
    container: "#xcontainer1",
    success: function() {
      console.log("dashboard rendered");
    },
    error: function(e) {
      alert(e);
    },
    params: {},
    runImmediately: true
  });
  
  let cDashboard2 = 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
});
  
});