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

320
Visualizações
Passing parameters to linechart angular typescript

I want to pass a parameter to chart line based to json iput s data1 instead of var labeltabmles = ['Redddd', 'Blue', 'Yellow', 'Green']; var datalabel = [1240, 190, 30, 545];

I did the algorithme below in order to get the values of count on variable listcount and get the values of type on variable listtype to configure parameter labels and data of line chart configuration from json file inputs using the code below :

listcount  = []; 
listtype =  [];

......

 ngOnInit(): void {
  var data1 = [{
            "type": "MATH",
            "count": 55
        }, {
            "type": "ENGLISH",
            "count": 22
        },
        {
            "type": "SCINETIST",
            "count": 18
        }];
        for (var key in data1) {
            var typeelement = data1[key]["type"];
            var countelemtn = data1[key]["count"];
            this.listtype.push(typeelement);
            this.listcount.push(countelemtn);
            console.log(this.listcount);
            console.log(this.listtype);
        }
    console.log(this.listcount);
    console.log(this.listtype);

        var labeltabmles = ['Redddd', 'Blue', 'Yellow', 'Green'];
        var datalabel = [1240, 190, 30, 545];

        const myChart1 = new Chart("myChartline", {
            type: 'line',
            data: {
                labels: labeltabmles,
                datasets: [{
                    label: '# of Votes',
                    data: datalabel,
                    backgroundColor: "#007ee7",
                    borderColor: "#007ee7",
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

i want to configure the var labeltabmles = ['Redddd', 'Blue', 'Yellow', 'Green']; var datalabel = [1240, 190, 30, 545]; using the variables listcount , listtype where the result of this two array are following the code enter image description here

i need your help to pass listcount and listtype as paramter to datalabel and data of the chart i tried but the apped didnt happen the this.listype and this.listcount still empty;

var labeltabmles = this.listcount   ;
var datalabel = this.listype;

Thanks for your support and help

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

i find the solution by : -using the TYPELIST: any = []; COUNTLIST: any = [];

-and update the variable used on push function on the for iteration

for (var key in data1) {
                var typeelement = this.contentype[key]["type"];
                var countelemtn = this.contentype[key]["count"];
                this.TYPELIST.push(typeelement);
                this.COUNTLIST.push(countelemtn);
}
    const myChart1 = new Chart("myChartline", {
                type: 'line',
                data: {
                    labels: this.TYPELIST,
                    datasets: [{
                        label: '# of Votes',
                        data: this.COUNTLIST,
                        backgroundColor: "#007ee7",
                        borderColor: "#007ee7",
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
about 4 years ago · Juan Pablo Isaza Relatório
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