Multiple Doughnut Charts inside Table - CanvasJS JavaScript Charts

Multiple Doughnut Charts inside Table - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<table id="chartTable" border="1px sold blue">
  <tr>
    <td>25</td>
    <td>40</td>
    <td>50</td>
    <td>60</td>
  </tr>
  <tr>
    <td>25</td>
    <td>40</td>
    <td>50</td>
    <td>60</td>
  </tr>
</table>

JavaScript

var table = document.getElementById("chartTable")
for(var i = 0; i < table.rows.length; i++){	
  for(var j = 0; j < table.rows[i].cells.length; j++){
    options = { data: [{ type: "doughnut", dataPoints: [{y: parseFloat(table.rows[i].cells[j].innerHTML)}]}]}

    table.rows[i].cells[j].innerHTML = "<div id='chartContainer"+ i  + j + "'  style='height:100px; width:100px'></div>";
    var chart = new CanvasJS.Chart("chartContainer" + i + j, options);
    chart.render();
  }
}