Pochampalli IT Labs: Step By Step Procedure to run the existing examples of D3 chart samples(that comes with product) in 6.x Jasper Design Studio 6.x and Jasper Server 6.x CE(Pro)

Hi Folks,

In this tutorial, you will learn/see how to run D3 chart(s) samples that comes with TIBCOJasperserver 6.x product.
Notice that you will only see how to run the existing samples given by Jaspersoft in Jaspersoft Design Studio 6.x and Jasperserver CE 6.x and in upcoming posts you will find creation/development other D3 visualizations.

This post is specific for below software setup as on this article written date (9th Sep 2015). With future releases of product the procedure may change as the sources of this article are saying that they eventually move the jars/files to Jasper Libraries.

Software Used for Testing :
1) JasperDesign Studio CE 6.1 installed as a plug to Eclipse Java EE IDE for Web Developers. Version: Mars Release (4.5.0)
(You can use stand alone studio - I just wanted to get the studio in Eclipse )
2) Jasperserver 6.1 CE
3) Operating System : Windows 10
4) Java 1.7 installed in OS.

This post is divided into 2 parts.
1) Executing/Running the samples in Jasper Design Studio
2) Executing/Running the samples in Jasper Server

NOTE : Click the images to get the best view of content

1) Executing/Running the samples in Jasper Design Studio 6.x (I used 6.1 and the latest release is 6.1.1)

1) Installation of PhantomJS and setting path of its executable file in Jasper Studio.
2) Setting the path for require.js
3) Setting customvisualization pattern path

1) Installation of PhantomJS and setting path of its executable file in Jasper Studio.

a) Download the PhantomJS software from here : http://phantomjs.org/ and unzip it.

b) Set the above .exe as path JapserDesign Studio properties (Images shown below are from Eclipse).

Go to Windows -> Click on Preferences -> Jasper Design Studio -> Click on Properties

com.jaspersoft.jasperreports.components.customvisualization.phantomjs.executable.path =C:/Users/Sadakar/Downloads/backup/phantomjs-2.0.0-windows/phantomjs-2.0.0-windows/bin/phantomjs.exe

com.jaspersoft.jasperreports.components.customvisualization.require.js=file:/E:/1_Softwares/JAVA IDE/eclipse-jee-mars-R-win32-x86_64/eclipse/configuration/org.eclipse.osgi/936/0/.cp/resources/scripts/require-2.1.6.src.js

c) Add custom visualization pattern property

net.sf.jasperreports.web.resource.pattern.customvisualization =com/jaspersoft/jasperreports/customvisualization/.*

(Note that require.js by default comes with Jasper Design Studio 6.x and as I am using Eclipse I have referred the hard coded path. Also, this property by default set in the properties.. Just check whether it is there or not, if not provide the path).

Quick Understanding Images :
1st two properties image

3rd property image

d) Import the the existing example(s) D3 charts project zip file to Studio and run the reports.
Jaspersoft has provided few examples demonstrations that you can download from here

Direct Download Link (In feature it may move)
http://community.jaspersoft.com/sites/default/files/wiki_attachments/cvc_samples_20150127.tgz

Or

Go to this page http://community.jaspersoft.com/wiki/custom-visualization-component-v60x-how-run-samples and check the "Installing the samples" section and download the zip file.

Now, In studio
File > Import > General > Existing Projects into Work space > Select Archive file > select the downloaded zip file > Click Next then Finish.

Each of the folder is an example of D3 visualization.

e) Run the report
Expand an example : lets say raphael_map and observe the the different .js files and .jrxml/.jasper file. (While developing we won't get all these. To get all of them, right click on folder name and build it or right click on build.js file and build the file.. Observe the newly generated .js files).

Now, open the .jrxml file and click on Preview button.

Exporting to PDF

Do the same for other samples ..
(Got null pointer exception when previewed in Interactive preview - Need to check, will update this point).

2) Executing/Running the samples in Jasper Server

1) Give the path of PhantomJS .exe file in Computer Environment variables.

2) Add below properties in jasperserver.properties file

File location : C:\Jaspersoft\jasperreports-server-cp-6.1.0\apache-tomcat\webapps\jasperserver\WEB-INF\classes

com.jaspersoft.jasperreports.components.customvisualization.require.js=file:/E:/1_Softwares/JAVA IDE/eclipse-jee-mars-R-win32-x86_64/eclipse/configuration/org.eclipse.osgi/936/0/.cp/resources/scripts/require-2.1.6.src.js

net.sf.jasperreports.web.resource.pattern.customvisualization.scripts=com/jaspersoft/jasperreports/customvisualization/resources/require/.*

NOTE : look at the yellow colored things in above code and do it this way.

3) Publish the Reports to the Jasper and view the output
a) Open the JRXML from the folder.
b) Click on Publish button -> the server will pick .js file and JRXMl file.
c) Provide data source ( for this example : JNDI data source I have chosen as suggested in WIKI pages).
d) Browse the repository(jasper server) for the report and click on RUN button.

4) Sample output