Show loading message when retriving the data from the server

[pkvd]

Hi i m using highcharts-angular package: https://github.com/highcharts/highcharts-angular
with angular 6.

Module:

Code: Select all

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

component:

Code: Select all

import { Component } from '@angular/core';

import Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor() {
  }

  Highcharts = Highcharts;
  chartOptions = {
    series: [{
      data: [1, 2, 3, 6, 9]
    }],
    exporting: {
      enabled: true
    },
    yAxis :{
	    allowDecimals: false,
	    title: {
	        text: 'Data'
		}
	}
  };

  updateFromInput = false;


  ngOnInit() {

  }

  update_chart() {
    this.chartOptions.series = [{
        data: [10, 20, 30]
    }];
    this.updateFromInput = true;
  }
}

Template:

Code: Select all

<highcharts-chart id="container" [Highcharts]="Highcharts" [options]="chartOptions" [(update)]="updateFromInput"
      [oneToOne]=true style="width: 100%; height: 400px; display: block;"></highcharts-chart>

Update Chart<button (click)="update_chart()">Update Chart</button>

How can i add the showLoading and hideLoading while updating the chart.

[wojtek]

Hi pkvd,

You can use showLoading and hideLoading methods on chart object. To have chart object instance available inside your component, use the callback function and add it as a property to your component instance:

HTML:

Code: Select all

[callbackFunction]="chartCallback"

TS:

Code: Select all

constructor() {
    const self = this;

    this.chartCallback = chart => {
      self.chart = chart;
    };
}

now you can use them in update_chart method:

Code: Select all

this.chart.showLoading();
this.chart.hideLoading();

Online demo:
https://codesandbox.io/s/543l0p0qq4

Kind regards.

[pkvd]

Hi thanks for your reply. This works but after exporting the chart if i try to update the chart getting the error saying: TypeError: Cannot read property 'loading' of undefined - .Chart.showLoading (highcharts.js:334)

[wojtek]

pkvd,

When the chart is exported then callback function and chart.load event is called one more time on a chart that is prepared for export. It will overwrite the chart object and after export, it will be an empty object, that's why this error occurs. To prevent this behaviour you have to check if the function is called for export and if not then save the reference to chart object like that:

Code: Select all

     chart: {
        events: {
          load: function() {
            if (!this.renderer.forExport) {
              this.chart = this;
            }
          }
        }
      }

Demo:
https://codesandbox.io/s/j4z7qkmkx5

The related issue on Github:
https://github.com/highcharts/highchart ... /issues/26

Kind regards.