Entrar Ainda não tem acesso?
2
respostas

Popular chart

Referente ao curso Angular parte 1: produtividade e organização com framework SPA, no capítulo Integração com Web API's e atividade Isolando a acesso em serviços

por Marcos Vinicius de Araújo Andrade
| 741.9k xp | 198 posts
Full Stack Engineer

Pessoal, estou fora do escopo, mas preciso de ajuda. Alguém sabe como popular um google pie chart de dados do backend?

Eu consigo exibir com dados estáticos no component, mas não sei como inserir esses dados dinamicamente com o que eu já pego do back.

Vejam meu código:


export class EmployeeComponent implements OnInit { 


    formulario : FormGroup;

    funcionarios: Employee [] = [];

    @Input()
    pieChartData =  {
        chartType: 'PieChart',
        dataTable: [
            ['Nome', 'Participacao'],
            ['Hugo Silva',  20],
            ['Eliza Souza', 20],
            ['Anderson Santos', 40]
        ],
        options: {'title': 'Dados do Pessoal',
                pieHole:0.4,
                chartArea: {
                    left:100,
                    top:50,
                    width: 400,
                    height: 300}

        },
    };

    constructor(private employeeService: EmployeesService,
        private formBuilder : FormBuilder){
            this.employeeService
                .listEmployees()
                .subscribe(employees => {
                    this.funcionarios = employees;

                    this.pieChartData.dataTable

                    for(let i = 0 ; i < employees.length ; i++){
                        this.pieChartData.dataTable.concat([
                            [employees[i].nome + ' ' + employees[i].sobrenome
                                , employees[i].participacao],
                        ]);
                    }

                });

    }

no construtor eu tento popular o pieChartDate.dataTable, mas não encontro o método que faz isso para mim.

2 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Marcos! Como vai?

O que ocorre com o seu código? Ele gera algum erro? Vc já verificou o console do navegador para ver se algo é apresentado lá?

por Marcos Vinicius de Araújo Andrade
| 741.9k xp | 198 posts
Full Stack Engineer

Eu já evolui muito. Mas ainda não consigo fazer o os dados dinâmicos.

insira seu código aqui
populaChart(){
    let resultado = [];
    this.employees.forEach(emp =>{            
        resultado.push(this.append(emp));    
    });

    console.log(resultado);
    console.log(this.testeDeRetorno());
    return this.testeDeRetorno(); 
    //return resultado;   
}

append(emp:Employee){
    return [
        emp.nome + " " + emp.sobrenome , emp.participacao
    ];
}
private testeDeRetorno(): (string | number) [][] {
    return [
        ['Nome', 'Participacao'],
        //resultado
        ['Carlos Moura' , 5],
        ['Fernando Oliveira', 15],
        ['Hugo Silva', 20],
        ['Eliza Souza', 20],
        ['Anderson Santos', 40]
    ];
}

criarNovoFuncionario(){
    const newEmployee = this.form.getRawValue() as Employee;
    console.log(newEmployee);
    this.employeeService
        .newEmployee(newEmployee)
        .subscribe(() => {
            this.router.navigate(['']);
            err => console.log(err);
        });

}

Os dois consoles me dão o mesmo resultado, mas só o testeDeRetorno() é que consegue popular corretamente o gráfico.