Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

237
Visualizações
how to dynamically populate datasets using chart.js

I am using a bar chart js for the first time that i want to populate from an array data. this is my array

this.feedBackChart=[{name:"test1",id:"1",score:"5"}
{name:"test1",id:"1",score:"7"}
{name:"test2",id:2,score:"4"}]

i would like to populate two datasets dynamically one for test1 and one for test 2. and then add the scores for test1 which will be 12 and test2 will be 4.

this is what i tried but nothing gets shown on the page with no errors as well

async chart() {
        
        var barChartData = {
            datasets: []
        };
        this.feedbackChart = [];
        this.feedback.map(item => {
            let m = this.feedbackResult.find(x => x.id == item.Id);

            this.feedbackChart.push({
                ["name"]: m.metricName,
                ["id"]:item.id,
                ["score"]: item.score // im not sure how to sum up the scores here

            });
        });
        for (var i = 0; i < this.feedbackChart.length; i++) {
            barChartData.datasets.push({
                label: this.feedbackChart.map(x=> x.name),
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data:this.feedbackChart.map(x=> x.score),
            });
        }
        this.data = {
            labels: moment.months(),
            datasets: barChartData
                
            
        };

        this.config = {
            type: 'bar',
            data: this.data,
            options: {}
        };
        this.mychart = new Chart(document.getElementById("myChart") as HTMLCanvasElement, this.config);
    }

if i manually load the data as follows for testing purposes it works.but i cant do it this way cause the length of my array will always change

this.data = {
            labels: moment.months(),
            
            datasets: [{
            label: 'test1',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [12],
            },
            {
            label: 'test2',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [4],
            }
]
            
        };
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda