Visualize: Drill-Down in separate container (5.6)

by srikar7

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!-- Visualize: Drill-Down in separate container  (5.6)
  -->

<script type='text/javascript' src="http://localhost:8081/jasperserver-pro/client/visualize.js?log=true"></script>
<!--Provide container to render your visualization-->
<div>
  <div style="width:600px;" id="main"></div>
  <div style="width:300px;" id="drill-down"></div>
</div>

CSS

#main {
  float: left;
}

#drill-down {
  float: left;
}

JavaScript

// Visualize: Drill-Down in separate container  (5.6)

// This Fiddle uses a non-standard demo report:
//    /public/viz/Hyperlinks/Drill_Reports_with_Controls/main_report

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

  v("#main").report({
    resource: "/public/Samples/Reports/AccountList",
    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: {
                _report: [link.parameters._report],
                reportTitle: [link.parameters.reportTitle],
                parStoreId: [link.parameters.parStoreId]
              },
            });
          }
          console.log(link);
        }
      }
    },
    error: function(err) {
      alert(err.message);
    }
  });

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

});