Box Plot Calculator with outliers

by firegroove

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:500px;height:400px;margin:1.5em 1em;"></div>

<script>
  var d = new Date();
  var pointStart = d.getTime();
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 0,   154, 253, 0.9 )', //bright blue
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [60, 25, 100, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      },
      events: {
        load: function() {
          this.credits.element.onclick = function() {
            window.open(
              'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
            );
          }
        }
      }
    },
    credits: {
      text: 'http://stackoverflow.com/users/1011544/jlbriggs',
      href: 'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
    },
    title: {
      text: 'Box Plot Calculation',
      align: 'left',
      margin: 10,
      x: 50,
      style: {
        fontWeight: 'bold',
        color: 'rgba(0,0,0,.9)'
      }
    },
    subtitle: {
      text: 'From randomly...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
  font-family: Abel, Calibri, Helvetica, sans-serif;
  font-size: 95%;
}

JavaScript

var chart,
  numberOfBoxes = 3,
  numberOfPoints = 255,
  cats = alphaCats(numberOfBoxes),
  outliers = [];

$(function() {
    $('#container').highcharts({
      chart: {
        margin: [75, 25, 90, 100]
      },
      legend: {
        enabled: true
      },
      tooltip: {
        shared: true
      },
      xAxis: {
        title: {
          text: 'Group'
        },
        categories: cats,
        labels: {
          style: {
            fontWeight: 'bold'
          }
        }
      },
      yAxis: {
        title: {
          text: 'Distribution'
        }
      }
    });
    chart = $('#container').highcharts();

    //-----------------------------------------------------
    //build the data and add the series to the chart
    var boxData = [],
      meanData = [];
    for (var i = 0; i < numberOfBoxes; i++) {
      //generate random data, then calculate box plot values
/*    var data = randomData(
        numberOfPoints, //how many points
        false, //restrict to positive?
        (10 * Math.random()) //random multiplication factor
      ); */
			
			
			var data = [
  76314,
  0,
  10277,
  0,
  0,
  10583,
  0,
  0,
  11018,
  0,
  0,
  11516,
  0,
  0,
  10572,
  0,
  0,
  11358,
  0,
  0,
  11910,
  0,
  0,
  9893,
  0,
  6948,
  0,
  0,
  6387,
  0,
  0,
  6223,
  0,
  6349,
  0,
  0,
  5997,
  0,
  6077,
  0,
  0,
  5862,
  0,
  5551,
  0,
  5489,
  0,
  5573,
  0,
  5993,
  0,
  6018,
  5921,
  0,
  6189,
  0,
  6699,
  0,
  7563,
  7763,
  0,
  8103,
  0,
  7963,
  8259,
  0,
  8285,
  0,
  9227,
  10324,
  0,
  8873,
  9012,
  0,
  8756,
  0,
  7987,
  7429,
  0,
  7693,
  7683,
  0,
  7532,
  7867,
  0,
  7955,
  6767,
  0,
  6653,
  6277,
  0,
  6011,
  5905,
  0,
  5928,
  5768,
  0,
  5687,
  5559,
  5863,
  0,
  5858,
  6063,
  0,
  6078,
  6087,
  6102,
  0,
  5715,
  5384,
  0,
  5377,
  5424,
  5469,
  0,
  5610,
  5694,
  5832,
  0,
  5861,
  5893,
  5987,
  0,
  6100,
  5859,
  5820,
  0,
  5769,
  5772,
  6159,
  0,
  6105,
 ...