Getting Started with D3 Charts into Jasper

In this tutorial, I am going to show you a creation of circle using a custom visualization component and we will create a circle using D3 js. You can read more about D3 js from here.
 
Note: If you have not setup RequireJS and PhantomJS then read following article Setup RequireJS and PhantomJS into Jasper before starting with this tutorial.

Steps to Create a circle using the D3 library

1) Creation of build.js
2) Creation of Chart JS
3) Creation of CSS (not mandatory)
4) Creation of Optimized Script
5) Creation of JRXML

1) Creation of build.js:
     In this file, you have to write what all javascript is required to build your charts. You can give any name to this file it is not mandatory to use build.js as a file name.

build.js 

({
    baseUrl: '',
    paths: {
        'd3': 'd3.min'  // d3 library 
    },
    name: "chart",  // contains bar chart javascript code
    out: "chart.min.js" // optimized script
})

2) Creation of JavaScript
     This contains D3 js code which renders output after executing file. Here are few major points needs to be remember in this file. What is method to fetch data and stores it into data variable ? How to get width,height and id of element ?

Chart.js

define('chart',['d3'], function (d3) {
    var result =  function (instanceData) {

     // here you write you D3 code which renders output.
     /* Following are few most important thing while working with CVC
     instanceData.series[0]: series is used to fetch result set from main  dataset.
     instanceData.width: width of your CVC compenent.
     instanceData.height: height of your CVC compenent.
     instanceData.id: id of your CVC component 
     Note: You can not excess sub dataset result in your CVC,. You can refer
           following link for more information here.
     */     

    var w = instanceData.width,

        h = instanceData.height        

        var margin = 20;
        var diameter = Math.min(w,h) - margin;
        var svg = d3.select("#" + instanceData.id).insert("svg")
                    .attr("id", instanceData.id + "svg")  
                    .attr("width", w)
                    .attr("height", h);

        var circle = svg.append("circle")
                        .attr("cx", w/2)
                        .attr("cy", h/2)
                        .attr("r", diameter/2) 

   };   
    return result;
});

Now you have successfully completed chart.js file. Now it is time to create CSS for same.

Creation of CSS
    This file is used for adding CSS to your charts. This helps you to manage additional property which you want to change or if you want to override some of CSS property. this will fill color in the circle. As you can see I have added an id to SVG element. If you want to access id in CSS file then you can access it using /*elid*/.

chart.css

/*elid*/svg circle {
fill: #F000FF;
}

where /*elid*/ = using this you can access id of cvc component in css file

Creation of optimized script
      This is an actual script which is used in the CVC component. let's say chart.min.js. So now we have to create this file using build.js. This is an easy task you just need to right-click on a build.js file and select build component option. After that, it will compile your build,js file and create one optimized script as mentioned in build.js file. If the above method is not generating any file then you need to compile the same file with r.js. Because when you click on build component it compiles your file using r.js.

Follow these steps to compile build.js using r.js

1. Install node js
2. Download r.js and put it in the same folder where build.js is present. You can put it anywhere but make sure you choose the correct path.
3. Open terminal or command prompt in the same folder where build.js 
4. Use follow command to compile: node r.js -o build.js
5. If successful you will get the optimized script.    

Creation of JRXML
     In this, you will just need to add custom visualization component to report and add these two properties to CVC as shown in the image.

You can download creation of circle using D3 from here.

Reference from jasper wiki page: Creating your custom visualization components

You can download the following charts example built using CVC

1. Bar Chart using D3
2. Stacked Group Bar Chart using D3 : check this on jasper server not in jasper studio if you want to see a result in jasper studio you have to add jquery in build.js or remove jQuery code and replace it with plain javascript.  
3. Area Chart using Highcharts.js
4. Bar Chart using Highcharts.js
5. Line Chart using Highstocks.js
6. Alabama map using Highmaps.js 

Note: If you want to use highchart/highstock/highmaps in your application then I would suggest you to read highchart / highstock license once.