Accessing DataPoints from HTML content - CanvasJS JavaScript Charts

Accessing DataPoints from HTML content - 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>
<br/>
<table border="1px">
  <tr>
    <td>X-Value</td>
    <td id="xvalue">10</td>
  </tr>
  <tr>
  <td>Y-Value</td>
  <td id="yvalue">20</td>
  </tr>
</table>

JavaScript

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

chart.options.data[0].dataPoints[0] = {
		x :Number(document.getElementById("xvalue").innerHTML),
		y : Number(document.getElementById("yvalue").innerHTML)
}
    
chart.render();