Prashank Singh

D3.js visualization with Jaspersoft Reporting

Blog Post created by Prashank Singh on Aug 16, 2017

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.