Angular 2+ is used for new part of Spring MVC application where Highcharts is used. Later, highcharts charting (angular-highcharts) is added to new components written in angular 2+ technology. The same Highcharts 6 version is used at both sides.
At the time angular charting component is initialized Highcharts is already loaded in web page and following Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16 is thrown.
Highcharts is not reloaded by angular component and H.error(code, true) is executed.
What is the best way to resolve this conflict?
Should additional Highcharts_X global variable for legacy web application be created? I don't prefer this approach because it is productively used by Higcharts and then it should be changed in the source code at many places.(?)
Is it possible to tell angular-higcharts that the library is already loaded and to use that one?
Or to let it be reloaded without breaking JS with the error?
You can use Global defined Highcharts instead of load Highcharts twice.
For example:
//import * as Highcharts from 'highcharts/highstock';
declare var Highcharts: any;
You must remove loading module string and declare any Variable for build with no problems.
Related
The problem
How to include the library three.js in SAPUI5 so that I can use it like I normally do, using THREE as root variable in my main view controller?
I already tried to create a folder libs in my project directory and include it in my controller header like shown here: SAPUI5: How to use external library in controller
Getting an error:
THREE is undefined
Edit: It's the same for 'three' instead of 'THREE'.
There is also an experimental package within SAPUI5 sap.ui.vk.threejs which is kind of messy and seems not to be well documented.
JavaScript is case sensitive, you are importing the parameter as 'three'. THREE is treated as a different variable
i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.
Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.
I'm working on the migration of an application from Wicket 1.4 to Wicket 6. One page is not responding as it is supposed to and I suspect this is caused by a missing JavaScript file.
The file is present in a Java package. In the original application the file is added in a wizard step in the same package. For debug purposes (I'm not sure the missing file causes the problem) I moved to call to the application abstract page which is in another package.
The following call is added to an overwrite of renderHead. Which already contains files which are added correctly and contains super.renderHead.
response.render(
JavascriptHeaderItem.forReference(
new PackageResourceReference(ClassInSamePackage.class, "jsName.js")
)
);
The script-tag is present in the html-body instead of in the head.
I checked that the script is present at the location linked in the script-tag. But it seems impossible to render it in the html-head.
It turned out to be a combination of an used JavaScriptFilteredIntoFooterHeaderResponseand an error in the wicket output because wicket was in DEVELOPMENT mode instead of DEPLOYMENT mode. When wicket was in DEPLOYMENT mode the code was added to the footer correctly and it was also working correctly.
I am using HighCharts and HighStock and I want to display a Gauge chart (which does not exist in the HighCharts library) and a Stock chart on the same page. Thus, I have to load both of the libraries and not just HighStock as others suggested.
I am using Meteor and I am loading these libraries with the maazalik:highcharts and jhuenges:highstock packages.
However, its giving me the error 16 which states that they can't be loaded together.
How can I do this?
Thank you very much in advance.
The entire code base for Highcharts is included in the Stock package. To avoid collision you should therefore only include Highstock. With your requirements you also need "Highcharts-more" and "Solid-gauge" modules.
None of the packages you reference has this specific setup, and using both cause a collision. I've created a package ondkloss:highstock (GitHub) which satisfies your requirements. If you would like to create your own, the essense is including the mentioned files, for example like this:
Package.onUse(function(api) {
api.versionsFrom('1.1.0.2');
api.use('jquery');
api.addFiles([
// Core
'lib/highstock.js',
// Extra types
'lib/highcharts-more.js',
'lib/highcharts-solid-gauge.js',
], 'client');
});
The sources used can be found here:
Highstock core
Highcharts more module
Solid gauge module
I am trying to integrate DyGraph in a web site that uses require.js for loading modules.
It is possible to load DyGraph using require?
I looked at the code and did not see any define() in there.
I came across this project where it looks like it needs to be "wrapped".
https://github.com/mgmarino/kanso-dygraphs
Has anyone done this before?
Thanks.
The latest dygraphs was fine to load with just:
// put this in your require config
paths: {
'dygraphs' : 'bower_modules/dygraphs/dygraph-combined',
}
...
require('dygraphs');
console.log(Dygraph); // Dygraph is added to global scope