Show Nav

Boxplots and Whisker Diagrams

Overview

A boxplot is used to display patterns of quantitative data by splitting data sets into quartiles. The box portion of a boxplot chart consists of the first (Q1), second (Q2, or the median, M), and third (Q3) quartiles. Whiskers extend from either side of the box to the smallest and largest non-outlier data points.

Data Format

Boxplot Values

Create a "series" object array. The object within should have two additional arrays, a "data-box" array, and a "data-outlier" array.

The "data-box" array holds arrays, each of length 5, to indicate the calculated minimum, first quartile, median, third quartile, and maximum values of a data set.

The "data-outlier" array also holds arrays, with each having a length 2, to indicate the experiment number and outlier values for an individual outlying point.

{
  "type":"boxplot",
  "series":[ // Array of objects
    {
      "data-box" : [ // Array of length 5 number arrays
        [ (Min), (Q1), (Median), (Q3), (Max) ]
      ],
      "data-outlier" : [ // Array of length 2 number arrays
        [ (Experiment No.), (Outlier Value) ]
      ]
    }
  ]
}

Types

Boxplot charts support two "type" values, "boxplot" for vertical boxplots, and "hboxplot" for horizontal boxplots.

boxplot

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
    "type": "boxplot",
    /* Objects omitted for brevity */
    "series": [
        {
            "data-box": [
                [760, 801, 848, 895, 965 ],
                [733, 853, 939, 980, 1080 ],
                /* Arrays omitted for brevity */
            ],
            "data-outlier": [
                [0, 644 ],
                [1, 718 ],
                /* Arrays omitted for brevity */
            ]
        }
    ]
}

hboxplot

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
    "type": "hboxplot",
    /* Objects omitted for brevity */
    "series": [
        {
            "dataBox": [
                [760, 801, 848, 895, 965 ],
                [733, 853, 939, 980, 1080 ],
                /* Arrays omitted for brevity */
            ],
            "dataOutlier": [
                [0, 644 ],
                [1, 718 ],
                /* Arrays omitted for brevity */
            ]
        }
    ]
}

Calculating Boxplot Values

Consider the following data set of 18 values:

24 30 35 38 45 45 46 48 49 51 52 53 56 57 59 60 62 70

Find the Median Value

Since there is an even number of values in this data set, the median is the mean of the two values in the middle.

M = 49 + 51 / 2 = 50

If there is an odd number of values, the median is simply the value in the middle of the data set.

Find Q1 and Q3

There are a few different methods for calculating Q1 and Q3, but for this example, we will make Q1 be the median value of the first half of the data set, excluding the median of the entire set, and Q3 will be the median value of the second half of the data set, again excluding the median value of the entire set.

The first half of the data set, up to the median:

24 30 35 38 45 45 46 48 49

Q1 = 45

The second half of the data set, from the median:

51 52 53 56 57 59 60 62 70

Q3 = 57

Find the Interquartile Range

The Interquartile Range (IQR) is equal to the difference between the upper and lower quartiles, so IQR = Q3 - Q1.

IQR = 57 - 45 = 12

Find the Lower and Upper Fences

The lower and upper fences are used to determine which values are considered outliers. The lower and upper fences can be calculated with the following formulas:

Lower fence = Q1 - 1.5(IQR)
Upper fence = Q3 + 1.5(IQR)

Now, using our data:

Lower fence = 45 - 1.5(12) = 27
Upper fence = 57 + 1.5(12) = 75
Use the Lower and Upper Fences to Determine Min, Max and Outlier Values

The minimum and maximum values of our data set will be used to plot the whiskers of our boxplot. Since the lower fence was calculated to be 27, we want to find the smallest value in our data set that is still greater than the lower fence.

Looking at the data set again:

24 30 35 38 45 45 46 48 49 51 52 53 56 57 59 60 62 70

We can see that the minimum value greater than 27 is 30, with 24 being an outlier value.

The upper fence was calculated to be 75, so find the maximum value that is not greater than the upper fence. There are no values greater than 75, so 70 is our maximum with no outliers on this end of the spectrum.

Summary

To sum up our findings, this is the collected data that we will use in our boxplot:

Min: 30
Q1: 45
Q2 (M): 50
Q3: 57
Max: 70

Outlier(s): 24

Data Configuration

In ZingChart, boxplot data is set using this format:

"series":[
    {
        "data-box" : [ [ Min, Q1, Q2 (M), Q3, Max ] ],
        "data-outlier" : [ [ (Experiment #), (Outlier Value) ] ]
    }
]

Knowing this, we can insert our data from the above example:

"series":[
    {
        "data-box" : [ [ 30, 45, 50, 57, 70 ] ],
        "data-outlier" : [ [ 1, 24 ] ]
    }
]
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Options

Styling for boxplot charts is done through the "options" object. The following can be used as an object in the "options" object to style the individual parts of a boxplot:

Attribute Type Values Details
box Object Mixed Accepts styling attribute to style the box section of the boxplot.
outlier Object Mixed Accepts styling attributes to style the outlier markers
line-median-level Object Mixed Accepts styling attributes to style the Q2(M) line object.
line-min-level Object Mixed Accepts styling attributes to style the line at the minimum value.
line-min-connector Object Mixed Accepts styling attributes to style the whisker that connects the boxplot and the minimum value line object.
line-max-level Object Mixed Accepts styling attributes to style the line at the maximum value.
line-max-connector Object Mixed Accepts styling attributes to style the whicker that connects the boxplot and the maximum value line object.
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
"options":{
    "box":{
        "bar-width":0.5,
        "tooltip":{
        }
    },
    "outlier":{
        "tooltip":{
        },
        "marker":{
            "type":"circle",
            "background-color":"#ff0"
        }
    },
    "line-min-level":{
        "line-color":"#f00",
        "line-width":2
    },
    "line-max-level":{
        "line-color":"#0f0",
        "line-width":2
    },
    "line-min-connector":{
        "line-width":2,
        "line-color":"#f00"
    },
    "line-max-connector":{
        "line-color":"#00f",
        "line-width":4
    },
    "line-median-level":{
        "alpha":0.5
    }
},

Summary

Got a question about how boxplot charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.