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

We have already observed the power of D3.js visualization in my previous blog D3.js visualization with Jaspersoft Reporting. Now, question is how to achieve this in Jaspersoft using its in-built component Custom Visualization 

Component also known as CVC. Before we start with CVC component, I will suggest you to follow few links Custom Visualization Component for Jaspersoft Studio v5.6.x | Jaspersoft Community or Custom Visualization Component v6.0.x | Jaspersoft Community .


So, let’s start with basic steps which we need for this custom visualization to work. I have divided them into 3 parts:

1) Fetch Data From Source to CVC

2) Creating JavaScript for CVC using d3.js

3) CVC Property Configuration for CSS and JS minified files 


Fetch Data From Source to CVC

Create a Dataset where you can fetch different columns into Jasper Fields similar to that of Jasper report where we fetch Columns to Fields and then we feed them into Detail Band for Jasper report generation.

Now we are going to feed these Jasper fields to CVC (similar to that of Chart) as shown below:




Creating JavaScript for CVC using d3.js

Now, we have linked our Data Source to CVC. Next step is to fetch this data in JavaScript along with d3.js skill, I have explained basic of it in below sample Script which can be used to build a proper script, we can also use JSFiddle with sample data to check our JavaScript.


define(['d3'], function (d3) {

     return function (instanceData) {  
        // instanceData is an Array of Item Data Configuration
        //  In this Sample We have only one Item Data defined followed by only one Series which is also an Array of series
        //  Each series array is a JSON Component
        /*  Sample InstanceData as generated from JasperReport

                        "instanceData": {
                        "id": "element1146094337",
                        "series": [
                                    "parentId": 0,
                                    "category": 5027005,
                                    "ch_dt_lm": "Gupta, Gaurav",
                                    "ch_manager": "Singh, Prashank",
                                    "subcategory": "PRJ004965 -- Finance Change - krana, From 01/01/2016 to 01/01/2019",
                                    "value": 1,
                                    "DataId": 5027005
                                    "parentId": 5027005,
                                    "category": 5027005,
                                    "ch_dt_lm": "S, Paul",
                                    "ch_manager": "Rana, Kritika",
                                    "subcategory": "PRJ004966 -- Finance Change Cluster, From 01/08/2016 to 25/09/2016",
                                    "value": 2,
                                    "DataId": 5027006
                        "height": 560,
                        "width": 1000,
                        "isInteractiveViewer": "false",
                        "script_uri": "d3_zoomable_circle_packing.min.js"


            var series0 = instanceData.series[0];
            var nodes = series0;

        //  use your javascript and d3.js skill
        // is going to add all svg element to Jasper report, so i have added one sample for that  

        var svg ="#" +"svg")
                        .attr("width", width + margin.left + margin.right)
                                .attr("transform", "translate(" + margin.left + "," + + ")");




 CVC Property Configuration for CSS and JS minified files    

Once we have created our JavaScript, then next is to generate minified file from d3.v3.min.js and Our JavaScript which we have created in above step. For generating minified file, add two files 1) d3.v3.min.js 2) buid.js (sample given below) and then click on build all component as shown below:



Sample Build.js file

    baseUrl: '',
    paths: {
          'd3': 'd3.v3.min',
          'd3_zoomable_circle_packing': 'd3_zoomable_circle_packing'
    name: "d3_zoomable_circle_packing",
    out: "d3_zoomable_circle_packing.min.js"


Next step is to add this minified file and CSS to our CVC component in the form of property, refer to screen shot below:



After these steps, we can run this report in jasper studio or we can publish this to Jasper Server, however there are few settings which you need to check for successful run. For studio please refer above mentioned links and to enable CVC in jasper server, I have attached a zip file with steps.


Wishing you all a very Happy New Year......