Line Chart from HTML Table Column Data - CanvasJS JavaScript Charts

Line Chart from HTML Table Column Data - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<span>Click on any Table-Header to select specific column data and to Render Chart</span>
<table border="1" id="dataTable">
  <tr>
    <th>Datapoints 1</th>
    <th>Datapoints 2</th>
  </tr>
  <tr>
    <td>71</td>
    <td>75</td>
  </tr>
  <tr>
    <td>55</td>
    <td>68</td>
  </tr>
  <tr>
    <td>50</td>
    <td>55</td>
  </tr>
  <tr>
    <td>65</td>
    <td>50</td>
  </tr>
   <tr>
    <td>95</td>
    <td>71</td>
  </tr>
  <tr>
    <td>68</td>
    <td>55</td>
  </tr>
  <tr>
    <td>55</td>
    <td>50</td>
  </tr>
  <tr>
    <td>50</td>
    <td>65</td>
  </tr>
</table>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

th {
  cursor: pointer;
  background-color: grey;  
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Render Chart from HTML Table Data"
  },
  subtitles: [
  	{
    	text: ""
    }
  ],
  data: [
    {
      type: "line",
      dataPoints: []
    }					
  ]
});

$('th').click(function(){
    var colIndex = $(this).parent().children().index($(this));
   	var items=[];
    chart.options.data[0].dataPoints = [];

  	$('#dataTable tbody tr td:nth-child('+(colIndex+1)+')').each( function(){    
    		items.push( $(this).text() );       
  	});
    for(var i = 0; i < items.length; i++){
      	chart.options.data[0].dataPoints.push({y: Number(items[i])})
    } 
    
  	chart.options.subtitles[0].text = "Datapoints " + (colIndex + 1);
  	chart.render();    
});