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

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

D3 Skill Charts integration with Jaspersoft

This blog talks about D3 Skill 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 Skill Chart:-

Skill chart represents the mapping of an entity to some other entity on a particular parameter. For example it can show mapping of employees to various technologies they know and the level of their understanding.

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.

SkillChart Jaspersoft Integration

Generally for these type of charts we pass a variable which contains required data containing list of quantity1(employees or people or students, etc.) and a value associated with different type of skills. 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.

Integration with JasperServer:

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/derplau/8642419

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

 

Avi Dawra

Helical IT Solutions

D3 Chord Diagram in Jaspersoft / iReport

This blog will talk about what is chord diagram, its usage and about how to create and integrate a D3 Chord Diagram in Jaspersoft / iReport

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

* Note: The above problem is specific with Jaspersoft 5.5 and not with the previous versions.

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

 

Chord Diagram:

Chord diagram is basically used to show the relation between multiple entities. Different entities are represented by different arcs, the size of the arc varies. Also these different arcs are connected to each other via chords or ribbons, which shows the relationship strength between them. There can also be hover information, colors on the arcs or relationships (ribbons) etc.

Chord diagrams in D3 are one of the more difficult chart types to produce from raw data.  Fundamentally, you have to construct both a matrix and a mapping that explains how the matrix is composed and contains other meta data in order to render a complete diagram with appropriate coloring and labels.

Chord diagrams in D3 present information using two sets of the SVG elements: (1) a set of arcs around the outside of the diagram and (2) a set of chords or ribbons on the inside.  The arcs are referred to as “groups” in the D3 code and their arc length (how much of the circle they occupy) is determined by aggregating one complete row of the matrix.  Thus, the circumference of the circle represents the sum of the entire matrix (in whatever units it is expressed in) and is sub-divided into arcs for each of its rows.  The chords on the other hand show relations between elements in the matrix.  Their width on either end is determined by a location in the matrix.

A chord always has a “source” and a “target” and the way those are interpreted depends on your data.

Chord Diagram D3 Jaspersoft

Integration with JasperServer:

The data which we use for developing the chord diagram 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 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.

We require a matrix for creating a chord diagram. So data can be stored in a variable of string type and when used in the script it is first converted to array of array and is then used in the chord diagram.

 

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/mbostock/4062006

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

Please refer to the link

http://helicaltech.com/d3-integration-jaspersoft-ireport-jasper-server/

D3 Integration with Jaspersoft / iReport / Jasper Server

There can be different methods of integrating a D3 chart inside Jasper like using iFrame, using HTML etc. Below we will try to learn in detail how to do integration of D3 chart using HTML component integration.

 

What is D3 Charting? D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. So D3 can be used in the HTML component of the Jaspersoft to create different types of visualization like charts, graphs, tables, etc.

 

Few things should be kept in mind:

  1. The HTML component of Jasper soft accepts codes without any delimiters like \n,\r, etc. So the complete HTML code should be converted accordingly. Moreover as the component definition is contained in “<html>………</html>”, all special characters like “, ‘, etc. should be replaced with \”, \’, etc.

2. The output of database query can also be passed to the script in the HTML component making the reports dynamic.

 

3. The html content expression can also access the variables and parameters defined in your report.

Suppose we have a variable name variable1 in iReport which is to be used in the html component. It can be used in the html component as shown below:

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

 

4. Keep in mind that in the HTML content expression of HTML component you do not need to include the html tag, you only need to add the script, body, head, etc. tag which you are using.

Ex:

<!DOCTYPE html>
<html>
<body style=”background-color:yellow;”>
<h2 style=”background-color:red;”>This is a heading</h2>
</body>
</html>

 

In HTML component expression of iReport it would be written in the below format.

“<body style=\”background-color:yellow;\”><h2 style=\”background-color:red;\”>This is a heading</h2></body>”

 

5. Check whether sql jar (the database server you are using for your application) file is available with Jasper soft or not. By default it is not available. Download the jar file from internet and import the jar file in your application by going to the Tool ->Option. In the option menu, go to the classpath tab and click on add jar. Give the location of the jar file you downloaded.

 

Also make sure that the html component jar file is also present in the iReport<version>/iReport/modules/ext with name of jasperreports-htmlcomponent-<version>. If it is not present then download it and paste it in the same folder. (By default it is present. But check it.)

Jaspersoft chord D3 integration

Jaspersoft chord D3 integration 3

Jaspersoft force D3 integration 2

Jaspersoft chord D3 integration 2