Basic drill-down

Use a master report and select from hyperlinks to open a secondary slave report within the same page.

by Kishoreajey

HTML

<!--Provide URL to visualize.js-->
<script src="https://underscorejs.org/underscore.js"></script>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://jaspersoft.healthcareit.net/jasperserver-pro/client/visualize.js"></script>
<!--Provide container to render your visualization-->
<div>
  <h5>Select a city to open a drilldown report under the original.</h5>
  <div id="main">Main Report here</div>
  <div id="drill-down">Drill down</div>
</div>

CSS

#main {
  float: left;
}

#drill-down {
  float: left;
}

JavaScript

visualize({
  auth: {
    name: "jasperadmin",
    password: "jasperadmin"
  }
}, function(v) {

  v("#main").report({
    resource: "/public/Samples/Reports/IHP_BI/Sample_Report_1",
    linkOptions: {
      beforeRender: function(linkToElemPairs) {
        linkToElemPairs.forEach(showCursor);
      },
      events: {
        "click": function(ev, link) {
          if (link.type == "ReportExecution") {
            v("#drill-down").report({
              resource: link.parameters._report,
              //params: {
                //city: [link.parameters.city],
                //country: link.parameters.country,
                //state: link.parameters.state
              //},
            });
          }
          console.log(link);
        }
      }
    },
    error: function(err) {
      alert(err.message);
    }
  });

  function showCursor(pair) {
    var el = pair.element;
    el.style.cursor = "pointer";
  }

});