Amcharts undefined in js file

StackOverflow https://stackoverflow.com/questions/22412168

  •  14-06-2023
  •  | 
  •  

Question

I am trying to create an amchart chart in a javascript file. However whenever I try and create the chart in my console I get this error `ReferenceError: AmCharts is not defined. When I try to create the same chart but this time inside of the HTML file in a script tag the chart works fine. Heres the js file code:

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    "dataProvider": [{
        "country": "USA",
        "visits": 2025
    }, {
        "country": "China",
        "visits": 1882
    }, {
        "country": "Japan",
        "visits": 1809
    }, {
        "country": "Germany",
        "visits": 1322
    }, {
        "country": "UK",
        "visits": 1122
    }, {
        "country": "France",
        "visits": 1114
    }, {
        "country": "India",
        "visits": 984
    }, {
        "country": "Spain",
        "visits": 711
    }, {
        "country": "Netherlands",
        "visits": 665
    }, {
        "country": "Russia",
        "visits": 580
    }, {
        "country": "South Korea",
        "visits": 443
    }, {
        "country": "Canada",
        "visits": 441
    }, {
        "country": "Brazil",
        "visits": 395
    }],
    "valueAxes": [{
        "gridColor":"#FFFFFF",
        "gridAlpha": 0.2,
        "dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "visits"      
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start",
        "gridAlpha": 0
    },
    "exportConfig":{
      "menuTop": 0,
      "menuItems": [{
      "icon": '/lib/3/images/export.png',
      "format": 'png'     
      }]  
    }
});

And in my html theres a simple div tag.

 <div id="chartDiv"></div>

Heres the html file that does work:

<html>
<body>
    <div id="chartdiv" style="width: 640px; height: 400px;"></div>
    <script src="js/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="js/amcharts/amcharts/serial.js" type="text/javascript"></script>
    <script type="text/javascript">

        var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    "dataProvider": [{
        "country": "USA",
        "visits": 2025
    }, {
        "country": "China",
        "visits": 1882
    }, {
        "country": "Japan",
        "visits": 1809
    }, {
        "country": "Germany",
        "visits": 1322
    }, {
        "country": "UK",
        "visits": 1122
    }, {
        "country": "France",
        "visits": 1114
    }, {
        "country": "India",
        "visits": 984
    }, {
        "country": "Spain",
        "visits": 711
    }, {
        "country": "Netherlands",
        "visits": 665
    }, {
        "country": "Russia",
        "visits": 580
    }, {
        "country": "South Korea",
        "visits": 443
    }, {
        "country": "Canada",
        "visits": 441
    }, {
        "country": "Brazil",
        "visits": 395
    }],
    "valueAxes": [{
        "gridColor":"#FFFFFF",
        "gridAlpha": 0.2,
        "dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "visits"      
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start",
        "gridAlpha": 0
    },
    "exportConfig":{
      "menuTop": 0,
      "menuItems": [{
      "icon": '/lib/3/images/export.png',
      "format": 'png'     
      }]  
    }
});

    </script>
</body>
</html>

The script definitions are exactly the same for both files. Is there a special include or something required in the js file? Because jquery works fine for me.

Can someone explain how I can call the amcharts from my js file?

Thanks

Was it helpful?

Solution

When you put the code in a separate file, are you making sure to put its script tag underneath the amcharts script tags?

The order in which your tags appear in your html matters - if you try to run your script before the amcharts script (by placing its tag above the amcharts tag), the browser won't have loaded amcharts yet and so will throw a reference error.

Your html should look like this, assuming you name your script:

<script src="js/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="js/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="js/myScript.js" type="text/javascript"></script>

Whereas, if you had things in this order, it would not work - you would get a reference error.

<script src="js/myScript.js" type="text/javascript"></script>
<script src="js/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="js/amcharts/amcharts/serial.js" type="text/javascript"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top