GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Atualizar gráfico após consulta server


#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 ?