How to fix Visualize.js error while using D3 chart and Custom Visualization Component:

Question:

I am facing some issues with D3 chart libraries. I have created D3 bubble chart and its working perfectly fine on our Jasper Server. But its throwing some visualize.js error while running on our Reporting Application.

Answer (the relevant product version is 6.2.*):

The reason of failure to render your Custom Visualization Component via visualize.js feature is related to the fact that the optimized version of your JavaScript file does not contain visualize wrapper.

Please see the screenshot below:

I suppose that this wrapper is not present in your optimized script because it is also absent in your build file (build.js).

Below I quote a sample of the build.js file that is supplied with the Studio's sample:

({
//optimize: 'none', 
// Uncomment this property to disable the uglify of the libraries
baseUrl: '',
paths: {            
    'd3': 'd3.min' ,                     
    'd3Circle': 'cvc_test'             
},            
wrap: {
    start: "if (typeof define === 'function' && define.amd){}nelse if (typeof __visualize__ !== 'undefined' &&ntypeof __visualize__.define === 'function')n{n}nn(function(root){nnvar define = root.define;nn",
    end: "nn}(typeof __visualize__ != 'undefined' ? __visualize__ : window));"},
name: "d3Circle",
out: "cvc_test.min.js"
})

Please pay your attention to the lines that start from: wrap: {

You should add to your build file the "wrap" task and then rebuild your project again.

I have checked this idea with one of the samples that were available in my

environment and this step (adding wrap task) to the build.js file allowed

me to render my sample via visualize.js.

P.S.:

With JasperStudio are supplied pre-created templates of projects that utilize custom visualization component (CVC). If you don’t know from which point to start your work on such solution you may want to create a stub for the project and then after you assured that this sample works in studio and server update it with some modifications.

To generate a sample from the pre-created project:

• run JasperStudio

• select File->New->Other

• select one from the three templates that are available for you

• give a name for your project

• click Next button and complete the project creation dialogue:

After this you can target your mouse to the build.js file, right click on this file and select “Build component” item from the context menu to build it: