Jaspersoft BI Tools

iReport,Jaspersoft Design Studio,Jaspersoft Server, Schema Workbench,Analysis,Dashboards, Self Service BI, Domains,Topics,Ad-Hoc Reports, Jaspersoft ETL, Embedding BI,HTML-5 charts, Fusion Charts,JFree Charts,Drill down reports , Drill down Dashboards,Visualize.js, Performance Tuning, D3 Charts, Jaspersoft Customization

Tuesday, June 24, 2014

Drill down reports on web page (OR) Drill down in different containers (OR) Inter reports communication on web-page using Jaspersoft visualize.js



Drill down reports on web page (OR) Drill down in different containers (OR) Inter panel communication on web-page using visualize.js

This post will talk about the drill down functionality using visualize.js scripting language.

Example is taken from Jasper Server already available reports.

Testing Environment ready :

1) JasperServer 5.6 professional running.
2) JSFiddle Online Editor.
3) Reports :
Main Report : /public/Samples/Reports/AccountList
Dril down Report : /public/Samples/Reports/StoreDetails


Learn below things
1) Plain Text authentication of jasper server.
2) Parameter passing from main report to drill down report.(Parameter = field value).

3) Responsiveness.


Step 1 : HTML Code

a) src for visualize.js installed in jasper server(pointing to the script source).
b) Taking divisions of webpage for 2 reports and setting height & width and giving ids for the reports ( id's acts as containers for reports).


<script src="http://underscorejs.org/underscore.js"></script>

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

<!-- Provide the URL to visualize.js -->

<script src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>

<!-- Provide a container for the main report and one for the drill-down -->

<!--

<div>

<div style="width:830px;" id="main"></div>

<div style="width:500px;" id="drill-down"></div>

</div>

-->

<div>

<div id="main" style="background-color:#FFD700;height:200px;width:400px;float:left;">

</div>



<div id="drill-down" style="background-color:#EEEEEE;height:200px;width:200px;float:left;">

Content goes here</div>

</div>

Step 2: CSS Code :Optional for testing purpose
#main{

float: left;

}

#drill-down{

float: left;

}

Step 3 : Visualize.js code
a) Authenticate to jasper server using palin text format ( will let you know other post how to hide or other mechanism)
b) Render main report 1st in container.
c) Perform click action.
d) On clicking of field value , take the value in parameter and pass to drill down report.

NOTE : Here we are not giving the location of drill down report .. At the time of report creating we write drill down report path as we did normally the hyperlink. Find the image for quick understanding.



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: {

parStoreId: [link.parameters.parStoreId],

},

});

}

console.log(link);

}

}

},

error: function (err) {

alert(err.message);

}

});

function showCursor(pair){

var el = pair.element;

el.style.cursor = "pointer";

}

});


Step 4 :
Click on Run button. You can find the result in “Results” tab in jsFiddle editor. 

Click on store Name field values and check the drill down output changes in bar chart ....


Sample output Images:






OUTPUT on HTML Page :




Download the sample HTML page that consists of above example here(Click Here)
(OR)
 Check out the example on online : http://jsfiddle.net/2PFmd/7/


In this post there are some known issues like page div heights and widths and chart type change is coming twice... :-)
:-)

Sadakar
BI developer 
Jasper/Pentaho/Talend ETL