CODEWITHSUNDEEP
javascriptarrayscounting
Fr1nk
Fr1nk

Reputation: 35

Finding number of ID elements and add to array

I'm creating a chart using chart.js that is grabbing data from ids in the page. When I wrote the Javascript for it I had a specific use case and what I've written is not scalable at all.

Originally the array would always contain 8.

Now I need it to count as however many items that are on the page (could even be more than 8, or less)

The following works perfectly for exactly 8 items, and only needs scalability.

<canvas id="ent1Graph"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"> 


const graphData = Array.from(
  { length: 8 },
  (_, i) => Number(document.getElementById('E1_INV_Funds' + i).textContent)
);

const graphLabels = Array.from(
  { length: 8 },
  (_, i) => String(document.getElementById('E1_INV_Label' + i).textContent)
);


var ctx = document.getElementById('ent1Graph').getContext('2d');
var chart = new Chart(ctx, {

    type: 'doughnut',
    toolTips:{
       bodyFontSize: 30,
      },

    data: {
        indexLabelFontSize: 20,        
        labels: graphLabels,
        datasets: [{
            label: "Dataset",
            backgroundColor: [
                  'rgb(255, 99, 132)',
                  'rgb(89, 192, 123)',
                  'rgb(98, 130, 164)',
                  'rgb(137, 124, 196)',
                  'rgb(255, 213, 0)',
                  'rgb(65, 196, 255)',
                  'rgb(175, 215, 221)',
                  'rgb(255, 177, 109)'
                ],
            borderColor: 'rgb(255, 255, 255)',
            data: graphData,
        }]
    },


options: {
     legend: {
        display: false
     }
}
});
</script>

So I guess what I need to know how to do is find the length and only use that. I assume I need to somehow fill the colors array depending on how many items there are.

It would be great if I could assign a color to a label so I can use a custom legend instead of the default chart.js one.

Hopefully that makes sense.

Let me know if more info is needed to answer the question. Thanks.

Upvotes: 0

Views: 53

Answers (1)

RahulB
RahulB

Reputation: 2110

If hardcoded length is the issue, you can get the length of all the elements using

const numElem = document.querySelectorAll('*[id^="E1_INV_Funds"]').length

Your array can use this for any number of elements-

const graphData = Array.from(
  { length: numElem },
  (_, i) => Number(document.getElementById('E1_INV_Funds' + i).textContent)
);

const graphLabels = Array.from(
  { length: numElem },
  (_, i) => String(document.getElementById('E1_INV_Label' + i).textContent)
);

The background color property also doesn't need to be hardcoded since the number of elements are not known. You can use a function to return an array of rgb strings. Eg :

backgroundColor: function (){
  var rgbArray = [];
  for(vari=0 ;i<numElem; i++) {
    rgbArray.push('rgb(255,255,255)');//Need to have some logic to assign rgb
  }
  return rgbArray;
}

Upvotes: 1

Related Questions