Library duplication issue using Highcharts in Jaspersoft Studio

Question

I have a problem with Highcharts libraries. I have created various charts with the Custom Visualization tool available in Jaspersoft Studio. They do not use all the same library, e.g. I have a Bubble Map chart which uses Highmaps.js and a Stock chart which uses Highstock.js.

Every report seems to work very well when I visualize it in Jaspersoft Server. But when I create a Dashboard containing two differents reports, I have this error:

Uncaught Highcharts error #16: www.highcharts.com/errors/16 Highcharts already defined in the page

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

I do understand that there is a conflict between Highmaps.js and Highstock.js as they have features in common. But I do not know how to avoid it: I need features from both Highmaps and Highstocks. Here is how I include those libraries to define my reports:

-1st chart (Stock chart)

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

-2nd chart (Bubble map chart)

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

And here is how I write my 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 quite the same with the report using Highmaps. I hope I am not the first one to have this problem, and if so, can anyone suggest me a method to avoid this library duplication?

EDIT

As suggested, I tried replacing highmaps.js by highstock.js + map.js as follow:

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

I now have an error 17:

The requested series type does not exist

This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.

Now something is missing from Highmaps.js and I do not know what. Looking forward to suggestions.

UPDATE

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

Here are the errors I have when I run my two reports in the same dashboard:

Answer 1

See my comment on this question. You need to only load the "base" highstock.js and then any other modules you want to load 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 could possibly just load highmaps.js as it also contains a bunch of other chart types.

Answer 2

Finally, I have solved the problem by merging all Highcharts files I needed to draw my Bubble map chart, as suggested by @PawełFus, and enclosed the code with a condition on 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 Highcharts charts I want to build.

That works great. Thanks all, and particularly @PawełFus.