PALS3004: Web Programming Demo 9-3

<html>
<head>
<title>PALS3004: Web Programming Demo 9-3</title>
<script src="include/highcharts-custom.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);
    }
  }
}
// calculate box statistics
function boxcalc(x) {
  // find quartiles
  var quant=[ss.quantile(x,0.25),ss.quantile(x,0.50),ss.quantile(x,0.75)];
  var iqr=quant[2]-quant[0];
  // divide into central and outliers
  var outly=[];
  var y=[];
  for (var i=0;i<x.length;i++) {
    if (x[i] > quant[2]+1.5*iqr)
      outly.push(x[i]);
    else if (x[i] < quant[0]-1.5*iqr)
      outly.push(x[i]);
    else
      y.push(x[i]);
  }
  // return all values in structure
  return({ "stat5":[ ss.min(y), quant[0], quant[1], quant[2], ss.max(y)], "outliers":outly });    
}
// plot the graph
function drawgraph() {
  // generate two random normal distributions
  var x1=[];
  for (var i=0;i<200;i++) x1.push(rnorm(9,3));
  var x2=[];
  for (var i=0;i<200;i++) x2.push(rnorm(11,3));
  // calculate box statistics
  var x1data=boxcalc(x1);
  var x2data=boxcalc(x2);
  // put outliers into correct format for plotting
  var outly=[];
  for (var i=0;i<x1data.outliers.length;i++) outly.push([ 0, x1data.outliers[i] ]);
  for (var i=0;i<x2data.outliers.length;i++) outly.push([ 1, x2data.outliers[i] ]);
  // plot the graph
  var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'plotarea',
            type: 'boxplot',
            backgroundColor: '#FFFFEE'
        },
        title: {
            text: 'Boxplot Example'
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: ['One', 'Two'],
            title: {
                text: 'Condition'
            }
        },
        yAxis: {
            title: {
                text: 'Measurements'
            }
        },
        series: [
          {
            name: 'Observations',
            data: [ x1data.stat5, x2data.stat5 ],
            color: 'black'
          },
          {
            name: 'Outlier',
            type: 'scatter',
            data: outly,
            marker: {
                fillColor: 'white',
                lineWidth: 1,
                lineColor: 'black'
            }
          }
        ]
    });
}
</script>
<style>
#plotmargin {
  width: 500px;
  height: 400px;
  padding: 10px;
  background-color: #EEEECC;
}
#plotarea {
  width: 500px;
  height: 400px;
  background-color: #FFFFDD;
}
</style>
</head>
<body onload="drawgraph()">

  <h2>Demo 9-3: Demonstrate Boxplot</h2>

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