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:


* 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:



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:


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

Please refer to the link


Create CSV Data Sources in pentaho CDE: (Community Dashboard Editor)

This blog will talk about how to Create CSV Data Sources in pentaho CDE: (Community Dashboard Editor)
Follow the steps to create CSV file as a Data sources.

Step-1  Login to the User Console as an administrator.
Pentaho Login Window
Step-2  Click Manage Data Sources. The Data Sources window appears.
Pentaho Home Page
Step-3    Click the Add icon, then choose Data Source Wizard from the drop-down menu.
Manage Data Sources
Step-4  Click to the Data Source Wizard.
Create Data Sources
Step-5 Enter a name that identifies your new data source in the Data Source Name field.
Naming and Importing CSV File
Step-6 Choose the columns that you want to use in your data source, either individually or by clicking Select All. You can deselect all columns by clicking Deselect All.

Step-7 Change the Name and Type values, if applicable.
a.    Choose the options that you want to use from the drop-down menu for dates and numeric values.
b.    You can enter a value manually in the Source Format text box.
Display Window of CSV File

Step-8 Click to show File Contents and see the CSV file content.
Content into CSV file

Step-9  After Click finish button check the radio button like Keep default model.

Confirmation Window

Step-10 Now you can see the Data sources what you created.

Disply List of Data Sources

Get in touch with us for any query related to Pentaho or Ctools.

Helical IT Solutions