Skip navigation
All People > Prashank Singh > Prashank Singh's Blog > 2017 > August

Before we drive into integration of jaspersoft and d3.js visualization and finally Running Jaspersoft Report within CA PPM Object, let me answer some questions popping up in our minds like what is D3.js? or Do we have any examples related to D3 visualization? or what are possible ways for achieving these? So, let's start with learning about D3.js with its visualizations.  


D3.js (or just D3 for Data-Driven Documents)

is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. 

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of official and community-developed modules.


There are number of D3.js visualizations, however I have picked few from these.

1) Sequence sunburst 

2) Collapsible Indented Tree

3) Cross Filter

4) Map Projection Distortions

Now, imagine these visualizations in jaspersoft reports when you are trying to make some powerful decision making Dashboards. They can provide a better visualization as compared to traditional charts. So, let's explore how can we see jasper reporting and D3.js working together to give our data more meaningful clay to make your decision brick. 


Note: All of these require some basic knowledge of Javascript, html and basics of D3.js API.


Possible ways 

1) Calling Jasper Report and D3.js in CA PPM HTML Portlet 

We can use CA PPM html portlet for calling Jasper report and its component by using its integration methods are:

1) Embedding using HTTP API

2) Getting Started with REST Web Service API

3) Getting Started with Visualize.js

Similarly, we can call D3.js library and methods for achieving both in single html page and if you want to integrate both of these inside edit/create view of CA PPM Object then follow HTML Fancy Lookups: Getting Started & HTML Fancy Lookups: Inline List 



2) Using HTML element from jasper palette

Working with this apporach need a bit of work around, as html component of jasper server has some limitation, however a powerful way for creating html content with some scripting allowed. Due to a lot of limitations and issues while integration this one is least preferred. 



3) Using CVC element from jasper palette

The custom visualization component is a JasperReport custom component that can be used to display, inside a report, an SVG dynamically generated by using Javascript. The component itself does nothing, in the sense that you need to specify a javascript file that will be used by the custom visualization component in a small html document to produce the specific SVG image. 


I have used CVC approach and have come up with below visualization for Project Hierarchy 

1) Interactive Tree Hierarchy 

2) Zoomable Icicle Report


now expanding icicle 


I will try to answer How to use CVC component of Jaspersoft in upcoming blog, meanwhile please share your feedback on D3.js visualization and type of visualization which you think can improve CA PPM analytic ability.

Sometimes, client wants to push data feed for CA PPM through .xls/.xlsx file, which is generated from any other system. However, we don't have any specific gel tag for reading such files and that becomes a hurdle while achieving this. Only solution for these scenarios is to invoke java code in gel for reading and writing or modifying xlsx documents.


I have tried to read xlsx document via gel so that we can understand some basic logic related to these, Please follow comments and logs in script for learning gel as below.


Sample GEL Script for reading xlsx as below:

<?xml version="1.0" encoding="UTF-8"?>  
<gel:script xmlns:core="jelly:core" 
            xmlns:xsi="" xmlns:util="jelly:util">    
    <!-- *****************************************************************  -->
    <!-- Program:       Read xlsx File                                      -->
    <!-- Object:        NA                                                  -->
    <!-- Step:          Start Step                                          -->
    <!-- Action:        GEL                                                 -->
    <!-- Author:        Prashank Singh,(Pemari Technology Consultant)       -->
    <!-- Version:       1.0.00                                              -->
    <!-- Created On:    02th August 2017                                    -->
    <!-- Modified On:   02th August 2017, Modified By: Prashank Singh       -->
    <!--                                                                    -->
    <!-- Modification History:   Version 1.0.00                             -->
    <!-- Dependencies:   NA
    <!-- ****************************************************************** -->
 <core:catch var="SuperException">
    <gel:log> File Location ("G:\Apps\Clarity\Clarity2211\TestExcel Data\TransactionData.xlsx") </gel:log> 
    <core:new className="" var="myFile"> 
        <core:arg value="G:\Apps\Clarity\Clarity2211\TestExcel Data\CODA Extract - Random Generated.xlsx"/> 
    <gel:log> File Size ${myFile.length()} </gel:log> 
    <core:new className="" var="fis"> 
        <core:arg type="" value="${myFile}"/> 
    <gel:log> Return first sheet from the XLSX workbook  </gel:log> 
    <core:new className="org.apache.poi.xssf.usermodel.XSSFWorkbook" var="myWorkBook"> 
        <core:arg type="" value="${fis}"/> 
    <gel:log> Get iterator to all the rows in current sheet </gel:log> 
     <core:invoke method="getSheetAt" on="${myWorkBook}" var="mySheet">
        <core:arg  value="${0}"/>
    <gel:log> Traversing over each row of XLSX file  </gel:log> 
    <core:invoke method="iterator" on="${mySheet}" var="rowIterator"/>
    <core:while test="${rowIterator.hasNext()}">
        <gel:log> For each row, iterate through each columns </gel:log>
        <core:invoke method="next" on="${rowIterator}" var="row"/> 
        <core:invoke method="cellIterator" on="${row}" var="cellIterator"/>    
        <core:while test="${cellIterator.hasNext()}">
            <gel:log>Get Cell Type ${cell.getCellType()} </gel:log>
            <core:invoke method="next" on="${cellIterator}" var="cell"/>       
            <core:switch on="${cell.getCellType()}">
                <core:case value="${1}">
                    <gel:log>${cell.getStringCellValue()} </gel:log>
                <core:case value="${0}">
                    <gel:log>${cell.getNumericCellValue()} </gel:log> 
    <core:if test="${SuperException!=null}">
      <gel:log>Super Exception -- ${SuperException}</gel:log>

Similary you can look for implementation of any document write/modifaction via apache poi jar, Do let me know for you feedback or any comment.