Creating Chart from HTML Table- CanvasJS JavaScript Charts

Creating Chart from HTML Table- CanvasJS JavaScript Charts

by anindita5151

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>0.00%</td>
        <td>71</td>
    </tr>
    <tr>
        <td>1.00%</td>
        <td>55</td>
    </tr>
    <tr>
        <td>2.00%</td>
        <td>50</td>
    </tr>
    <tr>
        <td>5.00%</td>
        <td>65</td>
    </tr>
    <tr>
        <td>10.00%</td>
        <td>95</td>
    </tr>
    <tr>
        <td>20.00%</td>
        <td>68</td>
    </tr>
    <tr>
        <td>>20%</td>
        <td>28</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 st = [];

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).replace("%","")), y: Number(cells.item(1).innerHTML)};
  dataPoints.push(dataPoint);
  st.push(Number((cells.item(0).innerHTML).replace("%","")));
}



var chart = new CanvasJS.Chart("chartContainer",
	{
      axisX: {
    labelAngle: -90,
    stripLines: [{
      value: st[0],showOnTop: true,      
    }, {
      value:st[1], showOnTop: true,      
    }]
  },
  data: [{
      	dataPoints: dataPoints 
      }]
	});

chart.render();