title: How to load external data in Amcharts4
body: <p>I'm trying out amCharts 4 at the moment and wanted to load my json in to the graph. Because my json is nested ive added a on parseended event to change my json structure. When i console log the new data it has the correct structure. But when i want to load it into the categories, it doesn't show anything. Currently I only want the categories to show up with no extra values yet. </p>
  
  <p><strong>My component.ts</strong></p>
  
  <pre><code>import { Component, NgZone } from '@angular/core';
  import * as am4core from "@amcharts/amcharts4/core";
  import * as am4charts from "@amcharts/amcharts4/charts";
  import am4themes_animated from "@amcharts/amcharts4/themes/animated";
  
  am4core.useTheme(am4themes_animated);
  
  @Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.css']
  })
  
  export class ChartComponent {
    constructor(private zone: NgZone) { }
  
    ngAfterViewInit() {
      this.zone.runOutsideAngular(() =&gt; {
        let chart = am4core.create("chartdiv", am4charts.XYChart)
  
        chart.paddingRight = 30;
        chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
  
        var colorSet = new am4core.ColorSet();
        colorSet.saturation = 0.4;
        chart.dataSource.url = "https://localhost:44321/api/upload/readFile";
        chart.dataSource.events.on("parseended", function (ev) {
          // parsed data is assigned to data source's `data` property
          var data = ev.target.data;
          var newData = [];
          data.forEach(function (dataItem) {
            var newDataItem = {};
            Object.keys(dataItem).forEach(function (key) {
              if (typeof dataItem[key] === "object") {
                newDataItem["_id"] = dataItem[key]["@id"];
              } else {
                newDataItem[key] = dataItem[key];
              }
            });
            newData.push(newDataItem);         
          });
          console.log(JSON.stringify(newData));
          return newData
        });
  
        var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "_id";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.inversed = true;
  
  
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
        dateAxis.renderer.minGridDistance = 70;
        dateAxis.baseInterval = { count: 30, timeUnit: "minute" };
        dateAxis.max = new Date(2018, 0, 1, 24, 0, 0, 0).getTime();
        dateAxis.strictMinMax = true;
        dateAxis.renderer.tooltipLocation = 0;
  
        var series1 = chart.series.push(new am4charts.ColumnSeries());
        series1.columns.template.width = am4core.percent(80);
        series1.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
  
        series1.dataFields.openDateX = "fromDate";
        series1.dataFields.dateX = "toDate";
        series1.dataFields.categoryY = "name";
        series1.columns.template.propertyFields.fill = "color"; // get color from data
        series1.columns.template.propertyFields.stroke = "color";
        series1.columns.template.strokeOpacity = 1;
  
        chart.scrollbarX = new am4core.Scrollbar();
  
        chart.dataSource.events.on("error", function (ev) {
          console.log("Oopsy! Something went wrong");
        });
      })
    }
  }
  </code></pre>