Highcharts Demo

author(s): Torstein Hønsi

by Shridhar Baddur

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

var data = [[16.2, 5.6],[16.2, 5.6],[16.2, 5.6],[16.2, 5.6], [6.2, 15.6],[2,5.6],[2,5.6],[2,5.6],[2,5.6],[2,5.6],[3.3,2.4],[3.3,2.4],[3.3,2.4],[3.3,2.4],[10.2,4.5],[10.2,4.5],[10.2,4.5],[10.2,4.5],[12.2,4.5]];

/**
 * Get histogram data out of xy data
 * @param   {Array} data  Array of tuples [x, y]
 * @param   {Number} step Resolution for the histogram
 * @returns {Array}       Histogram data
 */
function histogram(data, step) {
    var histo = {},
        x,
        i,
        arr = [];

    // Group down
    for (i = 0; i < data.length; i++) {
        x = Math.floor(data[i][0] / step) * step;
        if (!histo[x]) {
            histo[x] = 0;
        }
        histo[x]++;
    }

    // Make the histo group into an array
    for (x in histo) {
        if (histo.hasOwnProperty((x))) {
            arr.push([parseFloat(x), histo[x]]);
        }
    }

    // Finally, sort the array
    arr.sort(function (a, b) {
        return a[0] - b[0];
    });

    return arr;
}

Highcharts.chart('container', {
    chart: {
        type: 'column',
        width:600
    },
    title: {
        text: 'Highcharts Histogram'
    },
    xAxis: {
    min:0,
    max:20,
    tickInterval:2,
        gridLineWidth: 1
    },
    yAxis: [{
       min:0,
    max:5,
    tickInterval:1,
        title: {
            text: 'Histogram Count'
        }
    }, {
       // opposite: true,
        title: {
            text: 'Y value'
        }
    }],
    series: [{
        name: 'Histogram',
        type: 'column',
        data: histogram(data, 3),
        pointPadding: 0,
        groupPadding: 0,
        pointPlacement: 'between'
    }]
});