currently learning Javascript and building a simple web application. Here, I am trying to display a chart using apex charts. When I do not include the import statement highlighted, then the chart displays fine on the webpage, when an import (or any other code within that file) is included, the chart no longer appears on the webpage. I am only starting to understand the asynchronous nature of JS so I have assumed it has got to do something with that. Any help is appreciated!
import { datapoints } from "./main.js"; // When this line is commented out or removed, the chart renders fine
var options = {
chart: {
type: 'candlestick'
},
series: [{
data: [
[1147651200000,67.37,68.38,67.12,67.79],
[1147737600000,68.10,68.25,64.75,64.98],
[1147824000000,64.70,65.70,64.07,65.26],
[1147910400000,65.68,66.26,63.12,63.18],
[1147996800000,63.26,64.88,62.82,64.51],
[1148256000000,63.87,63.99,62.77,63.38],
[1148342400000,64.86,65.19,63.00,63.15],
[1148428800000,62.99,63.65,61.56,63.34],
[1148515200000,64.26,64.45,63.29,64.33],
[1148601600000,64.31,64.56,63.14,63.55],
[1148947200000,63.29,63.30,61.22,61.22],
[1149033600000,61.76,61.79,58.69,59.77]
]
}]
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Browsers support the import statement, but only when enabled in a module script. You can enable a module script by adding type="module" to your HTML script tag. Here's a simple example of setting up import statements for the browser:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<script type="module" src="./script.js" defer></script>
</head>
<body>
<!-- ... -->
</body>
</html>
// script.js
import { datapoints } from "./main.js"; // this should work without errors
// ...
Note that if you do plan to scale an application, you may want to consider using a framework or a bundler such as Webpack, Parcel, or Vite.
Related
I'm starting a project that uses three.js library, and I will use also a parallax library. The 3D effects will be only decorative, but parallax will trigger it.
I modified this example and works fine for me:
demo: https://threejs.org/examples/#webgl_geometry_text_shapes
code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text_shapes.html
...but I need to send the title of every section (when the user enter on it by scrolling down) to the 3D script code, and it is closed inside a module.
...How to to it? I'm newbie into three.js and modules, and want to keep the parallax as is (outside module, because it's a well-known library and part of developed yet project)
Maybe the right way is transform the sample code, without modules... but I'm lost with it... for example, the starting part of JS in module, are:
import * as THREE from 'three';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { SVGLoader } from './jsm/loaders/SVGLoader.js';
import { FontLoader } from './jsm/loaders/FontLoader.js';
...how to do it without modules / import?
Thanks in advance
==================================
I add an example (maximum simplified) about what I need (and not works):
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - simple text from json</title>
</head>
<body>
<script type="module">
init();
function init() {
function hi( text) {
alert(text);
}
} // end init
</script>
<script>
init().hi("hi world");
</script>
</body>
</html>
I solved this turning the code into regular JS, not module JS.
In the library three.js, there is for each control a version for module (into /jsm folder) and normal JS version (/js folder).
Also changed the main file three.module.js for three.js file.
Thank you
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'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.
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've been really intrigued by Svelte when I went through the documentation yesterday, but I'm struggling to set up even a pretty basic project and I can't seem to figure out what I'm doing wrong.
I'm starting out with the following HTML :
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
Then, I create the following App.html component :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
export default {}
</script>
I run svelte compile --format iife App.html > App.js, and everything works fine.
So far, so good!
Now, I create a Line.html component with the following content :
<div class="line">{{value}}</div>
<script>
export default {}
</script>
I modify my App.html component like this :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
import Line from './Line.html';
export default {
oncreate() {
const line = new Line({
target: document.querySelector( 'lines' ),
data: {
value: 'test'
}
});
}
}
</script>
I would expect this code to add something like <div class="line">test</div> to the DOM as a child of <div class="lines"></div>.
However, I get the following warning when I compile this code :
No name was supplied for imported module './Line.html'.
Guessing 'Line', but you should use options.globals
And when I try to run the compiled code, I just get the following output in my console :
App.js:250 Uncaught ReferenceError: Line is not defined at App.js:250
index.html:10 Uncaught TypeError: App is not a constructor at index.html:10
What am I doing wrong here?
Note
I also raised this issue on Github.
Copying the answer from GitHub:
svelte-cli works on individual files — you would need to compile Line.html separately, and include it on the page like so:
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='Line.js'></script> <!-- one for each component! -->
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
It will guess that Line.js is defining a global variable called Line, which is how App.js is able to reference it — but it prefers that you're explicit about that, by using the --globals option.
Needless to say, this is a huge pain — it doesn't scale at all past a certain point. For that reason we recommend that you use a build tool with Svelte integrated. That way, you don't have to worry about juggling all the different imported files, and as a bonus Svelte is able to generate more compact code (because it can deduplicate some helper functions between components).
The easiest way to get started — and I keep meaning to write a very short blog post about this — is to click the 'download' button in the REPL. That will give you a basic project setup that you can get running with npm run dev and npm start. Under the hood it uses Rollup to create a bundle that can run in the browser.
Here's your test app running in the REPL. Notice that the way we use the <Line> component is by declaring it using components, and just writing it into the template, rather than manually instantiating it with oncreate.