Search code examples
javascriptsystemjssyncfusion

use systemjs in a basic vanilla js page

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: enter image description here

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

Solution

  • 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.