Spline Chart with Datapoints based on User input Equation - CanvasJS JavaScript Charts

Spline Chart with Datapoints based on User input Equation - 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>
  Enter Equation :  y = <input id="equation" type="text" value="Math.pow(x,2) * 2"><br/>
  No of Data Points : <input id="noOfDPs" type="number" value= "100"><br/>
  <button id="submitEquation">Render Chart</button>
</div>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps = []; // dataPoints
var x;
var y = 100;
var dataLength = 100; // number of dataPoints visible at any point

var chart = new CanvasJS.Chart("chartContainer",{
  zoomEnabled: true,
  title:{
  	text: "Spline Chart with Data Points based on Equation"
  },
  data: [{
    type: "spline",    
    dataPoints: dps
  }]
});

//Function for add data-point
document.getElementById("submitEquation").onclick = function() {
		dps = [];
		var equation = document.getElementById("equation").value;
    var noOfDPs = document.getElementById("noOfDPs").value;
    
    for (var j = 0; j < Number(noOfDPs) ; j++) { 
    	x = j;
      y  = eval(equation);      
      dps.push({
        x: x,
        y: y
      });      
    } 
    chart.options.data[0].dataPoints = dps;    
    chart.render();    
}