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.