JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 600px; width: 10000px;"></div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true,
      title:{
        text: "Calculation of Pi Using the Monte Carlo Method :)" 
      },
      animationEnabled: true,
      axisX:{
      	title:"Number of repetitions",
        labelAngle: 30
      },
      
      axisY :{
      	title:"Calculated value of Pi",
        minimum:3.1,
        maximum:3.2
      },
      
      data: data  // random generator below
      
    });

    chart.render();
  }
  

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var radius = 10000;
var totalInsideCircle = 0;
var totalInsideSquare = 0;


function getPI (iterations){
	var x,y,d;
  for(var index = 0; index < iterations; index++){
  	xVal = getRandomInt(-1*radius, radius);
    yVal = getRandomInt(-1*radius, radius);
    d = Math.sqrt((xVal)*(xVal) + (yVal)*(yVal));
    //console.log(d)
    if(d<=radius){
    	totalInsideCircle++
    }
    totalInsideSquare++;
  }
  return 4 * totalInsideCircle / totalInsideSquare;
}


   var limit = 100000;    //increase number of dataPoints by increasing this
   
   var y = 0;
   var data = []; var dataSeries = { type: "line" };
   var dataSeries2 = { type: "line" };
   var dataPoints = [];
   var dataPoints2 = [];
   for (var i = 0; i < limit; i += 1) {
    y = getPI(10);
    dataPoints.push({
      x: i*10,
      y: y                
    });
    dataPoints2.push({
      x: i*10,
      y: Math.PI                
    });
  }
  dataSeries.dataPoints = dataPoints;
  dataSeries2.dataPoints = dataPoints2;
  data.push(dataSeries);  
  data.push(dataSeries2);