Страница перестает отвечать, когда данные добавляются в amChart4 через сокет

Question

Я отображаю 3 графика (диаграмма мер, диаграмма P ie, XYChart), используя amChart4, и извлекаю данные из бэкэнда (sqlite3). Здесь я использую некоторые данные в реальном времени, т. Е. Каждую минуту данные добавляются в базу данных, и я извлекаю эти данные и отображаю их на графике. Для регулярной загрузки я использую сокет . Через некоторое время страница перестает отвечать на запросы (chrome msg). Это падает. Ниже приведен мой код для клиентской части (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*/
}

Некоторое значение, которое будет определено для диаграммы

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

Ниже приведена функция для получения значения для калибровочной диаграммы и p ie диаграммы из базы данных

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 );
            } );
    }
}

Ниже функция для получения данных в XYChart из базы данных

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 );
            } );
    }
}

Эти две функции Вызываются в сокете, потому что каждая минута данных добавляется в базу данных, и она рассчитывается во внутреннем интерфейсе, и в этих двух функциях я вызываю данные в формате json.

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

1. Сначала я подумал, что это может быть проблема amChart4, поэтому я добавил в диаграмму функциональность disposed.
2. Я попытался добавить свойство dataSource amchart4, которое комментируется в коде, который я не смог не удалось решить проблему.

product.component.ts

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

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

Я хочу использовать сокет, потому что хочу динамически обновлять график, например amChart4

Мои догадки.

1. Я получаю данные из базы данных и добавляю неверна ли диаграмма?
2. Функциональность сокета неверна?