Charts are not shown on the page about amcharts3-angular2 HOT 12 OPEN

import { Component, ViewEncapsulation, Output, EventEmitter, ViewChild } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material';

@Component({
  selector: 'navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class NavigationComponent {

  constructor() {}

  @Output() navigating: EventEmitter<any> = new EventEmitter();

  ChangedTab(event: MatTabChangeEvent){

    if (event.tab.textLabel==='Tab 1'){

      console.log(event.tab);
      this.navigating.emit(event.tab);
    }
    if (event.tab.textLabel==='Tab 2'){

      console.log(event.tab);
      this.navigating.emit(event.tab);
    }
  }
}

<mat-tab-group (selectedTabChange)="ChangedTab($event)">
          <mat-tab label="Tab 1">
            <componentone [emitchange]="navigating"></componentone>
          </mat-tab>
          <mat-tab label="Tab 2">
            <componenttwo [emitchange]="navigating"></componenttwo>
          </mat-tab>
</mat-tab-group>

import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import { ChartComponent } from './chart.component';

@Component({
  selector: 'componentone',
  templateUrl: './componentone.component.html',
  styleUrls: ['./componentone.component.css']
})
export class componentone implements  OnInit {

  constructor() {
  }

  @Input() emitchange: Observable<any>;

  public chartData: any[] = [];
  
  public customColors: any = [
    {
    "title": "title 1",
    "color": "#9a9b9d"
  }, {
    "title": "title 2",
    "color": "#e9700e"
  }, {
    "title": "title 3",
    "color": "#4472b2"
  }];
  
  public chartColumns: any = 
  [
  {
      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>$[[value]]</b></span>",
      "fillAlphas": 1,
      "title": "title 1",
      "type": "column",
      "fillColors": "#9a9b9d",
      "valueField": "title1",
      "showAllValueLabels": false
  },
  {
      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>$[[value]]</b></span>",
      "fillAlphas":  1,
      "title": "title 2",
      "type": "column",
      "fillColors": "#e9700e",
      "valueField": "title2",
      "showAllValueLabels": false
  }, 
  {

      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>$[[value]]</b></span>",
      "fillAlphas":  1,
      "title": "title 3",
      "type": "column",
      "fillColors": "#4472b2",
      "valueField": "title3",
      "showAllValueLabels": false
  }
];

  @ViewChild(ChartComponent) private _chart;

  ngOnInit(){

    this.emitchange.subscribe((val) => {
      
      console.log("emitting new results in chart " + val.textLabel);

      if (val.textLabel==="Tab 1"){
        this.populateData();
        this._chart.refreshChart(this.chartData, this.chartColumns, this.customColors);
      }
      
    });
  }

  private populateData() {
    this.chartData = [{whateveryouwant}];
  }
}

import { Component, OnDestroy } from '@angular/core';
import { AmChartsService, AmChart } from '@amcharts/amcharts3-angular';

@Component({
  selector: 'chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css'],
  providers: [AmChartsService]
})
export class ChartComponent implements OnDestroy {
  
  private chart: AmChart;

  constructor(private AmCharts: AmChartsService) {  }

  private graphsData: Array<any> = new Array<any>();
  private customColors?: Array<any> = new Array<any>();

  makeOptions(dataProvider: any) {
    
    return {
      'type': 'serial',
      'theme': 'light',
      "legend": {
        "position": "top",
        "markerSize": 10,
        "data": this.customColors ? this.customColors : []
      },
      'dataProvider': dataProvider,
      "valueAxes": [{
        "stackType": "regular",
        "axisAlpha": 0.3,
        "gridAlpha": 0,
        "unit": "$",
        "unitPosition": "left"
      }],
      "graphs": this.graphsData ? this.graphsData : [],
      "gridAboveGraphs": true,
      'chartCursor': {
        'categoryBalloonEnabled': false,
        'cursorAlpha': 0,
        'valueLineEnabled': true,
        'valueLineBalloonEnabled': true,
        'valueLineAlpha': 0.5,
        'fullWidth': true
      },
      "categoryField": 'title',
      "categoryAxis": {
        "axisAlpha": 0,
        "gridAlpha": 0
    },
    "export": {
      "enabled": true,
      "fileName": "customfilename"
     }
    };
  }

  refreshChart(data: any, columns: any, colors: any) {

    console.log("inside refresh chart");
    this.graphsData = columns;
    this.customColors = colors;
    
    if (this.chart){

      this.AmCharts.updateChart(this.chart,()=>{
        if (this.chart.dataProvider){
          this.chart.dataProvider = data;
          this.chart.graphsData = columns;
          this.chart.legend.data = colors;
        }
        else
        {
          this.chart = this.AmCharts.makeChart('chartdiv', this.makeOptions(data),10);
        }
      });
    }
    else{
      console.log("recreating chart");
      this.chart = this.AmCharts.makeChart('chartdiv', this.makeOptions(data),10);
    }
  }

  ngOnDestroy() {

    if (this.chart) 
      this.AmCharts.destroyChart(this.chart);
    
  }
}

<div id="chartdiv" 
    [style.width.%]="100" 
    [style.height.px]="500"></div>

import { AmChart } from '@amcharts/amcharts3-angular';
import { AmChartsModule } from '@amcharts/amcharts3-angular/amcharts.directive';

ngAfterViewInit() {
setTimeout(()=>{    
AmCharts.makeChart('chartdiv', {
}
 },1000);
}

import { AmChart } from '@amcharts/amcharts3-angular';
import { AmChartsModule } from '@amcharts/amcharts3-angular/amcharts.directive';

ngAfterViewInit() {
setTimeout(()=>{    
AmCharts.makeChart('chartdiv', {
}
 },1000);
}

  private _plannedOFChartEL: ElementRef;
  @ViewChild('YEAH')
  set plannedOFChartEL(el: ElementRef){
      this._plannedOFChartEL = el;
      if (el) {
        // GRAPH CREATION THERE !
      }
  }
  get plannedOFChartEL(): ElementRef{
    return this._plannedOFChartEL;
  }