I'm trying to use a chart component from Syncfusion in a simple application I'm developing.
It's pure JS, no Angular, no React, no TypeScript. I've not even used NPM
My problem is that I'm not able to import the necessary files to make the chart component works!
Following the documentation founded here
https://ej2.syncfusion.com/javascript/documentation/chart/es5-getting-started/
I've added a systemjs.config.js in my folder /_assets/systemjs.config.js and I've configured this way:
System.config({
paths: {
'syncfusion:': './_assets/vendors/Syncfusion/#syncfusion',
},
map: {
app: 'app',
//Syncfusion packages mapping
"#syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"#syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"#syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
"#syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"#syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"#syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"#syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"#syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
"#syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"#syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"#syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"#syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"#syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
"#syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
,
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
It talks about "app" but I don't have an app variable... I'm not using Angular neither React.
In the folder /_assets/vendors/Syncfusion/ I've inserted all the scripts files of Syncfusion:
Then in my HTML page I've added:
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="/_assets/js/systemjs.config.js"></script>
but when I run the page from the local dev web server I get:
Test:94 Uncaught ReferenceError: ej is not defined
We have analyzed your query. And we have prepared a sample based on your requirement. To render EJ2 charts, you need to just refer the following scripts. There is no need to config the system.cofig as like the configuration you have done. We have already change the documentation from our side. It will be refreshed in the month of June.
Please find the below code snippet to achieve this requirement,
<head>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="line-container" align="center"></div>
<script>
var chart = new ej.charts.Chart({
//Initializing
});
chart.appendTo('#line-container');
</script>
</body>
Sample link: https://stackblitz.com/edit/3ugmn8?file=index.html
Kindly revert us, if you have any concerns.
Regards,
Baby.
We have analyzed your query. If you want to load only chart scripts instead of loading entire scripts. You can refer the charts and its dependency scripts alone.
Please find the below code snippet to achieve this requirement,
<head>
<script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var chart = new ej.charts.Chart({
// Other customization
});
chart.appendTo('#container');
</script>
</body>
Sample for your reference can be found from below link,
chart sample
Kindly revert us, if you have any concerns.
Regards,
Baby.
Related
I am trying to make a single page website for which I need a 3d rendering engine. But I keep getting the error:
The requested module '/Babylon.js-master/dist/babylon.js' does not provide an export named 'Engine'
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gcode Designer</title>
<link href="stylesheet.css" rel="stylesheet">
<script src="Main.js"> </script>
<style type="text/css" media="screen">
</style>
<script src="plotly-2.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>
<body>
<p>hello</p>
<canvas id="renderCanvas"></canvas>
<script type="module" src="http://127.0.0.1:5500/gcodeViewerBabylon.js"></script>
</body>
Javascript
import { Scene, Engine } from '/Babylon.js-master/dist/babylon.js';
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
//Some More code
Things I have already tried:
Trying an installing from npm and trying to import. that doesn't work at all, gives the error "Failed to resolve module specifier "babylonjs". Relative references must start with either "/", "./", or "../"."
Trying a CDN
Both of those approaches did not work. I am washing exactly the same problems with another library. I am new web development, actually my first project. Maybe I am making some very fundamental mistake.
At the same time I imported three.js the same way and it worked beautifully.
Thanks for any help in advance.
If '/Babylon.js-master/dist/babylon.js' is stored in relation to this script then it should be './Babylon.js-master/dist/babylon.js' and if not local then it should be the full https...
BUT that likely would not fix your issue because that module doesn't not look like the "./babylon/core" module that you need to actually export engine and scene from.
You already referenced the babylonjs core in your html so you should be able to just change it to this
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var scene = new BABYLON.Scene(engine)
Also if you really want to use modules you might be able to change script type to module like in the example below, but I'm not familiar with that route
https://stackoverflow.com/a/34607405/12654186
Refs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
https://v8.dev/features/modules#mjs
I am currently aiming to make a weather widget work by using an npm module https://react-open-weather.gitbook.io/project/. This is a React component, which is something I have never worked with before.
I've taken the CDN's provided by the npm module, but other than that I don't know how to somehow "enable" my JS file to read the React component, or how I can integrate it. I've tried this link (https://reactjs.org/docs/add-react-to-a-website.html) previously to asking the question on here but stuff started breaking (see code snippet further below).
The problem is that I don't know how to work with React I managed to mess it up. This is why I'm turning to you now: Anyone with React experience who could help me out here?
The following react component is how I need to load the today weather data by city name:
<ReactWeather
forecast="today"
apikey="bdb591c14b9e4a079623b1a838313888"
type="city"
city="Copenhagen"
/>
My project is built with vanilla JS, so I would need help integrating this component into my file.
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-
icons.min.css"
type="text/css"/>
</head>
<body>
<section id="weather">
<div class="weather_component_container"></div>
</section>
<!-- npm module for weather -->
<script src="node_modules/react-open-weather/lib/js/ReactWeather.js"></script>
<!-- Load React -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component -->
<script src="weather.js"></script>
<script src="script.js"></script>
</body>
I got the following started code from https://reactjs.org/docs/add-react-to-a-website.html and replaced it with my DOM element, which is #weather
And this is the error I get in the console: "The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object"
weather.js
'use strict';
React.createElement(ReactWeather, {
forecast: "today",
apikey: "bdb591c14b9e4a079623b1a838313888",
type: "city",
city: "Copenhagen"
});
ReactDOM.render(
document.getElementById('weather')
);
By default, JavaScript don't understand JSX syntax. You may miss this document:
https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx
Please add the script and try again
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Note: don't use this script in production because it may slow your app. To use in production, refer to the doc https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}
I am trying to port angular 2 tutorial with Django backend
Here is my html file
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="/static/main.js"></script>
<script src="/static/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/static/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="/static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/static/node_modules/systemjs/dist/system.src.js"></script>
<script src="/static/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/static/node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('/static/app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
I found out that System.js is not working in
System.import('/static/app/main')
I have to use
System.import('/static/app/main.js')
and add .js manually to all my non 3rd libraries import for the angular app to work.
The interesting thing about this is that I don't have to add .js to
'angular2/core'
'angular2/platform/browser'
since System.js automatically resolves the import as long as I add .js extension manually to all the import for files I wrote.
But if I set
System.defaultJSExtensions = true;
I dont' have to add .js to my files anymore but System.js loses its capability to import all libraries in node_modules and instead try to use default django dir
http://localhost:8000/myApp/angular2/platform/browser.js
Can someone give me some guidance?
Thanks
I think you misunderstand what defaultJSExtensions configures. The latter simply allows to add the js extension when importing modules:
System.defaultJSExtensions = true;
// requests ./some/module.js instead
System.import('./some/module');
This applies if the module wasn't previously and explicitly registered using System.register.
The angular2.dev.js file contains modules for Angular2 core (registered explicitly with System.register). Including the file with a script element simply makes them available for imports.
If you want to use instead single JS files of Angular2 from node_modules/angular2 (for example core.js, ...), you need this SystemJS configuration:
System.config({
defaultJSExtensions: true,
map: {
angular2: 'node_modules/angular2/src',
rxjs: 'node_modules/rxjs'
},
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
What is important above is the map block to tell SystemJS where to find modules with names that start for example by angular2/.
In this case, no need to import Angular2 bundled JS files (angular2.min.js, ...).
I have seen similar questions to this, but I haven't been able to find an answer. Anyway, I am experimenting using Kendo (open source core for now) in a Visual Studio Cordova project. Taking Cordova out of the equation to start with, I am just trying to get a very simple view with the following to work..
...
<script src="lib/kendo-ui-core/js/jquery.min.js"></script>
<script src="lib/angularjs/angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.core.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.loader.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.view.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.pane.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.application.js"</script>
</head>
<body kendo-mobile-application ng-app="foo">
<kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div>{{hello}}</div>
</kendo-mobile-view>
<script>
angular.module("foo", [ "kendo.directives" ])
.controller("MyCtrl", function($scope) {
$scope.hello = "Hello World!";
});
</script>
<script src="scripts/index.js"></script>
</body>
</html>
I added each Kendo file to try and get rid of each error (initially just started with kendo.core.js)
At this stage, when I try to run this (just opening index.html in Chrome, out side of Visual Studio), I get
Uncaught TypeError: kendo.ViewContainer is not a function
Observable.extend.init # kendo.mobile.view.js:469
Widget.extend.init # kendo.mobile.pane.js:102
startHistory # kendo.mobile.application.js:171
So this is occuring at the line
that.viewContainer = new kendo.ViewContainer(that.container);
in the file kendo.mobile.view.js.
I don't seem to be able to find where ViewContainer is declared.
If I use a CDN of like <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"> then this works fine, so I need to know which references to use from the core library.
I found the doco that explains what I need here.
I added everything for the "Application" section (in the exact order listed), and then put
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
at the end.