Atualizar gráfico após consulta server

[guilhermecostalopes]

Método que faz a consulta no servidor e está funcionando normal, isto é buscando as informações corretas:

 private montarGrafico(){
    let pesquisa = new PesquisaResultadoModel;
    pesquisa.ano = this.ano;
    this.pesquisaService.pesquisar(pesquisa).subscribe(
      (data :any) => {
        data.lista.forEach(lista => {
          this.pieChartLabels.push(lista.mes);
          this.pieChartData.push();
        });
      }, err => {
        this.openSnackBar('Erro ao montar gráfico !', false);
      }
    );
  }

html

<div fxFlex *ngIf="mostrar">
    <mat-card *ngIf="pieChartLabels">
      <mat-card-header>
        <mat-card-title>Gráfico para o ano</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <canvas baseChart width="500" height="200" [data]="pieChartData" 
          [labels]="pieChartLabels" [chartType]="pieChartType" 
          (chartClick)="chartClicked($event)">
        </canvas>
      </mat-card-content>
    </mat-card>
  </div>

Mostra normalmente, mas não atualiza o gráfico.

Pesquisei e não achei. Como faço para atualizar o gráfico após a consulta no server ?

[geovanerocha]

Dependendo do que você está usando para montar o gráfico, geralmente vc precisa dar um destroy e remonta-lo com os dados atualizados.

[guilhermecostalopes]

Na verdade eu quero construir o gráfico após gerar a consulta no server.

neste ponto do meu código

(data :any) => {
data.lista.forEach(lista => {
this.pieChartLabels.push(lista.mes);
this.pieChartData.push();
});

Entendeu ?

[guilhermecostalopes]

@geovanerocha

Dependendo do que você está usando para montar o gráfico, geralmente vc precisa dar um destroy e remonta-lo com os dados atualizados.

O que precisa ser feito ?

[guilhermecostalopes]

As informações vem correto no banco de dados. Creio que estou passando para um ARRAY ou lista no Typescript, mas monta o gráfico errado.

labels corretos, que vem do banco de dados

dados corretos, que vem do banco de dados

monta o gráfico errado

Código que monta o gráfico
As informações vem correto no banco de dados. Creio que estou passando para um ARRAY ou lista no Typescript, mas monta o gráfico errado.

Código que monta o gráfico

this.vWGraficoMovimentoEstoqueService.pesquisar(consultaGrafico).subscribe(
              (grafico: any) => {
                this.spinner.show();
                const list: number[] = [];
                const informacao: string[] = [];
                grafico.lista.forEach((element: any) => {
                  informacao.push(element.mes.codigo + '/' + element.ano);
                  list.push(element.valorTotal);
                });
                const canvas = <HTMLCanvasElement> document.getElementById('myChart');
                const ctx = canvas.getContext('2d');
                const myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [informacao],
                        datasets: [{
                            label: 'Valores conforme pesquisa',
                            data: [1, 2, 3, 4],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
                this.spinner.hide();
              }, (err: any) => {
                this.mensagemTela('Mensagem de erro', '', 'Erro no servidor !', false);
                this.spinner.hide();
              }
            );

O que pode ser ?