Creating Chart from HTML Table- CanvasJS JavaScript Charts

Creating Chart from HTML Table- CanvasJS JavaScript Charts

HTML

<script src="http://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>

<table id="myTable">
    <tr>
        <th>X</th>
        <th>Y</th>
    </tr>
    <tr>
        <td>10</td>
        <td>71</td>
    </tr>
    <tr>
        <td>20</td>
        <td>55</td>
    </tr>
    <tr>
        <td>30</td>
        <td>50</td>
    </tr>
    <tr>
        <td>40</td>
        <td>65</td>
    </tr>
    <tr>
        <td>50</td>
        <td>95</td>
    </tr>
    <tr>
        <td>60</td>
        <td>68</td>
    </tr>
    <tr>
        <td>70</td>
        <td>28</td>
    </tr>
    <tr>
        <td>80</td>
        <td>34</td>
    </tr>
    <tr>
        <td>90</td>
        <td>14</td>
    </tr>
</table>

CSS

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

th {
    border: 1px solid #008CBA;
    background-color: #008CBA;
    color: #ffffff;
    padding: 5px;
}

JavaScript

var dataPoints = [];

var myTable = document.getElementById('myTable');

//loops through rows    
for (i = 1; i <  myTable.rows.length; i++){

  //gets cells of current row  
  var cells = myTable.rows.item(i).cells;
  var dataPoint = { x: Number(cells.item(0).innerHTML), y: Number(cells.item(1).innerHTML)};
  dataPoints.push(dataPoint);
}


var chart = new CanvasJS.Chart("chartContainer",
	{
      data: [{
      	dataPoints: dataPoints 
      }]
	});

chart.render();