Load array of data in am4charts.XYChart

Question

I am new to AmCharts and attempting to load JSON data from an array into a chart and get sorted data, the chart is not loading, here is what I am doing, I have this error Chart was not disposed id-191 how can I correct this? Thank you.

HTML

<div id="Fourdiv">

Javascript

window.addEventListener("load", genFunction());

function genFunction() {
 var x2;
 var jsonx;
 var x = [];
 var ref = firebase.database().ref("Chartdata");
  ref.on('value', function (snapshot) {
   snapshot.forEach(function (childSnapshot) {
     var childKey = childSnapshot.key;
     x2 = childSnapshot.val();
     jsonx = JSON.stringify(x2);
     x.push(jsonx);

    });
 });

  am4core.ready(function () {
  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  // Create chart instance
     var chart = am4core.create("Fourdiv", am4charts.XYChart);
       for (i = 0; i < x.length; i++) {
         chart.x.push({ "x": x[i].x, "y": x[i].y });
       }
  // Add data
    chart.data = x;
  // Create axes

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

    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 = "y";
    series.dataFields.categoryX = "x";
//series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;

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

  });// end am4core.ready()
}

score 0 · Answer 1 · answered Apr 23 '20 at 02:26

am4core.ready is the same as window.addEventListener("load", ...). You don't need it if you're already using your own onload handler.

You also set up the event listener incorrectly - you need to pass in the function reference (without the parentheses):

window.addEventListener("load", genFunction);

Also note that you should assign your data to a temporary variable outside of the chart instance, instead of using chart.x (which you don't even use later on):

var data = [];
for (i = 0; i < x.length; i++) {
  data.push({ "x": x[i].x, "y": x[i].y });
}
chart.data = data;

Load array of data in am4charts.XYChart

1 Answers1