First encounter with Visualise.js
As we all know, visualise.js is a javascript framework introduced in JasperServer 5.6, for integration of jasperserver reports & visualizations inside web applications. It is available only with commercial editions of JasperServer 5.6.
Prior to 5.6, there were 2 methods for embedding, the simple HTTP/iframe integration method and the REST web APIs. The iframe way, though simple, did not give much control and limited branding options as it accesses the jasperserver UI itself from within the iframe. It however supports integration of Adhoc/Self service BI. REST APIs provided greater control, leverage to the repository services, greater control on the look and feel. However, it meant more coding, limited interactivity. Visualise.js leverages the REST APIs of jasperServer and provides a simple javaScript API, that could be easily used along with CSS to create webpages that seamlessly integrate interactive reports, with a few lines of code.
The API ranges from basic APIs for authentication, report rendering, resource search, accessing input controls to accessing/control of report events, errors, report hyperlinks. It also provides a way to interact with the JIVE UI components which provides a way to achieve higher interactivity.
After having a look at what visualise has to offer, lets see what it takes to embed a simple report using visualise.js. Below is a code snippet that shows a javascript code that renders a report into a div tag inside the webpage. This report takes one parameter, the store id.
HTML Page contents
<script type="text/javascript" src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>
<div id="container">Embedded a Sample Report</div>
<div id="testreport"></div>
JavaScript code using visualize.js
visualize({
auth: {
name: "joeuser",
password: "joeuser",
organization: ""
}
}, function (v) {
// Report API
v("#testreport").report({
resource: "/public/MyReports/Test1",
params:{"storeid":["19"]},
error: handleError
});
//showing Error
function handleError(err) {
alert(err.message);
}
});
1. Loading the visualise.js script
<script type="text/javascript" src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>This is the script tag which loads the visualize.js script from the location where it is present on the running instance of your JasperServer 5.6 (commercial edition).
2. A HTML container for the report
The division with ID “testreport” is the container for the report. This element will be passed to the visualize.js function when a report is rendered.
3. Authentication with JasperServer
Visualise is the function in visualize.js that establishes a connection with the JRS instance which hosts the report to be embedded. Its first parameter is an object which contains the configuration information required for connectivity – the URL of the JRS instance(server) and the authentication properties (auth).
The above example only shows authentication properties. The server URL is not provided, it internally takes the same server from which we requested the visualize script.
4. Rendering the report
The code for rendering the report is present in the callback function defined in the visualize call. ‘v’ is the client to the JRS instance for which session has been established.
v("#testreport").report({
resource: "/public/MyReports/Test1",
params:{"storeid":["19"]},
error: handleError
});
As can be seen, the selector to the container element in the html (#testreport) has been passed. The parameters are pretty self explanatory. “handleError” is a function which would handle any errors generated by report API.
5. Passing parameters to the report
As seen above, the “params” key in the argument to the report function is used to pass all the parameters to the report. The value has to be an array, even for single values to be passed.
And it is done !!
Hope this gives you basic understanding about visualise.js. A few more blog posts to follow, exploring other APIs of visualise.js. Till then, happy embedding !!
Imp References –
http://community.jaspersoft.com/wiki/visualizejs-api-notes-and-samples
– Shraddha
Helical IT Solutions
Best Open Source Business Intelligence Software Helical Insight is Here
