Atualizar gráfico após consulta server

15 de dezembro de 2018 12 respostas

guilhermebhte 15 de dezembro de 2018

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 ?

12 Respostas

guilhermebhte 18 de dez. de 2018

Alguém ?

John-Jones 18 de dez. de 2018

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 ?

guilhermebhte 18 de dez. de 2018

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

John-Jones 18 de dez. de 2018

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.

guilhermebhte 18 de dez. de 2018

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

John-Jones 18 de dez. de 2018

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

guilhermebhte 18 de dez. de 2018

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 {}
}

Romero_Russel 26 de dez. de 2018

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

guilhermebhte 28 de dez. de 2018

Não entendi

Romero_Russel 28 de dez. de 2018

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.

guilhermebhte 3 de jan. de 2019

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

guilhermebhte 30 de jan. de 2019

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 ?

Criado 15 de dezembro de 2018

Ultima resposta 30 de jan. de 2019

Respostas 12

Participantes 3

12 Respostas

Topicos relacionados