Multi Series Line Chart with Data from Dynamic Table - CanvasJS JavaScript Charts

Multi Series Line Chart with Data from Dynamic Table - 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="showData" align="center"></div>

CSS

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

JavaScript

var dps = [];

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

//import data to a table
var items = [
  { Name: "John", RollNo: "01", Subject1 : "65", Subject2 : "75", Subject3 : "80" },
  { Name: "Mary", RollNo: "02", Subject1 : "55", Subject2 : "85", Subject3 : "90" },
  { Name: "Clay", RollNo: "03", Subject1 : "40", Subject2 : "90", Subject3 : "99" },
  { Name: "Peter", RollNo: "04", Subject1 : "75", Subject2 : "75", Subject3 : "72" }
]

var col = [];
for (var i = 0; i < items.length; i++) {
  for (var key in items[i]) {
    if (col.indexOf(key) === -1) {
      col.push(key);
    }
  }
}

var table = document.createElement("table");
var tr = table.insertRow(-1); 

for (var i = 0; i < col.length; i++) {
  var th = document.createElement("th");
  th.innerHTML = col[i];
  tr.appendChild(th);
}

for (var i = 0; i < items.length; i++) {
  tr = table.insertRow(-1);

  for (var j = 0; j < col.length; j++) {
    var tabCell = tr.insertCell(-1);
    tabCell.innerHTML = items[i][col[j]];
  }
}

var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
renderDataPoints();


function renderDataPoints(){
  var rows1 = $('#showData tbody >tr');  
  var columns;
  var header;
  for (var i = 1; i < rows1.length; i++) {
    dps =[];
    header = $(rows1[0]).find('th');
    columns = $(rows1[i]).find('td');
    for (var j = 2; j < columns.length; j++) { //based on table data accepted to render chart   
      dps.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: dps
    });
    chart.render();
  }
}