D3 Bubble Chart Integration with Jaspersoft

In this blog we will be discussing about D3 Bubble Chart Integration with Jaspersoft using HTML method of integration.

All the reports are develop using ireport 5.5 professional and jasper server 5.5

As html component of jasper server does not load any scripts in the html component, we loaded the script in one of the decorator page(jsp page). The page is located at the location:


In the page we included the scripts which we want to load. We added the following code in the jsp page at line no 46:

<script type="text/javascript" language="JavaScript"

The script to be added should be kept at location:


Bubble Chart

Bubble Charts Integration with Jaspersoft

Bubble Charts Integration with Jaspersoft

    Bubble Chart:-

For this chart we need to include one more js script file in the decorator page as described in the start of the document.
The js file is sankey.js and can be downloaded from


Sample Code is shown below:

var svg = dimple.newSvg("#chartContainer", 1090, 500);
var data = [
"Analyst":"Cidalina Rivera",
"Total Minutes":2114200,
"Minutes Per Item":1100,
"% SLA":80
"Analyst":"Kiran Parvathala",
"Total Minutes":391800,
"Minutes Per Item":1959,
"% SLA":21
"Analyst":"KrishnaReddy Mavuru",
"Total Minutes":1056125,
"Minutes Per Item":1207,
"% SLA":26
"Analyst":"Narasimha Dara",
"Total Minutes":386740,
"Minutes Per Item":610,
"% SLA":30
"Analyst":"AslamJavid Shaik",
"Total Minutes":1573856,
"Minutes Per Item":1096,
"% SLA":94
"Analyst":"Harini Vemulapalli",
"Total Minutes":2846340,
"Minutes Per Item":1890,
"% SLA":100
"Analyst":"William Nelson",
"Total Minutes":1205502,
"Minutes Per Item":662,
"% SLA":40
"Analyst":"Janaki Govindarajan",
"Category":"Batch Job",
"Total Minutes":72684,
"Minutes Per Item":673,
"% SLA":79
"Analyst":"Chiranjeevi Krishna Karne",
"Total Minutes":542348,
"Minutes Per Item":3307,
"% SLA":52
"Analyst":"Masaru Hirata",
"Total Minutes":129090,
"Minutes Per Item":662,
"% SLA":12
"Analyst":"Naveen Kodali",
"Total Minutes":75076,
"Minutes Per Item":548,
"% SLA":84
"Analyst":"JoshyPeter Joseph",
"Total Minutes":574860,
"Minutes Per Item":2948,
"% SLA":27
"Analyst":"Maheshwar Malkapuram",
"Total Minutes":19845,
"Minutes Per Item":105,
"% SLA":92
"Analyst":"Sunil Bhalerao",
"Total Minutes":353000,
"Minutes Per Item":1765,
"% SLA":20
"Analyst":"Tina Chan-Browne",
"Total Minutes":51121,
"Minutes Per Item":469,
"% SLA":95
"Analyst":"Sirajuddin Mohammad",
"Total Minutes":323363,
"Minutes Per Item":1693,
"% SLA":47
"Analyst":"Nishanth Nadam",
"Total Minutes":620000,
"Minutes Per Item":10000,
"% SLA":22
"Analyst":"Santoshkumar Shinde",
"Total Minutes":715000,
"Minutes Per Item":11000,
"% SLA":90
"Analyst":"Keith Moller",
"Total Minutes":948000,
"Minutes Per Item":12000,
"% SLA":100
"Analyst":"AshokKumar Sangeetham",
"Total Minutes":1166550,
"Minutes Per Item":7070,
"% SLA":88
data = dimple.filterData(data, "Date", "1/1/2011");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(400, 60, 500, 330);
myChart.addMeasureAxis("x", "Minutes Per Item");
myChart.addMeasureAxis("y", "Total Minutes");
myChart.addMeasureAxis("z", "% SLA");
myChart.addSeries(["Analyst","Category"], dimple.plot.bubble);
myChart.addLegend(600, 10, 360, 30, "right");

    Integration with JasperServer:

The data which we use for developing the calendar view can be fetched from any database. The data fetched from database is stored in a variable and is then accessed in the html component using the same variable. Applying this of process makes the report dynamic instead of static. Few parameters can also be added in the report which can be used in query and/or html component.
Generally for these type of charts we pass a variable which contains required data containing date, hour and a value associated with that particular date and hour. The string is created according to JSON format, so that when accessed in script tag, can be easily converted to JSON object using eval function.
Any variable/parameter can be accessed as shown below:
” var arr =”+$V{variable1}+” ”
Parameter in query:
Select * from table_name
where date between $P{parameter1} and $P{parameter2}

The steps on how to integrate it with jasperserver was discussed in my previous blog(D3 Integrating with Jasperserver).

Embedding BI Reports (Jasper Reports/ Jasper Server/ Pentaho Reports/ Pentaho Server)

There are many methods of embedding BI reports, this blog tries to explain the meaning of Embedded BI, different approaches which can be used, their respective advantages and disadvantages


A)     What is embedded BI?

Lets say you have developed your entire BI solution which includes reports, dashboards, mashups, analysis etc, the platform which is used can be anything like Jaspersoft or Pentaho. The process of integration of this BI solution with your existing application/software/portal is called Embedded BI.

Embedded BI provides a lot of advantages like ability to add more reports over and above the existing canned reports which your application might provide, the look and feel and customization of all the reports can be changed as per the software/user preference, better visualization, unified application for everything. Biggest advantage can be your product value will increase much more, hence resulting in much more sales and revenue.

a) Embedding using iFrame Method :-

iFrame method of embedding BI reports can be used for embedding Jasper server, Jasper reports and Pentaho server, Pentaho reports. The report pulled in this case is using iframe as a tag. Even though the report is external, but to an end customer he will not be able to recognize the same.

The advantages of using iFrame method is this method is fast and quick to implement. The disadvantages includes it will be difficult to manage user, also in this case there can be cross browser compatibility issues, security is a major issue here.


b) Embedding Using webservice:- Webservices can also be used to integrate reports, dashboard, interactive report or/and ad-hoc reports. We can use webservices to accept the information from the Jasper/Pentaho server, this Jasper server can be anywhere ( on Tomcat or any other server). Using webservices we will invoke the response from Jasper Server/Pentaho server. This response can be can be then embedded inside application/software. Jasper server/Pentaho server also supports RESTFUL service (JSON format responses). In this approach there are no or less security related issues.

The disadvantage of this approach is there are no interactive features available of the report which thus results in poor user experience. Also in order to handle and understand the responses from jasper server/Pentaho server, custom coding is required in the application. In case if we had put input controls in the report, the same functionality then needs to be implemented in the application via custom coding. Aside, having many webcalls at times can be resource intensive as well.

The advantage of this approach is webservices approach gives more seamless integration since there is no security issue and no thirdparty calls (like in the case of iframe). Also in this case there are no interbrowser compatibility issues (assuming it is handled by your developer team).

c) Embedding using Jasper/Pentaho Libraries:- In this method we create JRXML/Pentaho report (prpt) files using ireport/Pentaho report designer. Compile these reporting using Java API, and then use this compiled code to generate views using Jasper Server API calls

The advantage of this method is this gives the most seamless integration. Also since all the information is present as a part of the application/server, no third party calls are required.

Disadvantage of this approach is some interactivity is lost in this method. Also the input parameters are also required to be created in the own application via custom coding.


Please get in touch at [email protected] for much more details about the respective approach, how to embed the same using these approaches, which was is the best suited to your needs and much more.

Tech Tips in Penaho Server – publishing password setting for server – Disable the folder names in Browser panel in the Server

Hi guys..

The below tips are very useful in Pentaho Server for BI developers.
1) publishing password setting for server
You need to publish the reports or schema(s)[developed in PSW] once you done with developing. For this you need set the publishing password for Pentaho server.
Go to this location 
<location of Pentaho>biserver-ce-4.8.0-stablebiserver-cepentaho-solutionssystempublisher-config.xml and edit the “publisher-config.xml”  file.

Give your publish password b/w  these tags  <publisher-password> </publisher-password>

<publisher-password>password</publisher-password>    ( password can be any name that you wish to give)

Snapshot is a worth more than text. find the image below.

Save the file. stop the server and start the server.

2) Disable the folder names in Browser panel of Pentaho Server
* What ever the folder you create in Browser panel of pentaho server, it directly stores   under pentaho-soulutions
i.,e in this location
<Pentaho location>Pentahobiserver-ce-4.8.0-stablebiserver-cepentaho-solutions
* You can disable all of your folders that comes with installation & the later created ones  which you don’t want to appear in the browser panel.
*   Inside every folder(pentaho default or the folders created by you) you can find “index.xml” file. You need to edit this file. You need to change visable tag as “false”.
Find the sanpshot.

You need not restart the server. Just you need to refresh the browser panel in the server.
You can observer the invisibility of the folder.

Sadakar Pochampalli.



Date Input Controls/ Components in Pentaho CDE with a working example

Hello guys…!!!

In this post you will learn about how to create date input controls in CDE.
The dashboard images which I am going to show below are having lots of .css code. I’m not covering all the things but concentrating only on Date input controls in CDE.

My Environment :
BI Server: Pentaho 4.5
CTools: Not found the version numbers of  C-Tools(Unable to check them)– perhaps..! lesser than 13
Database : hsqldb (Comes along with Pentaho installation — A java based small db for servers like pentaho)
NOTE: Images are taken in this post after creating the dashboard, please find the yellow rectangular boxes to understand.

You need to work out @ 3 places in “Components” section.
1. Generic
2. Selects
3. Charts
Explained from step 1 to step 3
You need to work out  @ 1 places in “Data Sources” section. i.e, all in “Properties”
I’m not concentrating on Layout part for this example. So wherever the HtmlObject you find in this example replace them with your working HtmlObjects.

Step 1: Creating parameters
* Design your dashboard as per your requirement ( In the images you can find the sample designs).
 In the “Components” section:
1. Click on components
2. Click on Generic
3. Click on Date parameter
4. Go to properties give the name
eg: param_start_date
5. Click + symbol  per another date parameter
6. Go to properties give the name
eg: param_end_date

Find the  image

Step 2: Creating Date input Components
In the “Components” section
1. Click on Components
2. Click on Selects
3. Click on “Date input Component”
4. Go to Properties give name. eg: start_date in  my example
5. In the properties give HtmlObject. eg: start_date_select
* HtmlObject is the name of the column where you are putting
your dateinput control.
6. Give  Parameter.[It will appear once you try to type]
eg: In step 1, created parameters. So here give “param_start_date”
7. Give Listeners[click on it, you will find the list of Listeners. Click OK]
8. Repeat 3-7 for “end_date” Date input

Step 3:
Find the steps in image.

HtmlObject is the place where you are putting your chart.

Step 4: Applying parameters for Chart & Query
            In the “DataSources”
Find the steps in the image
Find the sub sequent image for  Parameters applying for chart & Query.

do same as shown in images.

Step 5:
Save the dashboard and then Click on “Preview” button.
See the images below for sample out put with date input controls.
Preview of the dashboard with out any input controls selection

Preview of the dashboard after selecting date input controls.. find the images below one by one.

Find the image for observing whether the chart becomes dynamic or not with different date input controls.

That’s it.. You are done with date input controls on dashboard.
Thank you for reading this small post.

[email protected]
Helical IT Solutions Pvt. Ltd,



What is Bubble Chart? A bubble chart is used to visualize a data set with 2 to 4 dimensions. The first two dimensions are visualized as coordinates, the 3rd as color and the 4th as size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships.

Bubble chart is often considered as an extension of scatter chart with the size & color factor also being introduced.


Human visual system can feel the difference in the size, but with change in the radii (3rd dimension or variable), the corresponding change in the area is non linear. Hence proper care must be taken so that the change in the area is liner by mathematically altering the change in the radius according to the variables value.

Industry Specific Example?

– Project management to compare the risk and reward among projects. In a chart each project can be respresented by a bubble,the axis can represent the net present value and probability of success and the size of the bubble can represent the overall cost of the project

– Revenue contribution from different products & sales

Example of a Bubble Chart Usage