PALS3004: Web Programming Demo 9-2

<html>
<head>
<title>PALS3004: Web Programming Demo 9-2</title>
<script src="include/flotr2.min.js"></script>
<script src="include/simple-statistics.js"></script>
<script>
// generate normally distributed random values
function rnorm(mu,sigma) {
  while (true) {
    // box-muller transform
    var x=2*Math.random()-1;
    var y=2*Math.random()-1;
    var r=(x*x+y*y);
    if ((0 < r)&&(r < 1)) {
      return mu+sigma*x*Math.sqrt(-2.0*Math.log(r)/r);
    }
  }
}
// get p value from normal distribution
function pnorm(x,mean,sdev) {
  return(Math.exp(-(x-mean)*(x-mean)/(2*sdev*sdev))/(2*Math.PI));
}
// plot the graph
function drawgraph() {
  // generate a random normal distribution
  var x=[];
  for (var i=0;i<200;i++) x.push(rnorm(10,3));
  var xmean=ss.mean(x);
  var xsdev=ss.sampleStandardDeviation(x);
  // accumulate into bins
  var hist=new Array(20);
  for (var i=0;i<hist.length;i++) hist[i]=0;
  for (var i=0;i<x.length;i++) {
    var bin=Math.round(x[i]);
    if ((0<=bin)&&(bin<hist.length)) hist[bin]++;
  }
  // put data into correct format for plotting
  var d1=[];
  for (var i=0;i<hist.length;i++) d1.push([ i, hist[i] ]);
  var d2=[];
  for (var i=0;i<20;i+=0.1) d2.push([ i, pnorm(i,xmean,xsdev)*x.length ]);
  // plot the graph
  Flotr.draw(document.getElementById("plotarea"),
    [
      { data : d1, bars: {
        show: true,
        barWidth: 1.0,
        shadowSize: 0,
        fillOpacity: 1,
        lineWidth: 0
        }
      },
      { data: d2 }
    ],
    {
      title : "Histogram",
      subtitle : "mean="+xmean.toFixed(3)+" sdev="+xsdev.toFixed(3),
      shadowSize : 0,
      xaxis : {
        title : "x value",
        tickDecimals: 0
      },
      yaxis : {
        title : "count",
        tickDecimals: 0,
        titleAngle : 90
      },
      HtmlText : false,
      grid: {
        horizontalLines: false,
        verticalLines: false
      }
    }
  );
}
</script>
<style>
#plotmargin {
  width: 500px;
  height: 400px;
  padding: 10px;
  background-color: #EEEEDD;
}
#plotarea {
  width: 500px;
  height: 400px;
  background-color: #FFFFEE;
}
</style>
</head>
<body onload="drawgraph()">

  <h2>Demo 9-2: Demonstrate Histogram</h2>

  <p><div id="plotmargin"><div id="plotarea"></div></div>
  
</body>
</html>