Doughnut Chart from table data and customization - CanvasJS | JavaScript Charts

Doughnut Chart from table data and customization - CanvasJS | JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<table id="table1">
  <tr><th>Unit</th> <th>Never Met</th> <th>Sometimes Exceeded</th> <th>Exceeded</th> <th>Always exceeded</th> <th>Over Expection</th> <th>Cost</th> <th>Employee#</th></tr>
   <tr><td>Quality Assurance</td>  <td>20</td>  <td>158</td> <td>63</td> <td>15</td> <td>10</td> <td>2977938.00</td> <td>271</td> </tr>
</table>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

table {
  width: 100%;
}
table, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #a5a5a5;
    padding: 2px 5px;
    text-align: center;
    color: white;
}
th {        
    border: 1px solid black;
    background-color: #ffffcc;
    color: black;
    padding: 2px 5px;
}

JavaScript

CanvasJS.addColorSet("customColor", ["#ff0000", "#ffc000", "#4bacc6", "#0070c0", "#77933c"])
var chart = new CanvasJS.Chart("chartContainer",{   
  theme: "light2",
  colorSet: "customColor",
  title: {
    text: "",    
    verticalAlign: "center"
  },
  subtitles: [{
    text: "",
    verticalAlign: "center",
    fontWeight: "bold"
  },{
    text: "Quality Assurance",
    verticalAlign: "bottom",
    fontSize: 24
  }],
  legend: {
    horizontalAlign: "left",
    verticalAlign: "center"
  },
  data: [{
    type: "doughnut",    
    showInLegend: true,
    indexLabel: "#percent%",
    startAngle: -90,
    legendMarkerType: "square",
    dataPoints: []
  }]
});

var marks = [];
var rows = $('#table1 tbody >tr');
var columns;
var header;
for (var i = 1; i < rows.length; i++) {
  marks = [];
  header = $(rows[0]).find('th');
  columns = $(rows[i]).find('td');
  for (var j = 1; j < columns.length-2; j++) {
    marks.push({y:parseInt($(columns[j]).html()), legendText: $(header[j]).html()});
  }
  chart.options.data[0].dataPoints = marks;
  chart.options.title.text = CanvasJS.formatNumber($(columns[6]).html(), "#,###");
  chart.options.subtitles[0].text = $(columns[7]).html();
  chart.render();

  chart.subtitles[0].set("fontSize", chart.title.get("fontSize"));
  chart.title.set("padding",{ bottom: chart.title.get("fontSize") * 2, left: chart.legend.bounds.x2 - chart.legend.bounds.x1});
  chart.subtitles[0].set("padding", { top: chart.title.get("fontSize"), left: chart.legend.bounds.x2 - chart.legend.bounds.x1});
}