CODEWITHSUNDEEP
angularrestgetchartist.js
demo.b
demo.b

Reputation: 3439

Unable to populate Chartist with data from http get (Angular 4)

I'm trying to load chartist data via api call, though the data is returned but does not load in chartist series.

// Initialize data series
seriesData: any[] = [];

// Function to retrieve data from api
getSeriesData() {
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
      data => this.seriesData = data, // This is populated
      err => console.log(err)
    );
  }

//ngInit
ngOnInit() {
   this.getSeriesData();

// Chartist
const dataDailySalesChart: any = {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [
        this.seriesData // THIS IS ALWAYS EMPTY
      ]
    };
}

Upvotes: 0

Views: 430

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222592

you are trying to build the chart data before the promise is resolved.Since getSeriesData is asynchronous, you should do somehting like this,

getSeriesData() {
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
      data => this.seriesData = data, // This is populated
      this.generateChart(this.seriesData),
      err => console.log(err)
    );
  }

ngOnInit() {
   this.getSeriesData();    
}

generateChart(chartData:any){
      const dataDailySalesChart: any = {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [
       chartData
      ]
    };
};

Upvotes: 1

Related Questions