How to use Custom Component in Jaspersoft Studio:

How to use Custom Component in Jaspersoft Studio:

This Blog will teach you how to use Custom component in Jaspersoft studio.

A Custom component allows the BI Developer to enhance the functionality of Jasperreports engine by adding some custom visualized components.

By using Custom Component , we can able to develop anything like tables , charts , etc …

Steps to create Custom Component :

# 1.      Go to File -> New -> Others

Custom# 2 .     Select Custom Component

CustomThen Click Next.

# 3. There you will get 3 samples , you can select any one of them and give your Project Name.

Then Click on Next.

d3charts# 4. You can see in the left side , one folder is created named same as the above metioned name.

project explorer

# 5. Right click on build.js -> Buid Component

# 6.After thet In the same folder double click “d3_Circle_sample.jrxml” , Preview it

You will get the Output as :

output

 

 

Thanks ,

Rupam Bhardwaj

 

Using Scriptlet in jasper :

This blog will teach you how to use Scriptlet in jasper report.

Scriptlets :

Scriptlets act as an interface between Jasper reports and java

Using Scriptlet we can use user defined functions in jasper reports .

Scriptlet is a java class that extend one of the two following classes :

  • JRDefaultScriptlet
  • JRAbstractScriptlet

Using JRAbstractScriptlet , we should implement all the abstract metods.

Using JRDefaultScriptlet , we only need to implement the methods which we need for our project.

Since Scriptlet is a java class , so to add a sciptlet(user defined class) in jasper reports ,

  1. first step is to create a java class implementing user requirement.
  2. Then create its jar file
  3. In the iReport , go to Tools à Options àiReport à classpath ,

Add the jar files created by you in this location

  1. Then in the Scriptlet node of iReport , add the Scriptlet Name and fully qualified name of the jar that earlier you have created .

Capture

Here , in the Scriptlet Class , Reporting_Time is my class name

 

When we are done with creating a new scriptlet under Scriptlet node in iReport , We can see a new parameter created under parameter node ,

Named as {Name_Of_Scriptlet}_SCRIPTLET

In my case it is “Report_SCRIPTLET”

Using the above parameter we can call any methods declared inside the class.

 

Thanks,

Rupam Bhardwaj

Working with joins in d3.js

Working with joins in d3.js

D3.js is a well known JavaScript library for creating charts and other visuals using HTML, SVG and CSS. At first you may feel over-whelmed by looking at the features it has to provide. But as you start using it, everything will sink in. The main key behind understanding d3 is the how that data is related to DOM nodes, which is known as joins.

Understanding Joins

Let us assume that we have selected some DOM nodes using one of the select methods provided by d3 and stored it in a variable selection. Now we can assign data to selection by selection.data(data).

Suppose we have n points in our data but there are less than n DOM nodes, extra nodes can be created by selection.enter(). Note that these nodes will be empty.

On other hand if there are greater than n DOM nodes, extra nodes are returned by selection.exit().

The philosophy behind this is Instead of telling D3 how to do something, tell D3 what you want.

So general d3 script will look something like this:

var selection = d3.selecAll("circle");

selection.data(data);

selection.exit().remove();

selection.enter().append('circle') //....and so on

For illustartive example, you can have look at this post by Mike Bostock, the creator of D3.js.

Creating HTML Table with JSON Data dynamically in HDI(Helical Dashboard Insights)

This blog will teach you how to create HTML Table with JSON Data dynamically in HDI(HelicalDashboard Insights) :

To create html table with json data dynamically in hdi , we need two files

  1. Demo.EFW
  2. template.html

In “Demo.EFW” file , we have to call template.html file

Demo.EFW:-

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<efw>

<title>HDI Demo</title>

<author>Rupam</author>

<description>Demo Dashboard</description>

<icon>images/image.ico</icon>

<template>template.html</template>

<visible>true</visible>

<style>clean</style>

</efw>

In “template.html” file ,

  1. we have to declare in which portion of the dashboard we want table to be shown
  2. JSON data
  3. Script that will automatically add the json data to table

 

Template.html : –

<div id = “myTable”></div>

<style type=”text/css”>

td, th {

padding: 1px 4px;

}

</style>

<script>

var data = [{“id”:”1″,”Name”:”Rupam”,”address”:”Hyderabad”}];

var peopleTable = tabulate(data, [“id”, “Name”,”address”]);

function tabulate(data, columns) {

var table = d3.select(“#myTable”).append(“table”)

.attr(“style”, “margin-left: 250px”),

thead = table.append(“thead”),

tbody = table.append(“tbody”);

 

// append the header row

thead.append(“tr”)

.selectAll(“th”)

.data(columns)

.enter()

.append(“th”)

.text(function(column) { return column; });

 

// create a row for each object in the data

var rows = tbody.selectAll(“tr”)

.data(data)

.enter()

.append(“tr”);

 

// create a cell in each row for each column

var cells = rows.selectAll(“td”)

.data(function(row) {

return columns.map(function(column) {

return {column: column, value: row[column]};

});

})

.enter()

.append(“td”)

.attr(“style”, “font-family: Courier”)

.html(function(d) { return d.value; });

return table;

}

</script>

 

Rupam Bhardwaj

Helical IT Solutions

Calling Static jrxml files inHDI

This blog will teach you how to call Static jrxml  files in HDI (Helical Dashboard Insights).

To call static jrxml file from hdi , we need 3 files

  1. “.EFW” extension file
  2. “.html” file
  3. Required “.jrxml” file

Eg:- here I have integrated “SkillChart” in jasper and now I want to call its jrxml through hdi

So now , I have

  1. “Skill Chart 0.1.jrxml” file ,
  2. “SkillChart.EFW” extension file in which I have given its template file name,
  3. The Template file i.e, “skillChart.html”

       “SkillChart.EFW” code:

Capture3

“skillChart.html” code :

Capture1

Rupam bhardwaj

Helical IT Solutions

Create Table Component (Dynatable) in HDI (Helical Dashboard Insights) :

This blog will teach you how to Create Table Component (Dynatable) in HDI (Helical Dashboard Insights).

Dynatable : It is a library , it uses jQuery . It is a framework using which we can easily search ,   sort and filter the html tables data and data is in JSON Format.

Eg : –

<table>

<thead>

<th>name</th><th>class</th><th>address</th>

</thead>

<tbody></tbody>

</table>

And you ahve a record that looks like this:

{

“name”: “abc”,

“class”: “08-cs-08”,

“marks”: 72

}

Dynatable will render the “name” attribute to the first column, the “class” attribute to the second, and will ignore the “address” attribute since there’s no corresponding column header, and it will leave the last column blank since there’s not corresponding “marks” attribute.

By default, dynatable converts headings to JSON attribute names in camlecase . But we can change this by using the below property :

defaultColumnIdStyle:’underscore’

or

defaultColumnIdStyle: ‘lowecase’ etc.. 

To provide d3 dynatable feature in HDI , we need to go through following steps:

1. Database server – mysqlDB – foodmartTable : customerQuery :SELECT c.`customer_id` as customer_id, c.`account_num` as account_num, c.`fname` as fname, c.`lname` as lname, c.`address1` as address, c.`city` as city FROM foodmart.customer c;

The above information with username and password we need to provide in “demo.efwd” extension.

2.  We have to declare one dynatable component in “dynatable.html” file and in this component we need to provide the link of the file where the dynatable chart property is defined. 3.  In “dynaTable.efwvf” we need to define the dynatable properties and its link to database connection file i.e; “demo.efwd”

4.  One “dynaTable.EFW” file should also present which points to the template file i.e; “dynatable.html”

5.  Make all the three files in one folder and put              jquery.dynatable.css and jquery.dynatable.js file in the same folder and      give its path link in html extension file .

6.  By following these we are able to see the output which is as follows:

Capture2

Rupam Bhardwaj

Helical IT Solution

Using MDX Query in Pentaho CDE

This blog will talk about Using MDX Query in Pentaho CDE

In Layout Section:

Design the layout of your Dashboard, from scratch or from a template – while defining the layout you can apply styles and add HTML elements as text or images.

Pentaho CDE MDX Query

In Component Section:

In side Component layout we are using different types of chart and table or other things. According to component we will provide Data source name and Html Object and some other properties you can also use if you needed.

Pentaho CDE MDX Query

In Data source Panel:

In side data source panel we are we are using driver like jdbc or jndl according to requirement. In My example I am using Jndl data source and Mondrian Schema like Sample data and query like:

Select NON EMPTY {[Measures].[Actual]} ON COLUMNS,

NON EMPTY Crossjoin(Hierarchize(Union(Union(Crossjoin({[Region].[All Regions]},
{[Department].[All Departments]}), Crossjoin({[Region].[All Regions]},
[Department].[All Departments].Children)), Crossjoin([Region].[All Regions].Children,
{[Department].[All Departments]}))), {[Positions].[All Positions]}) ON ROWS

from [Quadrant Analysis]

Note: Below Image you can see the Process.

Pentaho CDE MDX Query

Preview Panel:

After Applying all those thing what I mentioned in above information the output will show like these. This output is same as OLAP creation output in MDX query. You can compare both output.

Pentaho CDE MDX Query

Pentaho CDE MDX Query

Note: When you are start working in MDX Query in Pentaho CDE. You have to first know how to use OLAP Kettle -MDX OLAP. After that you can use that MDX query inside Pentaho CDE (Pentaho Community Dashboard).

Nikhilesh

Helical IT Solutions

Enable CAS in Different Applications

This blog talks about how to Enable CAS in Different Applications

What is CAS

The Central Authentication Service (CAS) is a single sign-on protocol for the web. It’s purpose is to permit a user to access multiple applications while providing their credentials (such as userid and password) only once. It also allows web applications to authenticate users without gaining access to a user’s security credentials, such as a password. The name CAS also refers to a software package that implements this protocol.

The CAS protocol involves at least three parties: a client web browser, the web application requesting authentication, and the CAS server. It may also involve a back-end service, such as a database server, that does not have its own HTTP interface but communicates with a web application.

When the client visits an application desiring to authenticate it, the application redirects it to CAS. CAS validates the client’s authenticity, usually by checking a username and password against a database (such as Kerberos or Active Directory).

If the authentication succeeds, CAS returns the client to the application, passing along a security ticket. The application then validates the ticket by contacting CAS over a secure connection and providing its own service identifier and the ticket. CAS then gives the application trusted information about whether a particular user has successfully authenticated.

CAS allows multi-tier authentication via proxy address. A cooperating back-end service, like a database or mail server, can participate in CAS, validating the authenticity of users via information it receives from web applications. Thus, a webmail client and a webmail server can all implement CAS.

How CAS Works

 

  1. A user, via a web browser, requests a resource from a particular web application/service.
  2. The web application/service (via the application’s security mechanism) determines if the user has already been authenticated and authorized to use the application. How the web application does this it up to the web application itself. This is not part of CAS, but it is an important part of web application security. It should be noted that all applications should implement local sessions for managing the interaction between the application and the user. In other words, the application should not interact with CAS for every request made to the application. This would be an inappropriate use of the CAS service. Of course, if a user comes to the web application and the application does not know who the user is, then the application should redirect the user to CAS.

If the user has a local session (authN and authZ) then the user can have access to the resource which was requested.

  1. If the user does not have a local session, then the web application should check to see if the URL contains a CAS ticket. If the URL does not contain a CAS ticket (e.g., …? ticket= QQIMux0k2Em), then the web application needs to redirect the browser to CAS so that the user can get a ticket.
  2. Once the user’s browser gets to CAS, CAS looks to see if the user has already authenticated with CAS. It does this by looking to see if the browser sent a CAS cookie with the request. If the user does not have a cookie, i.e., they have not already authenticated, and then CAS displays the user with the login screen.

Upon successful authentication, CAS will look up the user in the LDAP Directory and store the user’s UID in its memory for future reference. After it has done this, it will set a CAS cookie in the user’s browser (this is called a Ticket Granting Cookie), and then redirects the user back to the original service with a ticket.

This ticket is only valid for the service to which CAS redirects the browser, and can only be used once. Also, the ticket is tied to the UID mentioned above.

  1. Once back at the application, the security component of the web application goes through steps 2 and 3 again. This time, however, on step 3, the web application sees that the URL has a ticket. At this point, the web application needs to take that ticket and verify with CAS that it is a legitimate ticket.

Here, the web application makes an https request to CAS (no browser is involved in this transaction). (Note, this can only happen over SSL.)

  1. When CAS receives this request, it validates the ticket with the following two tests:

 

  1. Is this the first time this ticket is being presented back to CAS?
  2. Is the ticket actually valid for the service listed in the URL?

 

If both tests are true, then CAS looks up the UID that is associated with the ticket (this was set in step 4) and responds back to the application with a success response and includes the UID of the user.

If either 1 or 2 are false, CAS responds back to the application with a failure response.

As mentioned in step 4, a ticket is only valid for a particular service, and is only valid once. For instance, you would get the failure message above if you took a ticket and asked CAS twice if it is valid. On the first attempt it would be valid – because it was the first time CAS was presented with the ticket – however, on the second attempt, it would not be valid because it was already used. This is done for security reasons.

 

Integrate CAS With Applications

Install JA-SIG CAS

  1. Download the CAS server distribution. All the (recent) downloads are available here)either zip or tar)

http://www.jasig.org/cas/download

  1. Exploding that tar.gz, I grabbed the cas-server-3.4.5/modules/cas-server-webapp-3.4.5.war
  2. Rename the file to cas-web.war.
  3. Copy the war file and paste it to the Tomcat webapps directory.
  4. Hit http://localhost:8080/cas-web in browser. You will see CAS Login screen.

 

Integrate CAS with Liferay

  1. Open Liferay Portal.
  2. Login as Admin user.
  3. Select Go To à Control Panel.
  4. Select Portal Settings in Portal panel from your left side menu.
  5. Select Configuration à Authentication from your right side menu.
  6. Select CAS tab.
  7. Fill the required information:

CAS configuration

  1. Save.
  2. Logout from Liferay. You will see CAS logout screen.
  3. Enter Liferay server url (Click on Sign-in if you don’t see CAS login Screen). Enter username and password.

NOTE: This CAS Server is running on “5080” port and using “username=password” technique. So when you go through this process you have to enter your password same as username. Otherwise, if you need, you can change your CAS login algorithm or you can authenticate against LDAP also.

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:

C:\Jaspersoft\jasperreports-server-5.5\apache-tomcat\webapps\jasperserver-pro\WEB-INF\decorators\decorator.jsp

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"
src="${pageContext.request.contextPath}/scripts/d3.v3.min.js"></script>

The script to be added should be kept at location:

C:\Jaspersoft\jasperreports-server-5.5\apache-tomcat\webapps\jasperserver-pro\scripts

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

http://dimplejs.org/dist/dimple.v1.1.5.min.js

Sample Code is shown below:

var svg = dimple.newSvg("#chartContainer", 1090, 500);
var data = [
{
"Date":"1/1/2011",
"Analyst":"Cidalina Rivera",
"Category":"Application",
"Total Minutes":2114200,
"Minutes Per Item":1100,
"% SLA":80
},
{
"Date":"1/1/2011",
"Analyst":"Kiran Parvathala",
"Category":"Application",
"Total Minutes":391800,
"Minutes Per Item":1959,
"% SLA":21
},
{
"Date":"1/1/2011",
"Analyst":"KrishnaReddy Mavuru",
"Category":"Application",
"Total Minutes":1056125,
"Minutes Per Item":1207,
"% SLA":26
},
{
"Date":"1/1/2011",
"Analyst":"Narasimha Dara",
"Category":"Application",
"Total Minutes":386740,
"Minutes Per Item":610,
"% SLA":30
},
{
"Date":"1/1/2011",
"Analyst":"AslamJavid Shaik",
"Category":"Application",
"Total Minutes":1573856,
"Minutes Per Item":1096,
"% SLA":94
},
{
"Date":"1/1/2011",
"Analyst":"Harini Vemulapalli",
"Category":"Application",
"Total Minutes":2846340,
"Minutes Per Item":1890,
"% SLA":100
},
{
"Date":"1/1/2011",
"Analyst":"William Nelson",
"Category":"Application",
"Total Minutes":1205502,
"Minutes Per Item":662,
"% SLA":40
},
{
"Date":"1/1/2011",
"Analyst":"Janaki Govindarajan",
"Category":"Batch Job",
"Total Minutes":72684,
"Minutes Per Item":673,
"% SLA":79
},
{
"Date":"1/1/2011",
"Analyst":"Chiranjeevi Krishna Karne",
"Category":"Education",
"Total Minutes":542348,
"Minutes Per Item":3307,
"% SLA":52
},
{
"Date":"1/1/2011",
"Analyst":"Masaru Hirata",
"Category":"Fileshare",
"Total Minutes":129090,
"Minutes Per Item":662,
"% SLA":12
},
{
"Date":"1/1/2011",
"Analyst":"Naveen Kodali",
"Category":"Phone",
"Total Minutes":75076,
"Minutes Per Item":548,
"% SLA":84
},
{
"Date":"1/1/2011",
"Analyst":"JoshyPeter Joseph",
"Category":"Phone",
"Total Minutes":574860,
"Minutes Per Item":2948,
"% SLA":27
},
{
"Date":"1/1/2011",
"Analyst":"Maheshwar Malkapuram",
"Category":"Phone",
"Total Minutes":19845,
"Minutes Per Item":105,
"% SLA":92
},
{
"Date":"1/1/2011",
"Analyst":"Sunil Bhalerao",
"Category":"Procurement",
"Total Minutes":353000,
"Minutes Per Item":1765,
"% SLA":20
},
{
"Date":"1/1/2011",
"Analyst":"Tina Chan-Browne",
"Category":"Report",
"Total Minutes":51121,
"Minutes Per Item":469,
"% SLA":95
},
{
"Date":"1/1/2011",
"Analyst":"Sirajuddin Mohammad",
"Category":"Report",
"Total Minutes":323363,
"Minutes Per Item":1693,
"% SLA":47
},
{
"Date":"1/1/2011",
"Analyst":"Nishanth Nadam",
"Category":"Enterprise",
"Total Minutes":620000,
"Minutes Per Item":10000,
"% SLA":22
},
{
"Date":"1/1/2011",
"Analyst":"Santoshkumar Shinde",
"Category":"Enterprise",
"Total Minutes":715000,
"Minutes Per Item":11000,
"% SLA":90
},
{
"Date":"1/1/2011",
"Analyst":"Keith Moller",
"Category":"Enterprise",
"Total Minutes":948000,
"Minutes Per Item":12000,
"% SLA":100
},
{
"Date":"1/1/2011",
"Analyst":"AshokKumar Sangeetham",
"Category":"Server",
"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");
myChart.draw();

    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).

D3 DayHour Charts integration with Jaspersoft

This blog talks about D3 DayHour Charts integration with Jaspersoft

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:

C:\Jaspersoft\jasperreports-server-5.5\apache-tomcat\webapps\jasperserver-pro\WEB-INF\decorators\decorator.jsp

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” src=”${pageContext.request.contextPath}/scripts/d3.v3.min.js”></script>

The script to be added should be kept at location:

C:\Jaspersoft\jasperreports-server-5.5\apache-tomcat\webapps\jasperserver-pro\scripts

Meaning of DayHour Chart:-

This chart represents functioning of any particular thing during different hour of different days. These graph can be used to view variations in different situations.

DayHour Jaspersoft Integration

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:

“<script> var arr =”+$V{variable1}+” </script>”

Parameter in query:

Select * from table_name

where date between $P{parameter1}  and $P{parameter2}

 

The sample code of static chart can be found at:

http://bl.ocks.org/tjdecke/5558084

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

 

 

Avi Dawra

Helical IT Solutions