Agfdhyk

I develop function for dashboard in my application, i use ChartModule, if the data static, the chart word, but i want use data dynamic in the chart, theproblem is how to fill the chart by dynamic data and thank's
file .html:

<div class="col-md-4">

      <div class="ibox" style="margin-top:20px">

        <div class="ibox-head">

          <div class="ibox-title">

            <div style="font-size:12px"><i class="fa fa-pie-chart fa-fw"></i> My Tickets</div>

          </div>

        </div>            

        <div class="ibox-body" *ngFor="let pie of pies">

          <div style="display: block">

            <canvas baseChart width="511" height="255"

                    [(data)]="this[pie.Nombre]" 

                    [(labels)]="this[pie.Name]"

                    [chartType]="doughnutChartType"

                    (chartHover)="chartHovered($event)"

                    (chartClick)="chartClicked($event)"></canvas>

          </div>

        </div>

      </div> 

    </div>

file.ts:

public doughnutchartlabels: string = ;

  public doughnutchartdata: number = ;

  public doughnutcharttype: string = 'doughnut';

  constructor(private http: HttpClient, private _dashbordService: DashbordService, private _userService: UserService) { }

  async ngOnInit() {



    let id = localStorage.getItem('userId');

    console.log(id);

    this.pies = await this._dashbordService.getViews(id)

  }

model.ts:

export class PieChartData {

  Name: string;

  Nombre: number;

}

file.service.ts:

async getViews(UID) {

    let result = await this.http.get(this.pathAPI + 'Statistique?typeByUserId=' + UID)

      .toPromise()

      .then(function (res) {

        return result = res;

      })

      .catch((err) => {

        return (err)

      })

    return result;

  }

Issue is that chart gets rendered before data arrives in async case, delay rendering till data arrives should work as below:

.ts

pies:PieChartData;//undefined to start with

.html

<div class="col-md-4">

  <div class="ibox" style="margin-top:20px">

    <div class="ibox-head">

      <div class="ibox-title">

        <div style="font-size:12px">

          <i class="fa fa-pie-chart fa-fw"></i> My Tickets

        </div>

      </div>

    </div>

    <ng-container *ngIf="pies">

      <div class="ibox-body" *ngFor="let pie of pies">

        <div style="display: block">

          <canvas

            baseChart

            width="511"

            height="255"

            [(data)]="this[pie.Nombre]"

            [(labels)]="this[pie.Name]"

            [chartType]="doughnutChartType"

            (chartHover)="chartHovered($event)"

            (chartClick)="chartClicked($event)"

          ></canvas>

        </div>

      </div>

    </ng-container>

  </div>

</div>

Once data arrives for pies after api call chart should show up with data.