Spline Chart with Datapoints based on Equation - CanvasJS JavaScript Charts

Spline Chart with Datapoints based on Equation - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width:100%;">

JavaScript

var dps = []; // dataPoints
var xVal;
var yVal = 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 
  }]
});
addDataPoints(); 
chart.render();

function addDataPoints() {
    for (var j = 0; j < dataLength; j++) { 
    	xVal = j;
      yVal = Math.pow(xVal,2) +  1;
      dps.push({
        x: xVal,
        y: yVal
      });      
    }
	}