By | January 8, 2016

How to add d3.js libraries into Birt

 

This tutorial will explain you the basic steps about how to use d3.js libraries into Birt report, later on we will generate some fancy reports.

Step 1 – Download and Install Eclipse

Download Birt – http://download.eclipse.org/birt/downloads/

Step 2 – Open Eclipse and Create new report project

Step 3 – Right click on project > New > Report

Give file name – myreport.rptdesign and then click on finish

Step 4 – Now from right panel drag “Text”

Double click on Text and copy paste the below code.

Code Example –

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
            height = 500;
var nodes = [];
var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
var force = d3.layout.force()
            .charge(-20)
            .size([width, height])
            .nodes(nodes)
            .on("tick", tick)
            .start();
function tick() {
svg.selectAll("circle")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
}
var interval = setInterval(function() {
var d = {
            x: width / 2 + 2 * Math.random() - 1,
            y: height / 2 + 2 * Math.random() - 1
};
svg.append("circle")
          .data([d])
          .attr("r", 1e-6)
            .transition()
          .ease(Math.sqrt)
          .attr("r", 4.5);
if (nodes.push(d) > 300) clearInterval(interval);
force.start();
}, 30);
</script>

Ref Example – http://bl.ocks.org/mbostock/1169680

Once done, Click on ok and save then Run the report

Run > View Report > As HTML

You can now see some fancy dots on browser 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *