Loop through array for chart.js input

Question

How do I loop through chartObject javascript array data for my chart.js chart? I have this working when I reference the individual elements i.e. chartObject[0][0] but I can't get this working using a loop.

    <script>

    const requestURL =
  url;
const request = new XMLHttpRequest();
request.open("GET", requestURL);
request.send();

request.onreadystatechange = function() {
  if (request.readyState === 4) {
    doWithResponse(request.response);
  }
};

function doWithResponse(chart) {
  var chartObject = JSON.parse(chart)
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: "horizontalBar",
    data: {
      labels: [
        chartObject[0][0],
        chartObject[0][1],
        chartObject[0][2],
        chartObject[0][3],
        chartObject[0][4],
        chartObject[0][5],
        chartObject[0][6],
        chartObject[0][7],
        chartObject[0][8],
        chartObject[0][9]
      ],
      datasets: [
        {
          label: "Frequency",
          data: [
            chartObject[1][0],
            chartObject[1][1],
            chartObject[1][2],
            chartObject[1][3],
            chartObject[1][4],
            chartObject[1][5],
            chartObject[1][6],
            chartObject[1][7],
            chartObject[1][8],
            chartObject[1][9]
          ],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)"
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)"
          ],
          borderWidth: 2
        }
      ]
    },
    options: {
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
    },
    title: {
            display: true,
            text: 'Test Count'
    }
  });
}
    </script>

Code Maniac · Accepted Answer · 2019-08-25 09:33:26Z

1

You don't need any loop here you just need to get value from particular index of createObject ,But since the chartObject is object so you need to make a copy while passing data to have immutability so you can use ... or slice or map to have a copy

You can simply use ... spread syntax,

data : {
  labels : [...chartObject[0]],
  datasets: [{
    label: 'frequency',
    data: [...chartObject[1]],
    ...
  }]
}

If you're sure the value being passed to Chart will not mutate the original state, you can directly pass them as

data : {
  labels : chartObject[0],
  datasets: [{
    label: 'frequency',
    data: chartObject[1],
    ...
  }]
}

edited Aug 25, 2019 at 9:33

answered Aug 25, 2019 at 9:26

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

5 Comments

nipy Over a year ago

Thanks. I also want to iterate through the sublists but have struggled to do this. I created another question at stackoverflow.com/q/57645062/4981251 as you had answered my question here.

Code Maniac Over a year ago

@ade1e you need to show how your sublists looks like, and also i am not getting what do you mean by multiple charts, you want multiple instances of chart ?

nipy Over a year ago

Hi. Please see the JSON file in the code in new question which has the sublists. Yes you are right multiple instances of the charts. Thanks

nipy Over a year ago

secstat.info.s3.eu-west-2.amazonaws.com/… is the list with sublist

Code Maniac Over a year ago

@ade1e okay quick response after looking at, json, what you can do is make group of two sub items at a time, than repeat what you're doing in the your code for each goup of two subitems we made

Abdelillah Aissani · Accepted Answer · 2019-08-25 09:30:50Z

1

You can use Array.prototype.map :

labels: chartObject[0].map((x, i) => chartObject[0][i]), 
datasets: [{
    label: "Frequency",
    data: chartObject[1].map((x, i) => chartObject[1][i])
}]

answered Aug 25, 2019 at 9:30

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

2 Comments

nipy Over a year ago

Thanks. Is it possible to help with this related question? stackoverflow.com/q/57645062/4981251

Abdelillah Aissani Over a year ago

@ade1e Alright i answered... that took me some time but hope it helps :)

Collectives™ on Stack Overflow

Loop through array for chart.js input

2 Answers 2

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Linked

Related