Tuesday 24 June 2014

Installation of Jasper Studio 5.6.0 final in Cent OS - 32 bit machine

Small things some times make sense ..... 

1) Download software from below location 
https://d2ev2buidpvgfo.cloudfront.net/5.6/jaspersoftstudiopro-5.6.0.final-linux-x86.tgz
(You need to have jasper account)

(OR)
http://community.jaspersoft.com/download

2) Downloaded copy name/file name is : 
jaspersoftstudiopro-5.6.0.final-linux-x86.tgz

3) Double click on this to extract the file to a folder 
Sample Image :

4) Create a folder in your HOME folder
for example :

/home/sada/Jasper Studio 5.6

In step 3 , you can find the folder in a window.. Just drag and drop that folder into above created folder.
Sample Image:


Step 5:
Navigate to /home/sada/Jasper Studio 5.6/jaspersoftstudiopro-5.6.0.final

and double click on Jaspersoft Studio Professional icon and now your studio is ready to start reporting.



:)





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 
 

Monday 23 June 2014

Embedding a report with parameter using visualize.js in Japsersoft - A test scenario

This post is a replica of https://www.youtube.com/watch?v=_VoM7OYkcNQ&feature=youtu.be and this post is the test outcome for me.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="container"><div>Why Jaspersoft</div></div>

<script type="text/javascript" src="http://localhost:8081/jasperserver-pro/client/visualize.js?_opt=false&logLevel=debug"></script> 
<script type="text/javascript">
visualize(
    {
        auth:{
        name:"jasperadmin",
        password:"jasperadmin"
        }
    },function (v){
    var report=v.report({
        resource : "/public/Samples/Reports/9.CustomerDetailReport",
        container:"#container",
        params:{"customerId":[4033]}
    });     
});
</script>

</body>
</html>





:-) 

Friday 20 June 2014

Responsive Jasper dashboard designing using visualize.js + HTML 5 + CSS for 3rd party application - Embedding BI in Jaspersoft using visualize.js - The beginners Guide

Hi Guys,

Jasper is going pretty with it's commercial features... First of all, I'd like to say thanks to the TIBCO Jasper Team for it's awesome new product(Visualize.js) for Embedding BI...

Apart from dashboard designing in internal Dashboard Editor of Jasper Server, now we can create dashboards in HTML pages using HTML5 + CSS + Java Script +Visualize.js and more.... Simply you can call these HTML pages in your 3rd party application..

In my previous tutorial Click this I have discussed about the trail of Embedding BI using Visualize.js + HTML+CSS on online JSFIDDLE editor (Which is taken from jasper video tutorials).

In this post, I'd like to share my 1st experience in designing a responsive webpage using visualize.js for jasper reports...

As this is my 1st exploration, I've taken simple example and the reports on the webpage are static. I believe this post will give some idea on implementing visualize.js for Embedding BI to the beginners like me with jasper's new product. 

I'm also thankful to the team members of web-designers who shared their knowledge in giving tips of HTML-5 and the panels for this particular example.

What you can learn in this post ?
1. Authenticating jasper server using visualize.js javascript.
2. Calling a report first then calling multiple Reports.
3. Write panel code for reports to render using HTML5+CSS.
4. How to call the designed webpage(let's say : dashboar.html) in 3rd party application (i.e., in the server - tomcat server ).

What are the future workouts on the same example? (Will post another write up once worked out )
1. Parameter Passing.
2. Hyperlinks , Drill downs ( Inter Chart drill down on the same page + Next web page drill down)

Benefits :
1) Responsiveness in all the devices ( Mobile, iPad, Laptop, Desktop).  - As of now tested in Desktop but with browser re-sizing(like mobile width,iPad width).
2) Fast rendering of the reports compared with normal dashboard rendering. - 5.6 has improved performance in getting the report output.

I'm not going to discuss about reports development instead talking about pre-defined reports calling in web-page. 

Software Ready :
1) Jasper Server 5.6 installed.
2) Your 3rd party web server (Tomcat Server(or any other) for application where you are going to deploy the web-page).

Knowledge Required : HTML-5+CSS+Java Script+Visualize.js+Jasper Reports+Jasper Server.

Steps to follow : This is a beginners guide... working on remaining things....

If you are an expert in HTML,CSS,JavaScript you can take individual files for them ...
This post will talk about mixture of all the code in a single file. 

Step 1 : Creating a folder and HTML file
a) Create a folder (Example : test) and inside it create a file ( Example : dashboard1.html)
b) Open the file in Notepad++ in HTML mode.

Step 2 : Coding in HTML file
Write your HTML code - i.e., divide the web-page as panels for your charts .. In this example I've taken 3 divisions with the help of WEB-DESIGNERS... These web-page divisions should be responsive as shown in below images.
Image-1:


Image 2: Resize 2 of web page


Image-3:Resize 3 of web page





The plain HTML-5 code for responsive webpage  is given below for the above images. . Take help of your web-designer..


<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style type="text/css">

*{ margin:0; padding:0;}

*, *:before, *:after {

box-sizing: border-box;

}

.main {

width:100%;

margin-top:20px;



}

.column{

float: left;

width: 33.3333%;

padding:0 20px;

text-align:center;

}

.column div{ padding:20px 0px;}

.column_1 div{

background-color: #3F5E6F;

border-color: #36505F;

color: #FFFFFF;

}

.column_2 div{

background-color: #006848;

border-color: #004E36;

color: #FFFFFF;

}

.column_3 div{

background-color: #D76300;

border-color: #BE5700;

color: #FFFFFF;

}

@media screen and (max-width:1000px)

{

.column{ width:100% !important; margin-bottom:10px}

}

</style>

</head>



<body>

<div class="main">

<div class="column column_1"><div>Report1</div></div>

<div class="column column_2"><div>Report2</div></div>

<div class="column column_3"><div>Report3</div></div>

</div>

</body>

</html>


Step-3:
 Calling jasper server using visualize.js code - write visualize.js code in the above html file properly to authenticate the jasper server and the required reports..

I have taken simple report and called that report 3 times in 3 divisions with chart type changes as a demo purpose.. you can call your own created reports..

After writing the visualize.js code you HMML file code should looks like as below.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
*{ margin:0; padding:0;}
*, *:before, *:after {
    box-sizing: border-box;
}
.main {
    width:100%;
    margin-top:20px;
  
}
.column{
    float: left;
    width: 33.3333%;
    padding:0 20px;
    text-align:center;
}
.column div{ padding:20px 0px;}
.column_1 div{
    /* background-color: #3F5E6F; */
    border-color: #36505F;
    color: #FFFFFF;
}
.column_2 div{
    /* background-color: #006848; */
    border-color: #004E36;
    color: #FFFFFF;
}
.column_3 div{
    /* background-color: #D76300; */
    border-color: #BE5700;
    color: #FFFFFF;
}
@media screen and (max-width:1000px)
{
    .column{ width:100% !important; margin-bottom:10px}
}
</style>
</head>

<body>
<div class="main">
    <div id="container" class="column column_1"><div>Why Jaspersoft</div></div>
    <div id="container2" class="column column_2"><div>Register for the Demo</div></div>
    <div id="container3" class="column column_3"><div>Quick-Start Guide</div></div>
</div>

<script type="text/javascript" src="http://localhost:8081/jasperserver-pro/client/visualize.js?_opt=false&logLevel=debug"></script>
<script type="text/javascript">
visualize(
{
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization:"organization_1"
//timezone: "Europe/Helsinki"
}
},

function (v) {

//'v' it's a client to JRS instance initialized above
// with a session established for joeuser from organization_1
//alert("Welcome! JRS Authentication successful.");

v("#container").report({resource:"/public/Samples/Reports/01._Geographic_Results_by_Segment_Report" });
v("#container2").report({resource:"/public/Samples/Reports/01._Geographic_Results_by_Segment_Report" });
v("#container3").report({resource:"/public/Samples/Reports/01._Geographic_Results_by_Segment_Report" });
},

function (err) {
alert("Auth error! Server said: " + err.message);
});


</script>

</body>


</html>

Step-4:
Deploy the folder in tomcat webapps folder.
tomcat/webapps/test
(OR) keep the folder where ever you require in your web-application(i.e., in project folders).

Step -5:
Call the page in the browser URL .i.e., http://192.123.1.34:8080/test/dashboard.html
That's it .. you have done with the dashboard like web-page consists of jasper reports which is called Embedding BI using jasper reports...

Sample Images looks like below for the above example...

Image 1 : Laptop OR Desktop browser View

Download the example here :  Click Me





Image 2 : Mobile View - Resize of browser - Not tested in Mobile (Hmmmmmm..... No smart phone yet)





IMP NOTE :
1. Always call the webpage in browser URL with host specific but not with the file path.
i.e.,
Correct : http://192.168.1.134:8080/test/dashboard.html
Incorrect: http://localhost:8080/test/dashboard.html (Specific to my case )
Incorrect : file:///C:/Users/sadakar/Desktop/test/dashboard.html (This works only for HTML but not for visualze.js scripting for the reports.

2. Use fiddle.net editor to separate the HTML,CSS and visualize.js code for testing purpose.

3. Google Chrome is preferable browser in my view (Of course, the example will work in all the popular web browsers like Mozilla, Safari).

Thank you for reading my little document & get back to me with your valuable suggestions on improving the example in comment box.. I hope this article will useful for some people who is starting with visulaize.js


Go New With JasperSoft....!!!!

SADAKAR
BI DEVELOPER
(JasperSoft/Pentaho/Talend ETL)

"I believe in - learning never exhausts the mind.... "

Monday 16 June 2014

Jaspersoft Embedding BI with Visualize.js - The begineers Guide/Sample testing using JSFIDDLE online Editor

Hi Guys,

This post will talk about the new product of Jasper. i.e., Visualize.js ... java script programming for Embedding the reports in 3rd party applications.

This new product programming works only with professional or Enterprise servers..

Topic : Authenticating to jasper server & calling a simple report(without parameters).

This example is already given by jasper people in video tutorial and it's just my attempt in testing.

NOTE : It's a replacement of iFrame tags for Embedding BI & you can do experimenting on rendering reports on the webpage using visualize.js java script.  

The day when jasper has released (since a week ago) it's 5.6 new release , have started learning & have been trying to execute the plain-text login of jasper server and calling a simple report using visualize.js ,finally today is the outcome.. that too with a certain limitation of browser for me...

Was testing every time in Mozilla browser but not in any others..(The legacy systems with Cents OS's :( ) finally after spending complete 3 days over it tried in Chrome and successfully done with sample. As of I do not have reason why it has not executed in Mozilla browser rather a message saying visulize.js not initialized in Mozilla(29.0.1) when tested with firebug tool. Will update this paragraph once I find the reason for it or Reader or experts  are encouraged to add your points for the same or other things in comment box and will take them into consideration will update accordingly.



The tutorials are suggesting http://jsfiddle.net/ online Editor to test the Embeddable report or reports in the webpage.

On other hand, you can write all the html+visulize.js java script in an HTML page in your 3rd party application and test it..

Japser is going pretty with it's enterprise features....


How you can test this Embedding BI in JSFiddle using visulaize.js ?  Here are the steps to follow.

1) Start your jasper server(5.6) - Confirm the start of server by typing http://localhost:8080/jasperserver-pro in the URL

2) Open your browser( I have preferred Chrome after a 3 days testing on Mozilla firefox).

3) Type http://jsfiddle.net in the browser URL (Authentication to the site is not mandatory but good to have).

4) You will be dividing the programming in 3 categories
 i) HTML scripting
ii) CSS scripting and
iii) visualize.js scripting.


i) HTML scripting
1)  Calling source of visualize.js using script tag with src attribute.
2) Defining container for your report.
The code looks as follows.

<!-- Provide URL to Visualize.js -->
<script type="text/javascript" src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>
<!-- Provide container to render your visualization -->
<div id="container"></div>


ii) For this example  I have skipped css scripting as I'm replicating the video tutorial for testing purpose ..

iii) visualize.js java script code
Authentication code & calling a simple report





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

}, function (v) {
    //render report from provided resource
    v("#container").report({
        resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
        error: handleError
    });
    //show error
    function handleError(err) {
        alert(err.message);
    }
}
);

Just click on the Run button and observe the output in the Result section of fiddle editor.

Sample output Image in JSFIDDLE



 References

1) http://jsfiddle.net/NesterOne/2Km35/3/
2) http://community.jaspersoft.com//questions/839637/unable-render-report-using-visualizejs-jsfiddle

3) https://www.youtube.com/watch?v=xGbcQb1N-gU&feature=youtu.be

4) http://community.jaspersoft.com/project/visualizejs


Thank you :-) Going to explore more in future...


SADAKAR
BI developer.













Saturday 14 June 2014

Tip : location of log files for jasperserver.

Hi Guys,

There are different log files for jasper server.

Location of Tomcat Server Log files for jasper server.
C:\Jaspersoft\jasperreports-server-cp-5.5.0\apache-tomcat\logs

Location of Jasper Server Log files.
C:\Jaspersoft\jasperreports-server-cp-5.5.0\apache-tomcat\webapps\jasperserver\WEB-INF\logs

Some times small things take your time in finding. ... :-)



Wednesday 11 June 2014

Jasperserver 5.6 professional installation in Cent OS 6.5 - 32 bit Operating System

Hi Guys,

Below are the steps to install jasperserver 5.6 professional in Cent OS 6.5 & it's a bundled installation.

1. Download the software from below link
http://www.jaspersoft.com/three-ways-test-drive-jaspersoft-bi-software

OR

http://community.jaspersoft.com/download

2.  Go to the download folder and open that folder in terminal

3. On the command prompt issue below command.

chmod 777 jasperreports-server-5.6-linux-x86-installer.run

4. Next run the installer from command prompt.
i.e.,
./jasperreports-server-5.6-linux-x86-installer.run

Click on series of Forward buttons and wait for the installation done..

That's it, Open your browser and give below URL

http://localhost:8080/jasperserver-pro

NOTE : 
Installation goes into home folder of your Cent OS. 







Jaspersoft new release - 5.6 & features in new release - Quick links

Hello every one...

Jasper has released it's latest stable community & professional versions..

Below are the various links for quick navigation...

1) Editions Comparison.
http://www.jaspersoft.com/editions

2) Mobile Analytics
http://www.jaspersoft.com/jaspersoft-mobile-analytics

3) New product for Embedding BI - Visualize.js
http://community.jaspersoft.com/wiki/visualizejs-tutorials

4) What are the new features in 5.6 ?
http://community.jaspersoft.com/wiki/tibco-jaspersoft-bi-suite-v56-highlights

:-)