Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<br/><br/>
<div id="myTabDiv" align="center">
<table id="ReportTable">
  <thead>
  <tr><td rowspan="2">Name</td><td colspan="3">Subjects</td></tr>
  <tr> <td>Subject1</td> <td>Subject2</td> <td>Subject3</td> </tr>
  </thead>
  <tbody>
   <tr>  <td>John</td>  <td>65</td>  <td>75</td>  <td>80</td>  </tr>
   <tr>  <td>Mary</td>  <td>95</td>  <td>85</td>  <td>90</td>  </tr>
   <tr>  <td>Clay</td>  <td>40</td>  <td>95</td>  <td>99</td>  </tr>
   <tr> <td>Peter</td>  <td>75</td>  <td>75</td>  <td>72</td>  </tr>
  </tbody>
</table>
</div>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th,td {
    text-align: center;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{    
	title: {
  	text: "Line Chart from Table Data"
  },
	toolTip:{
  	shared: true
 },
  data: []
});

var marks = [];
var rows = $('#ReportTable tbody >tr');
var columns;
var header;

for (var i = 0; i < rows.length; i++) {
  
  marks = [];
  header = $(rows[0]).find('td');
  columns = $(rows[i]).find('td');
  
  for (var j = 1; j < columns.length; j++) {
  
    marks.push({
    					label:$(header[j]).html(),
             	y:parseInt($(columns[j]).html())
              });
  
  }
  
  chart.options.data.push({
    											type: "line",
    											name: ($(columns[0]).html()), 
    											showInLegend: true,
    											legendText: ($(columns[0]).html()),
    											dataPoints: marks
  												});
                          
  chart.render();
  
}