DataPoint Based On HTML Table User Input - CanvasJS JavaScript Charts

DataPoint Based On HTML Table User Input - 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>
<table id="customTable">
  <tr><th>Y Values</th></tr>
  <tr><td><input type="number" value = "10"></td></tr>
  <tr><td><input type="number" value = "20"></td></tr>
  <tr><td><input type="number" value = "30"></td></tr>
  <tr><td><input type="number" value = "40"></td></tr>
</table>

CSS

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

th {
    border: 1px solid #008CBA;
    background-color: #008CBA;
    color: #ffffff;
    padding: 5px;
}
input {
  border: none;
  width: 100%;
  text-align: center;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Edit Value In Table"
  },  
  data: [
    {
      type: "line",
      dataPoints: [
        {y: 10},
        {y: 20},
        {y: 30},
        {y: 40}
      ]
    }
  ]
});

chart.render();

var index;
document.getElementById('customTable').addEventListener("change", function (e) {  
  index = e.target.parentNode.parentNode.rowIndex;
  
  if (!chart.options.data[0].dataPoints[index - 1])
    chart.options.data[0].dataPoints[index - 1] = {};
    
  chart.options.data[0].dataPoints[index - 1].y = Number(e.target.value);
  chart.render();
});