title: Finding number of ID elements and add to array
body: <p>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.</p>
  
  <p>Originally the array would always contain 8.</p>
  
  <p>Now I need it to count as however many items that are on the page (could even be more than 8, or less)</p>
  
  <p>The following works perfectly for exactly 8 items, and only needs scalability.</p>
  
  <pre><code>&lt;canvas id="ent1Graph"&gt;&lt;/canvas&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"&gt; 
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>const graphData = Array.from(
    { length: 8 },
    (_, i) =&gt; Number(document.getElementById('E1_INV_Funds' + i).textContent)
  );
  
  const graphLabels = Array.from(
    { length: 8 },
    (_, i) =&gt; 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
       }
  }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Hopefully that makes sense.</p>
  
  <p>Let me know if more info is needed to answer the question.
  Thanks.</p>