Setup of RequireJS and PhantomJS into Jasper

This tutorial is divided into three parts

1. Setup RequireJS and PhantomJS into Jasper Studio
2. Setup RequireJS  and PhantomJS into Jasper Server
3. Check setup is working properly or not

1a) Setup of RequireJS into Jasper Studio
       Note: In Jasper Studio, there is no need to add those property. But if you are not finding those property then add those property as explained.
    
      Goto Window -> Preferences -> Jaspersoft Studio -> Properties
      Add following two properties

      Property Name: com.jaspersoft.jasperreports.components.customvisualization.require.js
                      value: file:/Path/to/your/require.js
      Property Name: net.sf.jasperreports.web.resource.pattern.customvisualization.scripts
                      value: com/jaspersoft/jasperreports/customvisualization/resources/require/.*

      You can download RequireJS from here.
   
1b) Setup of RequireJS into Jasper Server 
     Add same properties, which we have added for jasper studio to property file /WEB-INF/classes/jasperreports.properties of jasper server.

      Now here comes question why need RequireJS.
              RequireJS is used to load javaScript when required.It loads script dynamically and also sequentially as defined in module. You can read about RequireJS on its official websites.

2a) Setup of PhantomJS into Jasper Studio
      I would suggest to add PhantomJS executable in PATH instead of properties of Jasper Studio.You can download phantom js from here.

      PATH Setting:
      In linux: open environment file by typing below command into terminal
            nano /etc/environment  then add it to PATH "path/to/phantomjs/executable"

     On Windows: Open environment variable and add "path/to/phantomjs/executable" into Path variable,    

     In Jasper Studio: This is not required if you have already set up PhantomJS in PATH environment variable.

      Goto Window -> Preferences -> Jaspersoft Studio -> Properties
      Add following property
     Property Name: com.jaspersoft.jasperreports.components.customvisualization.phantomjs.executable.path
                     value: "path/to/phantomjs/executable"

2b) Setup of PhantomJS into Jasper Server
     Add same properties, which we have added for jasper studio to property file /WEB-INF/classes/jasperreports.properties of jasper server. If you have already added it to path then this step is not required.

    Why we use PhantomJS.
        PhantomJs is a real layout and rendering engine, it can capture a web page as a screenshot.Because PhantomJS can render anything on the web page,it can not only be used to convert HTML content styled with CSS but also SVG, images and Canvas elements.

3) To check RequireJS and PhantomJS is working properly
     Please downaload file and open it in Jasper Studio or add report to jasper server. Run report if it is working then your RequireJS is working properly now try to download report in PDF if it is downloaded successfully then it means PhantomJS is also working correctly.

Download SetupCheck.zip

Now you can read second tutorial Getting Started with D3 Charts into Jasper.