Histogram

Histogram with optional spline overlay.

by godhong

HTML

<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/jquery.jqplot.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.barRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<div id="calculate">
    <div class="block">
        <label>How many buckets:</label>
        <input type="text" id="buckets" value="5"></div>
<button type="submit" id="calc">Calculate Historgram</button>
<div id="chart1"></div>

JavaScript

var s2 = [7.0, 7.0, 1.0, 1.0, 1.0, 2.0, 7.0, 7.0, 1.0, 8.0, 1.0, 2.0, 7.0, 7.0, 6.0, 1.0, 1.0, 2.0, 7.0, 7.0, 1.0, 8.0, 1.0, 2.0]

$('#calc').click(function () {
    var title = $("#title").val();
    var color = $("#color").val();

    $("#chart1").width(300);
    $("#chart1").height(300);

    var buckets = parseInt($("#buckets").val());
    //var data = $("#mydata").val().replace(/\s+/g, '').split(",").map(Number);
    var data = s2
    data.sort(function (a, b) {
        return a - b
    });

    //what if they are decimals?
    var last = data.slice(-1)[0];
    //toFixed() returns a string so using MAth function
    //var step = parseFloat(last/buckets);
    var rstep = Math.round((last / buckets) * 100) / 100;
    var ranges = [];
    var values = [];
    var next = 0;

    for (i = 0; i < buckets; i++) {
        if (i < buckets - 1) {
            var first = next;
            var next = Math.round((next + rstep) * 100) / 100;
            var bin = first + "-" + next;
        } else {
            var mylast = Math.round(last * 100) / 100;
            var bin = next + "-" + mylast;
            var next = mylast;
        }

        var count = 0;

        while (data[0] <= next) {
            count++;
            data.shift();
        };

        values.push(count);


        ranges.push(bin);
    }
    alert(values)
    createit(title, color, values, ranges);
    return false;
});

function createit(mytitle, mycolor, s1, ticks) {

    $('#chart1').empty();

    plot1 = $.jqplot('chart1', [s1], {
        title: mytitle,
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                fontSize: '14px'
            }
        },
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barWidth: null,
                barPadding: 0,
                barMargin: 5
            }
        },
        axes: {
            xaxis: {
               ...