ngx-charts-advanced-pie-chart is reading my rest api response as null

Question

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: &nbsp;</label>
                    <h3 [(ngModel)]="product">{{ product }}</h3>
                </form>
                <form class="form-inline">
                    <label> &ensp; Choisissez une année: &nbsp;</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

Answer 1

In Javascript primitive types are saved by value, not by reference. So when you set initial value of single array at the top of the class, you get the following array of objects:

[
    {
      name: 'Semestre 1',
      value: 894,
    },
    {
      name: 'Semestre 2',
      value: 0,
    }
];

If you want to update value property, you have to find proper object in array and set it's property with new value.

const obj = single.filter(item => item.name === 'Semestre 2'); // it would be better to use id
obj.value = newValue;

Answer 2

@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.