D3 Sankey Chart Integration with Jaspersoft

In this blog we will be discussing about D3 Sankey Chart Integration with Jaspersoft using HTML method of integration.

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

Sankey Chart

Sankey D3 Jaspersoft

For this chart we need to include one more js script file in the decorator page as described in the start of the document.
The js file is sankey.js and can be downloaded from
https://github.com/d3/d3-plugins/blob/master/sankey/sankey.js

Sankey diagrams visualize the magnitude of flow between nodes in a network. Sankey diagrams are a specific type of flow diagram, in which the width of the arrows is shown proportionally to the flow quantity. They are typically used to visualize energy or material or cost transfers between processes.
The diagram will contain two quantities, 1) All the nodes. 2) Which nodes are connected and with what value.

The json object should be like : http://bost.ocks.org/mike/sankey/energy.json

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 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.

Any variable/parameter can be accessed as shown below:
" var arr ="+$V{variable1}+" "

Parameter in query:
Select * from table_name
where date between $P{parameter1} and $P{parameter2}

The sample code of static chart is shown below at:

#chart {
height: 500px;
}

.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}

.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}

.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}

.link:hover {
stroke-opacity: .5;
}

var margin = {top: 1, right: 1, bottom: 6, left: 1},
width = 960 – margin.left – margin.right,
height = 500 – margin.top – margin.bottom;

var formatNumber = d3.format(“,.0f”),
format = function(d) { return formatNumber(d) + ” TWh”; },
color = d3.scale.category20();

var svg = d3.select(“#chart”).append(“svg”)
.attr(“width”, width + margin.left + margin.right)
.attr(“height”, height + margin.top + margin.bottom)
.append(“g”)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);

var sankey = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);

var path = sankey.link();
var energy = {“nodes”:[ {“name”:”Energy”}, {“name”:”Industrial Processes”}, {“name”:”Electricity and heat”}, {“name”:”Industry”}, {“name”:”Land Use Change”}, {“name”:”Agriculture”}, {“name”:”Waste”} ], “links”:[ {“source”:0,”target”:1,”value”:12}, {“source”:1,”target”:2,”value”:20}, {“source”:2,”target”:3,”value”:30}, {“source”:4,”target”:1,”value”:8}, {“source”:4,”target”:2,”value”:10}, {“source”:4,”target”:5,”value”:5}, {“source”:5,”target”:6,”value”:5} ]};

sankey
.nodes(energy.nodes)
.links(energy.links)
.layout(32);

var link = svg.append(“g”).selectAll(“.link”)
.data(energy.links)
.enter().append(“path”)
.attr(“class”, “link”)
.attr(“d”, path)
.style(“stroke-width”, function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy – a.dy; });

link.append(“title”)
.text(function(d) { return d.source.name + ” → ” + d.target.name + “\n” + format(d.value); });

var node = svg.append(“g”).selectAll(“.node”)
.data(energy.nodes)
.enter().append(“g”)
.attr(“class”, “node”)
.attr(“transform”, function(d) { return “translate(” + d.x + “,” + d.y + “)”; })
.call(d3.behavior.drag()
.origin(function(d) { return d; })
.on(“dragstart”, function() { this.parentNode.appendChild(this); })
.on(“drag”, dragmove));

node.append(“rect”)
.attr(“height”, function(d) { return d.dy; })
.attr(“width”, sankey.nodeWidth())
.style(“fill”, function(d) { return d.color = color(d.name.replace(/ .*/, “”)); })
.style(“stroke”, function(d) { return d3.rgb(d.color).darker(2); })
.append(“title”)
.text(function(d) { return d.name + “\n” + format(d.value); });

node.append(“text”)
.attr(“x”, -6)
.attr(“y”, function(d) { return d.dy / 2; })
.attr(“dy”, “.35em”)
.attr(“text-anchor”, “end”)
.attr(“transform”, null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr(“x”, 6 + sankey.nodeWidth())
.attr(“text-anchor”, “start”);

function dragmove(d) {
d3.select(this).attr(“transform”, “translate(” + d.x + “,” + (d.y = Math.max(0, Math.min(height – d.dy, d3.event.y))) + “)”);
sankey.relayout();
link.attr(“d”, path);
}

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

Avi Dawra
Helical IT Solutions

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download