// 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/viz/Hyperlinks/Drill_Reports_with_Controls/main_report",
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";
}
});
<!-- Visualize: Drill-Down in separate container (5.6)
-->
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js?log=true"></script>
<!--Provide container to render your visualization-->
<div>
<div style="width:830px;" id="main"></div>
<div style="width:500px;" id="drill-down"></div>
</div>
#main{
float: left;
}
#drill-down{
float: left;
}
External resources loaded into this fiddle: