[#8926] - Visualize.js Highcharts naming collision

When you try to load the Highcharts library along with Visualize.js you get, likely, a naming collision that prevents you from using Visualize.js. In our application we have been using Highcharts separately for various graphs so using Visualize.js alone isn't an option.

Here is the script order we're loading,

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="/bower_components/highcharts-ng/dist/highcharts-ng.min.js"></script>
<script src="http://<jasperserver-ip>/jasperserver-pro/client/visualize.js"></script>
<script src="/js/application.js"></script>

When I navigate to the view that uses visualize.js, the following code is in our controller,

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);
});

This 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. Changing the order of the scripts doesn't help either. I created a thread in the community forum here,

http://community.jaspersoft.com/questions/1027456/visualizejs-highcharts...