Atualizar gráfico após consulta server

Front-end JavaScript
#1

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 ?

#2

Alguém ?

#3

Bom dia, você pode postar toda a classe .ts que você está usando ? E o que chama o a function de atualizar o gráfico ?

#4

Então, acho que é isto que está faltando, algo para atualizar, após o retorno da consulta no servidor.

#5

Então mas basicamente o que você tem que atualizar é a sua lista de dados, o caminho é quase o mesmo de criar.

Uma maneira é dar o reload na pagina para ele trazer os dados mais atuais, ou então arrumar uma forma de chamar um evento que atualize essas variáveis.

#6

Não está fazendo neste método montarGrafico(), que coloquei aqui ?

#7

Você declarou as variáveis como private ? se sim, tira e deixa publica.

#8

O código typeScript está assim:

import { element } from 'protractor';
import { Component, OnInit } from '@angular/core';

import { MatSnackBar, MatTableDataSource } from '@angular/material';

import { PesquisaResultadoModel } from './../../model/pesquisa.model';

import { PesquisaService } from './../../servico/pesquisa/pesquisa.service';

@Component({
  selector: 'app-pesquisa',
  templateUrl: './pesquisa.component.html',
  styleUrls: ['./pesquisa.component.scss']
})
export class PesquisaComponent implements OnInit {

  public ano : number;
  public mes : string;
  public meses : any[];
  public mostrar : boolean;

  public displayedColumns = ['mes', 'valor'];

  public dataSource : MatTableDataSource<PesquisaResultadoModel>;

  // Gráfico
  public pieChartLabels: string[] = [];
  public pieChartData: number[] = [];
  public pieChartType: string;

  constructor(
    private snackBar: MatSnackBar,
    private pesquisaService : PesquisaService
  ) {}

  ngOnInit() {
    this.mostrar = false;
    this.buscarMeses();
    this.pieChartType = 'pie';
  }

  public pesquisar(){
    this.mostrar = false;
    let pesquisa = new PesquisaResultadoModel;
    pesquisa.ano = this.ano;
    pesquisa.mes = this.mes;
    this.pesquisaService.pesquisar(pesquisa).subscribe(
      (data :any) => {
        if(data.lista != null){
          this.mostrar = true;
          this.dataSource = data.lista;
          this.montarGrafico();
        }
        this.openSnackBar(data.tipoMensagem.mensagem, this.mostrar);
      }, err => {
        this.openSnackBar('Erro no servidor !', false);
      }
    );
  }

  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);
      }
    );
  }

  public buscarMeses(){
    this.pesquisaService.carregarMeses().subscribe(
      (data :any) => {
        this.meses = data.lista;
      }, err => {
        this.openSnackBar('Erro no servidor !', false);
      }
    );
  }

  public limpar(){
    this.ano = null;
    this.mes = null;
    this.dataSource = null;
    this.mostrar = false;
  }

  private openSnackBar(message: string, isOnline : boolean) {
    this.snackBar.open(message, null, {
      duration: 3000, 
      panelClass: isOnline ? ["online", "onlineAction"] : "offline" 
    });
  }

  public chartClicked(e: any): void {}
}
#9

Mano angular é two way data bind, cria a variável global fora da função, e atualiza ela dentro da função que é sucesso.

#10

Não entendi

#11

Cria uma variável fora do escopo da função, e usa ela dentro da função com o this.variável, Sempre que ela sofrer alguma alteração vai refletir diretamente na view.

#12

Não é this.pieChartLabels no meu código ?

#13

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

labelsCorretos
labelsCorretos.png779×667 42.8 KB

dados corretos, que vem do banco de dados

dadosCorretos
dadosCorretos.png1114×477 37.1 KB

monta o gráfico errado

graficoErrado
graficoErrado.png1557×739 8.12 KB

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 ?