Histogram Calculator

by firegroove

HTML

<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<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:700px;height:600px;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: 'Generate a Histogram',
      align: 'left',
      margin: 10,
      x: 50,
      style: {
        fontWeight: 'bold',
        color:...

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, mad, binnedData, rawData;

rawData = randomData(10000); //generate random normal data points
binnedData = binData(rawData); //bin the data
mad = getMad(rawData); //return the median, and the median absolute deviation

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      margin: [100, 25, 100, 50]
    },
    legend: {
      enabled: true
    },
    tooltip: {},
    plotOptions: {
      series: {
        pointPadding: 0,
        groupPadding: 0,
        borderWidth: 0.5,
        borderColor: 'rgba(255,255,255,0.5)'
      }
    },
    xAxis: [{
      title: {
        text: 'Range'
      }

    }, {
      linkedTo: 0,
      opposite: true,
      gridLineWidth: 0.5,
      gridLineColor: 'rgba(0,0,0,0.25)',
      gridZIndex: 8,
      tickPositions: [
        mad.median - (mad.mad * 3),
        mad.median - (mad.mad * 2),
        mad.median - mad.mad,
        mad.median,
        mad.median + mad.mad,
        mad.median + (mad.mad * 2),
        mad.median + (mad.mad * 3),
      ],
      title: {
        text: 'Median and MAD'
      },
      labels: {
        style: {
          color: 'rgba(0,0,0,1)',
          fomntWeight: 'bold'
        },
        formatter: function() {
          return Highcharts.numberFormat(this.value, 2);
        }
      }
    }],
    yAxis: {
      title: {
        text: 'Frequency'
      },
      min: 0
    }
  });
  chart = $('#container').highcharts();

  //add the data series to the chart
  chart.addSeries({
    name: 'Distribution',
    data: binnedData
  });

  //add MAD plotbands
  /*
  chart.xAxis[0].addPlotBand({
    from: mad.median - (mad.mad * 3),
    to: mad.median + (mad.mad * 3),
    color: 'rgba(255,255,255,0.25)',
    zIndex: 5
  });
  chart.xAxis[0].addPlotBand({
    from: mad.median - (mad.mad * 2),
    to: mad.median + (mad.mad * 2),
    color: 'rgba(255,255,255,0.25)',
    zIndex: 6
  });
  chart.xAxis[0].addPlotBand({
    from: mad.median - mad.mad,
    to: mad.median + mad.mad,
  ...