Page becomes unresponsive when data added to amChart4 through socket

问题

I'm displaying 3 charts (Gauge chart, Pie chart, XYChart) -using amChart4 and I'm fetching data from backend (sqlite3). Here I'm using some real time data i.e., for every minute data is added in database and I'm fetching that data and displaying it in chart. In order to fetch regularly I'm using socket. After some time page becomes unresponsive(chrome alert msg). It crashes. Below is my code for the client-side (Front end).

product.service.ts

init() {
    this.getConfig();
    this._todayWithSec = moment( this._currentDate ).format( 'YYYY-MM-DD HH:mm:ss' );
    this._todayWithoutSec = moment( this._currentDate ).format( 'YYYY-MM-DD' );
    let socket = io.connect( DatabaseUtility.extractIpFromAddressBar );
    socket.on( 'socketUpdate', ( data ) => {
        this.getCurrentData(); /*Function to fetch and calculate data to graph*/
        this.getCurrentYieldData();/*Function to fetch and calculate data to graph*/
    } );
}

displayCharts( currentYieldChart, productYieldChart, yieldGaugeChart, legend ) {
    this.pieChart( productYieldChart );
    this.gaugeChart( yieldGaugeChart, legend );
    this.liveYieldChart( currentYieldChart );
}

liveYieldChart( currentYieldChart ) {
    if ( this._liveYieldChartData ) {
        this._liveYieldChartData.dispose();
    }

    this._liveYieldChartData = am4core.create( currentYieldChart.nativeElement, am4charts.XYChart );

   // this._liveYieldChartData.data.dataSource = this._chart;
  //  this._liveYieldChartData.data.dataSource.parser = new am4core.JSONParser();

    this._liveYieldChartData.data = this._chart;
    this._liveYieldChartData.cursor = new am4charts.XYCursor();
    this._liveYieldChartData.legend = new am4charts.Legend();
    this._liveYieldChartData.legend.labels.template.text = "Current Yield";

    // Create axes
    let dateAxis = this._liveYieldChartData.xAxes.push( new am4charts.DateAxis() as any );
    dateAxis.dataFields.category = "Date";
    /*dateaxis property code here*/

    this._liveYieldValueAxis = this._liveYieldChartData.yAxes.push( new am4charts.ValueAxis() as any );
    /* Value axis property code here*/

    // Create series
    this._series = this._liveYieldChartData.series.push( new am4charts.LineSeries() as any );
    /* series property code here */

    let hoverState = bullet.states.create( "hover" );
    hoverState.properties.scale = 1.7;

    /* Create a cursor */
    this._liveYieldChartData.cursor = new am4charts.XYCursor();
    this._liveYieldChartData.responsive.enabled = true;
}

gaugeChart( yieldGaugeChart, legend ) {
    if ( this._gaugeChartData ) {
        this._gaugeChartData.dispose();
    }
    this._gaugeChartData = am4core.create( yieldGaugeChart.nativeElement, am4charts.GaugeChart );
    this._gaugeChartData.innerRadius = am4core.percent( 82 );

    let axis = this._gaugeChartData.xAxes.push( new am4charts.ValueAxis() as any );
    /*value property code here*/

    /* Axis for ranges code here*/       

    /* Create legend */
    this._gaugeChartData.legend = new am4charts.Legend();

    /* Create a separate container to put legend in */

    if ( this._legendContainer ) {
        this._legendContainer.dispose();
    }

    this._legendContainer = am4core.create( legend.nativeElement, am4core.Container );
    /*container property code here*/
}

setGaugeChartProperty() {
    /*Some property code here*/
}

pieChart( productYieldChart ) {
    if ( this._pieChartData ) {
        this._pieChartData.dispose();
    }

    this._pieChartData = am4core.create( productYieldChart.nativeElement, am4charts.PieChart );
    this._pieChartData.hiddenState.properties.opacity = 0; // this creates initial fade-in
    this._pieChartData.legend = new am4charts.Legend();

    // Add and configure Series
    let pieSeries = this._pieChartData.series.push( new am4charts.PieSeries() );
    /*series property code here*/
}

Some value to be defined for the chart

getConfig() {
    this._databaseService.getConfig()
        .then( ( data : ConfigValue ) => {
            this._configValues = data;
            this.getCurrentData();
            this.getCurrentYieldData();
        } )
        .catch( err => {
            this._messageService.showErrorMessage( err.error.msg );
        } );
}

Below is the function to get value to gaugue chart and pie chart from the database

getCurrentData() {
    if ( this._configValues.yieldType ) {
        this._databaseService.getCurrentData( this._todayWithSec )
            .then( ( data : any ) => {
                if ( !data ) {
                    return;
                }
                if ( data.configMeag.length > 0 ) {
                    if ( data.tempBoolean ) {
                        this._gaugeChart = 0;
                        this.setGaugeChartProperty();
                        this._pieChart = [];
                        this._pieChartData.data = 0;
                        return;
                    }
                    this._pieChart = data.configMeag;
                      this._pieChartData.data = this._pieChart;
                    if ( data.yieldType > 100 ) {
                        this._gaugeChart = NaN;
                    } else {
                        this._gaugeChart = data.yieldType;
                    }
                    this.setGaugeChartProperty();
                    this._millingLoss = data.millingLoss;
                }
            } )
            .catch( err => {
                this._messageService.showErrorMessage( err.error.msg );
            } );
    }
}

Below function to get data to XYChart from database

getCurrentYieldData() {
    if ( this._configValues.yieldType ) {
        this._databaseService.getCurrentYieldData( this._todayWithoutSec )
            .then( ( data : any ) => {
                if ( data.length > 0 ) {
                    this._chart = data;
                    this._liveYieldChartData.data = this._chart;
                }
            } )
            .catch( err => {
                this._messageService.showErrorMessage( err.error.msg );
            } );
    }
}

These two function are called in socket because every minute data is added into database and it is calculated in back-end and in these two function I'm calling the data which is in json format.

this.getCurrentData();
this.getCurrentYieldData();

First I though it may be a problem of amChart4 so I implemented disposed functionality to the chart.
I tried by adding dataSource property of amchart4 which is commented in code which I couldn't resolved the issue.

product.component.ts

ngOnInit() {
    this._productService.init();
}

ngAfterViewInit() {
    this._zone.runOutsideAngular( () => {
        this._productService.displayCharts( this.currentYieldChart, this.productYieldChart, this.yieldGaugeChart, this.legend );
    } );
}

I want to use socket because I want to update the graph dynamically like how amChart4

My guesses.