Render chart for Sin function - CanvasJS JavaScript Charts

Render chart for Sin function - 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>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Render Chart for Sin Function"
  },
  axisX:{
    title: "Angle (in Degree) →",
    interval: 90    
  },
  axisY: {
    title: "sin(x) →"
  },
  data: [
    {
      type: "rangeArea",
      dataPoints: []
    }					
  ]
});

generateDps(chart);
chart.render();

function generateDps(chart){
  var endAngle = 720;
  for(var i = 0; i < endAngle; i++) {
    var y = Math.sin(i * Math.PI / 180);
    chart.options.data[0].dataPoints.push({ x: i, y: [0,y] });
  }
}