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 ....
Click on store Name field values and check the drill down output changes in bar chart ....
Sample output Images:
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... :-)
(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
No comments:
Post a Comment