Line Chart from Table Data - CanvasJS JavaScript Charts

Line Chart from Table Data - CanvasJS JavaScript Charts

by canvasjs

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>
<div id="myTabDiv" align="center">
<table name="mytab" id="mytab1">
  <tr><th>Name</th> <th>Roll No</th> <th>subject1</th> <th>subject2</th> <th>subject3</th> </tr>
   <tr><td>John</td>  <td>01</td>  <td>65</td> <td>75</td> <td>80</td> </tr>
   <tr><td>Mary</td>  <td>02</td>  <td>95</td> <td>85</td>  <td>90</td></tr>
   <tr><td>Clay</td>  <td>03</td>  <td>40</td> <td>95</td> <td>99</td> </tr>
   <tr><td>Peter</td>  <td>04</td>  <td>75</td> <td>75</td>  <td>72</td></tr>
</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 = $('#mytab1 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 = 2; 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();
}