Atualizar gráfico após consulta server

Fala aí Guilherme, tudo bem? Como você está fazendo para chamar a função responsável por atualizar o gráfico?

Me passe mais detalhes sobre o cenário por favor.

Fico no aguardo.

Olá.

Fala aí Guilherme, tudo bem? Como você está fazendo para chamar a função responsável por atualizar o gráfico?

R: Pois é, acho que este é o problema. Eu fiz a consulta, que retorna os dados corretos e não sei como atualizar o componente.

Meu código TS

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

Fala aí Guilherme, bom, vamos lá.

Em nenhum momento vi você criando, populando e mandando desenhar o gráfico.

No caso da chart.js você vai precisar adicionar um canvas para receber o gráfico:

<canvas id="myChart" width="400" height="400"></canvas>

Depois, você precisa criar um objeto referente ao tipo de gráfico que deseja e passar algumas informações para ele, por exemplo:

const ctx = document.getElementById("myChart").getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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
                }
            }]
        }
    }
});

Com esse código já seria possível exibir o gráfico.

Você basicamente vai precisar fazer algo parecido no Angular (a ideia e implementação são as mesmas).

Espero ter ajudado.

Sim Matheus, sobre isso Em nenhum momento vi você criando, populando e mandando desenhar o gráfico., não tem mesmo. É o que preciso.

Mas se analisar o canvas já tem, não seria esse ?

<canvas baseChart width="500" height="200" [data]="pieChartData" 
          [labels]="pieChartLabels" [chartType]="pieChartType" 
          (chartClick)="chartClicked($event)">

Entendo que teria que construir as informações e atualizar o componente.

Mas acredito que deve ser conforme você informou. const ctx = document.getElementById("myChart").getContext('2d'); const myChart = new Chart(

Vou ver o que ajusto aqui.

grato.

Fala aí Guilherme, exatamente, a população e desenho do gráfico é feita ao instanciar a classe e passar como parâmetro o canvas que ele deve ser desenhado.

Esse código que te mandei está no ngOnInit (com dados diferentes) do meu componente (só preciso desenhar ao carregá-lo).

Essa biblioteca é a Chart.js

Espero ter ajudado.

Fala Matheus. Hoje consegui resolver. Mas ao entrar na página https://www.chartjs.org/, vi que existem outros. Mas como fazer eles em Angular ?

Não vi exemplos.

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

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 ?

Fala ai Guilherme, tudo bem? Me passa o exemplo final que precisa montar, eu monto um aqui e te mando para servir como base.

Fico no aguardo.

Eu consegui implementar com fusioCharts.

Boa Guilherme, parabéns.

Não deixe de marcar o tópico como solucionado, assim pode servir de ajuda para outros alunos.

Abraços e bons estudos.