Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

310
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!