I want to use HighCharts to create boxplots. As I can see in the docs I need to already provide Highcharts with the required five-point-summary, i.e., min, max, q1, q3, median values for creating the boxplot.

Given an arbitrary-length array constisting of numbers, how can I calculate these five numbers efficiently? Is there a quick means in JS to do so?

I want to use HighCharts to create boxplots. As I can see in the docs I need to already provide Highcharts with the required five-point-summary, i.e., min, max, q1, q3, median values for creating the boxplot.

Given an arbitrary-length array constisting of numbers, how can I calculate these five numbers efficiently? Is there a quick means in JS to do so?

• javascript
• highcharts
• boxplot

• 3 You need to calculate the first, second, and third quartiles of your data (Q1, Q2 [median], Q3). There are a number of ways to go about it - I do it server side in PHP for my data, but javascript should be able to handle it just as well. en.wikipedia/wiki/Quartile | thiruvikramangovindarajan.blogspot./2014/10/… – jlbriggs Commented Jun 17, 2015 at 14:23
• thanks. i preprocess the data in python. there (with numpy) it's even easier to crate the quartiles. so i will do it this way. i am sure, i will have some other questions regarding the boxplots later, but will post them in a separate question of course. thanks for your input. – beta Commented Jun 17, 2015 at 14:24
• Yes, Python is probably the easiest language to do this in. I would guess there's a built in method to return the full boxplot data array in one pass, though I am no python expert by any means – jlbriggs Commented Jun 17, 2015 at 14:31

1 Answer 1

Although you have a solution for doing it server side, I took a few minutes to convert my PHP solution to a Javascript solution, to address the initial question.

step 1) function to calculate percentiles:

//get any percentile from an array
function getPercentile(data, percentile) {
    data.sort(numSort);
    var index = (percentile/100) * data.length;
    var result;
    if (Math.floor(index) == index) {
         result = (data[(index-1)] + data[index])/2;
    }
    else {
        result = data[Math.floor(index)];
    }
    return result;
}
//because .sort() doesn't sort numbers correctly
function numSort(a,b) { 
    return a - b; 
} 

step 2) wrapper to grab min, max, and each of the required percentiles

//wrap the percentile calls in one method
function getBoxValues(data) {
    var boxValues = {};
    boxValues.low    = Math.min.apply(Math,data);
    boxValues.q1     = getPercentile(data, 25);
    boxValues.median = getPercentile(data, 50);
    boxValues.q3     = getPercentile(data, 75);
    boxValues.high   = Math.max.apply(Math,data);
    return boxValues;
}

step 3) build a chart with it

example:

• http://jsfiddle/jlbriggs/pvq03hr8/

[[edit]]

A quick update that contemplates outliers:

• http://jsfiddle/jlbriggs/db11fots/