bind first property value of an array of object into chart.js

Question

I have an array of object and this is how I assigned values into it.

  $("#gridview").click(function () {
            $("table tbody th").each(function () {
                var k = $(this).text().trim();
                keys.push(k);
            });
            $("table tbody tr").each(function (i, el) {
                var row = {}
                $.each(keys, function (k, v) {
                    row[v] = $("td:eq(" + k + ")", el).text().trim();
                });
                myData.push(row);
            });
            myData.shift()
            myData.length = 10

            console.log(myData);
        });

This is how my array of object looks like in inspect element - console

how can I get the values of Region and bind it to the labels below:

 new Chart(document.getElementById("chart"), {
            type: 'horizontalBar',
            data: {
                labels: [I want to display all the region here],
                datasets: [{
                    label: "Android",
                    type: "horizontalBar",
                    stack: "Base",
                    backgroundColor: "#eece01",
                    data: ["I want to display ios user here"],
                }, {
                    label: "ios",
                    type: "horizontalBar",
                    stack: "Base",
                    backgroundColor: "#87d84d",
                    data: ["I want to display android user here"]
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        //stacked: true,
                        stacked: true,
                        ticks: {
                            beginAtZero: true,
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                    }]
                },
            }
        });

FYI I have tried myData[Region] but its not working

Guys, I have searched the solutions whole day, seems cant found, please help

palaѕн · Accepted Answer · 2020-03-29 14:54:04Z

1

You can set the labels using .map() method on myData array like:

data: {
   labels: myData.map(d => d.Region),
   ....
},

EDIT:

You can create a new function and add all chart init code into it like:

function CreateChart() {
   new Chart(document.getElementById("chart"), {
      type: 'horizontalBar',
      data: {
         labels: myData.map(d => d.Region),
         ... you code here
      },
      ...
   });
}

CreateChart();

and then on gridview click, again call this CreateChart function in the end like:

$("#gridview").click(function() {
   // all your code logic here
   console.log(myData);
   CreateChart();
});

answered Mar 29, 2020 at 14:54

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Choy Over a year ago

btw can you help me with one more issue? do you have any idea how to remove the space between the Android User ? Please refer back to the image above

palaѕн Over a year ago

Please create a separate question for that so that we can focus on one specific issue at a time. And also that would help other users to help you provide detailed answers for a specific issue.

Collectives™ on Stack Overflow

bind first property value of an array of object into chart.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related