The problem of duplicating libraries using Highcharts in Jaspersoft Studio

Question

I have a problem with Highcharts libraries. I created various charts using the Custom Visualization tool available in Jaspersoft Studio. They do not use all the same libraries, for example. I have a Bubble Map chart that uses Highmaps.js and a stock chart that uses Highstock.js.

Each report seems to work very well when I visualize it on a Jaspersoft server. But when I create a Dashboard containing two differences reports, I have this error:

Unclean error Highcharts # 16: www.highcharts.com/errors/16 Screen diagrams already defined on the page

This error occurs the second time that Highcharts or Highstock are loaded onto the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all Highcharts functions are included in Highstock, so if you use a combination of Chart and StockChart in combination, you need to download the highstock.js file.

I understand that there is a conflict between Highmaps.js and Highstock.js, because they have common features. But I do not know how to avoid this: I need functions from Highmaps and Highstocks. Here's how I include these libraries to define my reports:

-1st chart

define(['jquery', 'highstock'], function(hs_test) { return function(instanceData) { /*...*/ } }); 

2nd chart (bubble card map)

 define(['jquery','highmaps','data','world','exporting'], function (mapbubble) { return function(instanceData) { /*...*/ } }); 

And this is how I write build.js files:

 ({ optimize: 'none', baseUrl: '', paths: { jquery: 'jquery', highstock: 'highstock', exporting: 'exporting', 'highstock_test': 'highstock_test' }, shim: { 'highstock': { deps: ["jquery"], exports: 'Highcharts' } }, name: "highstock_test", out: "highstock_test.min.js" }) 

I used the Highstock example here, but I do the same with the report using Highmaps. I hope that I am not the first to have this problem, and if so, can someone suggest me a method to avoid duplicating the library?

EDIT

As I said, I tried replacing highmaps.js with highstock.js + map.js as follows:

 define(['jquery','highstock','map','data','world','exporting'], function ($, Highcharts) { return function (instanceData) { /*...*/ } }) 

Now I have error 17:

The requested series type does not exist

This error occurs when you set the chart.type or series.type parameter to a series type that is not defined in Highcharts. A typical reason may be that you do not have an extension file in which the type of series is defined, for example, to run the Series Arearange, which are necessary to download the file highcharts-more.js.

Now something is missing in Highmaps.js, and I don't know what. We are waiting for offers.

UPDATE

I can avoid this error 17 by turning on Highcharts-more.js, but I still have this error 16 while running two charts.

Here are the errors that I have when running my two reports on the same panel:

Answer 1

Finally, I solved the problem by combining all the Highcharts files that I needed to draw a diagram of the Bubble maps, as suggested by @ PawełFus, and attached the code with the condition of the Highcharts variable:

 if (typeof Highcharts == 'undefined') { /* Optimized merge files containing both highstock.js, highcharts-more.js and map.js */ } 

Then I use this file for all the Highcharts that I want to build.

This works great. Thanks to everyone, and especially @ PawełFus.

Answer 2

See my comment on this question . You only need to download the "base" highstock.js, and then any other modules you want to download after that:

 <script src="code.highcharts.com/stock/highstock.js"></script> <script src="code.highcharts.com/stock/modules/map.js"></script> <script src="code.highcharts.com/stock/modules/ANOTHERMODULEYOUNEED.js"></script> 

Depending on what you need, you can simply download highmaps.js , as it also contains a bunch of other types of diagrams.