CODEWITHSUNDEEP
javascriptchart.js
nipy
nipy

Reputation: 5488

Loop through array for chart.js input

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>

Upvotes: 0

Views: 634

Answers (2)

Code Maniac
Code Maniac

Reputation: 37755

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],
    ...
  }]
}

Upvotes: 1

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

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

Upvotes: 1

Related Questions