AngularJS Directive To Embed JasperServer Reports Using Visualize.js

Posted on by By Ramu Vudugula, in Business Intelligence, Jaspersoft, Open Source Business Intelligence | 0

Embedding a jasper report in an application using jasper visualize.js and Angular JS

Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.

Click Here to Free Download

Jasper Server
Angular Js CDN


1. Create a HTML page and include jasper visualize url, angular js url

Angular Js url

<script src=""></script>

Jasper visualize url

<script type="text/javascript" src="http://<host>:<portNumber>/jasperserver-pro/client/visualize.js"></script>

2. Create angular app in html body, add containers and directives

<body ng-app="app">
<div ng-controller="ReportController">
<visualize id='report' resource='report.resource'></visualize>


ng-app directive initializes an AngularJS application.

The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.

In addition to all the built-in AngularJS directives, you can create your own directives. New directives are created by using the .directive function. To invoke the new directive, make an HTML element with the same tag name as the new directive.

*Resource* will receive the jasper report path from the controller module

3. Create a javascript file and include the same file in html

<script src="filename.js"></script>

4. In filename.js file add angular js app module and directive module

i. create a module is by using the AngularJS function angular.module

angular.module('app', [])

The “app” parameter refers to an HTML element in which the application will run.

Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.

Grab The 30 Days Free Trail

ii. Add a controller to your application, and refer to the controller with the ng-controller directive

.controller('ReportController', ['$scope', function($scope) {
$ = {
resource: '/public/Samples/Reports/ProfitDetailReport'

Inside controller add a scope and provide the specific jasper report path

iii. In html we have created our own directive i.e visualize. Configure our Jasper Server connection and render the jasper report inside the directive
Inside this directive we will authenticate jasper server using credentials and it will load jasper report which had specified in controller and render to the id which had mentioned in html

.directive('visualize', function() {
return {
restrict: 'E',
transclude: true,
scope: {
resource: '='
template: '<div ng-transclude></div>',
link: function (scope, element, attrs) {
if (angular.isDefined(scope.resource)) {
/* Configure your jasperserver connection */
auth: {
name: "jasperuser",
password: "jasperuser"

//render report
function (v) {
var report ={
resource: scope.resource, //report path
container: "#"+element[0].id, //id assigned in html
error: function(){ //TODO handle error creating report

console.log("report loaded");
console.log("report error")

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

Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.

Get your 30 Days Trail Version

Please add the code mentioned in steps i,ii and iii in js file and run the html file. Jasper Report will render


Best Open Source Business Intelligence Software Helical Insight is Here


A Business Intelligence Framework

Ramu Vudugula
BI Developer

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments