i'm trying to inject my Rest API response in ngx-charts-advanced-pie-chart, and it's reading it as null
this is my product.component.html
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>
<span>
Chercher un produit
</span>
<span style="float: right;">
<nb-search type="rotate-layout" tag="rotate-layout"></nb-search>
</span>
</nb-card-header>
<nb-card-body>
<form class="form-inline">
<label>Votre résultat de recherche: </label>
<h3 [(ngModel)]="product">{{ product }}</h3>
</form>
<form class="form-inline">
<label>   Choisissez une année: </label>
<nb-select [(ngModel)]="aam" selected="2020" status="warning" id="annee" name="annee">
<nb-option value="2020">2020</nb-option>
<nb-option value="2019">2019</nb-option>
<nb-option value="2018">2018</nb-option>
<nb-option value="2017">2017</nb-option>
<nb-option value="2016">2016</nb-option>
<nb-option value="2015">2015</nb-option>
<nb-option value="2014">2014</nb-option>
<nb-option value="2013">2013</nb-option>
<nb-option value="2012">2012</nb-option>
<nb-option value="2011">2011</nb-option>
<nb-option value="2010">2010</nb-option>
<nb-option value="2009">2009</nb-option>
<nb-option value="2008">2008</nb-option>
<nb-option value="2007">2007</nb-option>
<nb-option value="2006">2006</nb-option>
<nb-option value="2005">2005</nb-option>
<nb-option value="2004">2004</nb-option>
<nb-option value="2003">2003</nb-option>
<nb-option value="2002">2002</nb-option>
<nb-option value="2001">2001</nb-option>
<nb-option value="2000">2000</nb-option>
</nb-select>
<h3>{{test}}</h3>
</form>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Chiffre d'affaires annuel</nb-card-header>
<nb-card-body>
<ngx-charts-advanced-pie-chart [scheme]="colorScheme" [results]="single">
</ngx-charts-advanced-pie-chart>
</nb-card-body>
</nb-card>
</div>
</div>
<div class="row">
<nb-reveal-card fullWidh>
<nb-card-front fullWidh>
<nb-card accent="success" fullWidh>
<nb-card-header (click)="getListComProductPeriode()">
<span>Traffic</span>
<nb-select [(ngModel)]="chhar" [selected]="type" status="info" style="float: right;">
<nb-option (click)="getListComProductPeriode()" *ngFor="let period of months" [value]="period">
{{ period }}</nb-option>
</nb-select>
</nb-card-header>
<nb-card-body>
<nb-list>
<nb-list-item>
<form class="form-inline">
<div class="col"><span><strong>Produit</strong></span></div>
<div class="col"><span><strong>Montant</strong></span></div>
<div class="col"><span><strong>Adresse</strong></span></div>
<div class="col"><span><strong>Commission</strong></span></div>
</form>
</nb-list-item>
<nb-list-item *ngFor="let com of listComMonth">
<form class="form-inline">
<div class="col"><span>{{ com.product }}</span></div>
<div class="col"><span>{{ com.amount }} DT</span></div>
<div class="col"><span>{{ com.address }}</span></div>
<div class="col"><span>{{ com.gain }} DT</span></div>
</form>
</nb-list-item>
</nb-list>
</nb-card-body>
</nb-card>
</nb-card-front>
<nb-card-back>
<nb-card accent="primary">
<nb-card-header>Back Card Header</nb-card-header>
<nb-card-body>
A nebula is an interstellar cloud of dust, hydrogen,
helium and other ionized gases.
Originally, nebula was a name for
any diffuse astronomical object,
including galaxies beyond the Milky Way.
</nb-card-body>
</nb-card>
</nb-card-back>
</nb-reveal-card>
</div>
also this is my product.component.ts
import { Component, OnInit } from '@angular/core';
import { NbThemeService, NbSearchService } from '@nebular/theme';
import { ContratService } from '../../../services/contrat.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Component({
selector: 'ngx-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
listComMonth: any;
product = '';
types: string[] = ['mois', 'trimestre', 'semestre'];
months: string[] = ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'];
aam= '2020';
chhar= '';
x: any = 894;
y: number = 500;
test: any = 0;
single = [
{
name: 'Semestre 1',
value: this.x,
},
{
name: 'Semestre 2',
value: this.test,
},
];
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService,private searchService: NbSearchService,
private contratService: ContratService,
private route: ActivatedRoute,
private router: Router) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.warningLight, colors.infoLight, colors.successLight, colors.dangerLight],
};
});
this.searchService.onSearchSubmit()
.subscribe((data: any) => {
this.product = data.term;
})
}
ngOnInit() {
this.getListComProductSemestre2();
}
getListComProductPeriode(){
this.contratService.getComListProductPeriode(this.product, this.aam, this.chhar)
.subscribe(
data => {
this.listComMonth = data;
console.log(data);
},
error => {
console.log(error);
}
);
}
getListComProductSemestre2(){
this.contratService.getCAProduct("Lunette", "2020", "Semestre_2")
.subscribe(
data => {
this.test = data;
console.log(data);
},
error => {
console.log(error);
}
);
}
}
this is my service
getComListProductPeriode(product, year, periode){
return this.http.get(`${caUrl}/list_com_productt/${product}/${year}/${periode}`);
}
getCAProduct(product, year, periode){
return this.http.get(`${caUrl}/ca_productt/${product}/${year}/${periode}`);
}
so basically this what i get Result i'm getting you can see the 730 in the testing label but it's not added in the advanced pie chart, it's still reading it as zero, even the method is running in ngOnInit()
i don't know why it is perfectly working in the label but not working in the chart
@Maaroufi Aziz, Chart changes will be reflected when single object reference will change. So to reload chart based on API changes you need to update your method as below,
getListComProductSemestre2(){
this.contratService.getCAProduct("Lunette", "2020", "Semestre_2")
.subscribe(
data => {
this.single.find(s=> s.name==='Semestre 2').value = data;
this.single = [...this.single];
},
error => {
console.log(error);
}
);
}
I have created sample stackblitz here, here I have used setTimeout for generating Async scenario.
Let me know if you have any doubts.