Visualize.js Highcharts naming collision

[mana135]

In our current application, we're using the highcharts library and an angular directive to display a line chart in one section. I am now adding JasperServer as a reporting solution and attempting to use VisualizeJS in a separate section. The library loads fine when I include the scripts in such an order like,

<script src="https://code.highcharts.com/highcharts.src.js"></script>[/code]

<script src="/bower_components/highcharts-ng/dist/highcharts-ng.min.js"></script>[/code]

<script src="http://<jasperserver-ip>/jasperserver-pro/client/visualize.js"></script>[/code]

<script src="/js/application.js"></script>[/code]

 

When I navigate to the area I'm attempting to embed a JS report, calling visualize like,

visualize(function (v) {  var report = v.report({    resource: "/organizations/organization_1/reports/Run_Event_Report",    container: "#container",    params: { "site_name" : [ "Site1" ] },    events: {      reportCompleted: function(status) {        console.log(status);      }    }  });}, function(err) {  console.log(err);});[/code]

results in Highcharts throwing an error "Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16" which is likley because the Highcharts library is being loaded twice. It seems that VisualizeJS isn't serving up the Highcharts library to the client so I need to keep Highcharts and the directive scripts in the HEAD. I also tried changing the order so VisualizeJS is loaded first, but that doesn't make any difference. What should I do?

[dpetzold]

Yes, it certainly appears that Highcharts is being loaded twice here. Have you logged a case around this yet? I'm happy to look into this.

[mana135]

No I have not logged a case. I'm not sure how to do that.

[dpetzold]

In the main menu here you will see "Tracker". Select this and the "Create new Bug Report" hyperlink. This is very helpful as we are reviewing this.