Histogram Calculator

by jlbriggs

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:'Generate a Histogram',
        align:'left',
        margin:10,
        x: 50,
       ...

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;
$(function() {
    $('#container').highcharts({
        chart       : { type    : 'column' },
        title       : { },
        subtitle    : { },
        legend      : { enabled : true },
        tooltip     : { },
        plotOptions : {
            series  : {
                pointPadding : 0,
                groupPadding : 0,
                borderWidth  : 0.5,
                borderColor  : 'rgba(255,255,255,1)'
            }
        },
        xAxis      : { title    : { text : 'Range'     } },
        yAxis      : { title    : { text : 'Frequency' }, min:0 }
    });	
    chart = $('#container').highcharts();

    chart.addSeries({
        name: 'Distribution',
        data: binData(randomData(500))
    });
   
})

//-------------------------------------------------------
function binData(data) {

		//the output array
        var hData = new Array();
		
		//determine how many bins we need
		var size = data.length;
		var cells = Math.round(Math.sqrt(size));
		cells > 50 ? cells = 50 : cells = cells;

		//determine the width of a bin
		var max 	= Math.max.apply(null, data);
		var min 	= Math.min.apply(null, data);
		var range 	= max - min;
		var width 	= range / cells;

		//bin the data
		var width_bottom;
		var width_top;
        //loop through the number of cells
		for(var i = 0; i < cells; i++) {

			//set the upper and lower limits of the cell in question
			width_bottom 	= min + (i * width) ;
			width_top 		= width_bottom + width;

			//check for and set the x value of the bin
			if(!hData[i]) {
				hData[i] = new Array();
				hData[i][0] = width_bottom + (width / 2); 
			}
					
			//loop through the data to see if it fits in this bin
			for(var j = 0; j < size; j++) {

				var x = data[j];
				
				//adjust if it's the first pass
				i == 0 && j == 0 ? width_bottom -= 1 : width_bottom = width_bottom;
				
				//if it fits in the bin, add it
				if(x > width_bottom && x <= width_top) {
					!hData[i][1] ? hData[i][1] = 1 : hData[i][1]++; ...