Visualize.js is too slow. How to fix this?

Question:

We created a dashboard using fusioncharts.js and highcharts.js.

We have enabled cache setting in jasper's tomcat with expiry time for all the types.

When we call the dashboard for the first time using visualize.js and monitor the chrome network console, we observed that more than 500 requests are initiated to render the dashboard in a page.

We have done almost everything like enabling cache, query fine tuning from our side to load dashboard faster.

What is the reason of this behavior? How can we fix this and boost the work of visualize.js?

Answer:

Let's take a look at the HAR file that contains the log of activity between your browser and visualize.js/JasperReports Server:

Judging by the screenshot above you are using non-optimized version of visualize.js (the scripts part in the URL instead of optimized-scripts).

That means that the non optimized scripts are used on JasperReports Server side of the solution, please refer to the screenshot below:

To boost the performance of the application and visualize.js you should use its optimized version.

Quoting the information from the Visualize.js 6.3.0 guide, page 8, about how to enable optimization:

To turn on optimization and reduce side-effects such as this one, set the optimize flag when you load Visualize.js, as shown in the following example:

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>