SpiderBasic

Posted: **Wed Aug 22, 2018 8:54 am**

Hello,

i try to make a new module for the JavaScript library ApexCharts using require. But no matter what I do, I always get an "Uncaught ReferenceError: ApexCharts is not defined".

here's my code:

Code: Select all

! $("body").append($("<div id='chart' style='width:500px;height:300px' />"));

! require(["https://cdn.jsdelivr.net/npm/apexcharts"], function(a, b, c) {

! var options = {
! 	chart:    { type: 'line' },
! 	series: [ { name: 'sales', data: [30,40,35,50,49,60,70,91,125] } ],
! 	xaxis:    { categories: [1991,1992,1993,1994,1995,1996,1997,1998,1999] }
! }

! var chart = new ApexCharts(document.querySelector("#chart"), options);
! chart.render();	

! });

and here's the same snippet in a HTML-File that works out of the box:

Code: Select all

<!DOCTYPE html>
<html lang="en">

<head></head>

<body>
    <div id="chart" style="width:500px;height:300px"></div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
  
      var options = {
        chart: { type: 'line' },
        series: [{ name: 'sales',  data: [30,40,35,50,49,60,70,91,125] }],
        xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997,1998,1999] }
      }
       
      var chart = new ApexCharts(document.querySelector("#chart"), options);
      chart.render();    
        
    </script>
    
</body>

</html>

require drives me crazy.

I'm desperate...

Posted: **Wed Aug 22, 2018 9:16 am**

Have you tried with Falsam's alternative solution ? In a nutshell: try to require something which does not exist first... Dunno why or how, but it seems to fix the problem with babylon.js...

Posted: **Wed Aug 22, 2018 9:33 am**

poshu wrote:Have you tried with Falsam alternate solution ?

Unfortunately this is not the right solution. I have had other console errors that prevent the framework from working properly.

Posted: **Wed Aug 22, 2018 10:11 am**

Hello Peter.

This way we have a visual rendering, but with console errors that I don't understand !!

Code: Select all

! $("body").append($("<div id='chart' style='width:500px;height:300px' />"));

! require(['ApexCharts', "https://cdn.jsdelivr.net/npm/apexcharts"], function(ApexCharts) {

! var options = {
!    chart:    { type: 'line' },
!    series: [ { name: 'sales', data: [30,40,35,50,49,60,70,91,125] } ],
!    xaxis:    { categories: [1991,1992,1993,1994,1995,1996,1997,1998,1999] }
! }

! var chart = new ApexCharts(document.querySelector("#chart"), options);
! chart.render();   

! });

I'm trying to understand why this message!!!

Console wrote:spiderbasic/libraries/javascript/ApexCharts.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Posted: **Wed Aug 22, 2018 10:55 am**

Yeah! The boys are back in town! It works!

falsam wrote:I'm trying to understand why this message!!!
Console wrote:spiderbasic/libraries/javascript/ApexCharts.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

i think, that's because of the first Array-Element (which doesn't exists)

Thanks a lot & Greetings ... Peter

Posted: **Wed Aug 22, 2018 1:19 pm**

So the "require a non-existent file" method works... Does any one know why though?

SpiderBasic

require: Need your help

require: Need your help

Re: require: Need your help

Re: require: Need your help

Re: require: Need your help

Re: require: Need your help

Re: require: Need your help