Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

316
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda