Search code examples
javascriptchartsamcharts

Error: ```Uncaught ReferenceError: am4core is not defined``` while creating Amcharts 4 chart

when creating a column chart using the Amcharts4 library I get the following error message:

Uncaught ReferenceError: am4core is not defined

My code is as follows:

JS

am4core.ready(function() {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  // Create chart instance
  var chart = am4core.create("chartdiv", am4charts.XYChart);

  var chartData = [{
    "category": 2009,
    "income": 23.5,
    "url": "#",
    "description": "click to drill-down",
    "months": [{
      "category": 1,
      "income": 1
    }, {
      "category": 2,
      "income": 2
    }, {
      "category": 3,
      "income": 1
    }, {
      "category": 4,
      "income": 3
    }]

  }, {
    "category": 2010,
    "income": 26.2,
    "url": "#",
    "description": "click to drill-down",
    "months": [{
      "category": 1,
      "income": 4
    }, {
      "category": 2,
      "income": 3
    }, {
      "category": 3,
      "income": 1
    }, {
      "category": 4,
      "income": 4
    }]
  }, {
    "category": 2011,
    "income": 30.1,
    "url": "#",
    "description": "click to drill-down",
    "months": [{
      "category": 1,
      "income": 2
    }, {
      "category": 2,
      "income": 3
    }, {
      "category": 3,
      "income": 1
    }]
  }];

  chart.data = chartData;

  // Create axes

  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "category";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 30;
  categoryAxis.numberFormatter.numberFormat = "#";

  categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    if (target.dataItem && target.dataItem.index & 2 == 2) {
      return dy + 25;
    }
    return dy;
  });

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // Create series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = "income";
  series.dataFields.categoryX = "category";
  series.name = "Income";
  series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
  series.columns.template.fillOpacity = .8;
  series.columns.template.propertyFields.url = "url"; 
  

  var columnTemplate = series.columns.template;
  columnTemplate.strokeWidth = 2;
  columnTemplate.strokeOpacity = 1;

  var title = chart.titles.create();
  title.text = "Yearly Data";
  var resetLabel = chart.plotContainer.createChild(am4core.Label);
  resetLabel.text = "[bold]<< Back to Yearly Data[/]";
  resetLabel.x = 20;
  resetLabel.y = 20;
  resetLabel.cursorOverStyle = am4core.MouseCursorStyle.pointer;
  resetLabel.hide();
  resetLabel.events.on('hit', function(ev) {
    resetLabel.hide();
    ev.target.baseSprite.titles.getIndex(0).text = "Yearly Data";
    ev.target.baseSprite.data = chartData;
  });

  series.columns.template.events.on("hit", function(ev) {
    if ('object' === typeof ev.target.dataItem.dataContext.months) {
      // update the chart title
      ev.target.baseSprite.titles.getIndex(0).text = ev.target.dataItem.dataContext.category + ' monthly data';
      // set the monthly data for the clicked month
      ev.target.baseSprite.data = ev.target.dataItem.dataContext.months
      resetLabel.show();
    }
  }, this);
});

HTML:

<body>
    <div class="titel">
        <p> Title</p>
    </div>
    <script src="https://www.cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
    <script src="https://www.cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
    <script src="https://www.cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>
    <script type="text/javascript" src="./test_drill_down.js"></script>
    <div id="chartdiv"> </div>
    <link href="style.css" rel="stylesheet" type="text/css">
    </div>
</body>
</html>

But I do not understand why I get this error, the modules are loaded before the javascript chart script. I am using the same HTML file as I used in other graphs, and there it did work properly.

What am I doing wrong?

Solution

  • Your URLs are wrong - there is no www.cdn. Either use one or the other, but not both combined.

    cdn:

        <script src="https://cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
    <script src="https://cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>

    www:

        <script src="https://www.amcharts.com/lib/4/core.js" type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/4/index.js" type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>