title: Create a pie chart using an array from a data table in chart.js
body: <p>I have a table with values, and I want to use the data within the table to dynamically create a pie chart. I am trying to store the table data within an array, and then using that array to add the pie chart labels and data. However, the code below does not work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var table = document.getElementById("myTable");
  var tableArr = [];
  var tableLen = table.rows.length;
  for (var i = 1; i &lt; tableLen; i++) {
    tableArr.push({
      name: table.rows[i].cells[0].innerHTML,
      population: table.rows[i].cells[1].innerHTML,
      area: table.rows[i].cells[2].innerHTML
    });
  }
  
  var canvasP = document.getElementById("pieChart");
  var ctxP = canvasP.getContext('2d');
  var myPieChart = new Chart(ctxP, {
    type: 'pie',
    data: {
      labels: tableArr["name"],
      datasets: [{
        data: tableArr["population"],
        backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
        hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
    },
    options: {
      legend: {
        display: true,
        position: "right"
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.com/libraries/Chart.js"&gt;&lt;/script&gt;
  
  &lt;table id="myTable"&gt;
    &lt;tr&gt;
      &lt;thead&gt;
        &lt;th scope="col"&gt;Village&lt;/th&gt;
        &lt;th scope="col"&gt;Population&lt;/th&gt;
        &lt;th scope="col"&gt;Area&lt;/th&gt;
      &lt;/thead&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;tbody&gt;
        &lt;th scope="row"&gt;San Jose&lt;/th&gt;
        &lt;td&gt;2,332&lt;/td&gt;
        &lt;td&gt;12.46&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;Santa Maria&lt;/th&gt;
      &lt;td&gt;2,551&lt;/td&gt;
      &lt;td&gt;4.65&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;San Francisco&lt;/th&gt;
      &lt;td&gt;544&lt;/td&gt;
      &lt;td&gt;7.77&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  &lt;canvas id="pieChart"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>