maram ahmedi
maram ahmedi

Reputation: 11

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

Upvotes: 0

Views: 83

Answers (1)

maram ahmedi
maram ahmedi

Reputation: 11

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
                        }
                    }
                }
            });

Upvotes: 0

Related Questions