Boxplot and Whisker Diagram Charts

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

https://app.zingsoft.com/demos/embed/6EYNQNG1
https://app.zingsoft.com/demos/embed/6EYNQNG1
{
    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

https://app.zingsoft.com/demos/embed/59BROS7J
https://app.zingsoft.com/demos/embed/59BROS7J
{
    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

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.

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

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

IQR = 57 - 45 = 12

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

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.

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 ] ]
    }
]
https://app.zingsoft.com/demos/embed/FDFCJCJ8
https://app.zingsoft.com/demos/embed/FDFCJCJ8

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:

AttributeTypeValuesDetails
boxObjectMixedAccepts styling attribute to style the box section of the boxplot.
outlierObjectMixedAccepts styling attributes to style the outlier markers
line-median-levelObjectMixedAccepts styling attributes to style the Q2(M) line object.
line-min-levelObjectMixedAccepts styling attributes to style the line at the minimum value.
line-min-connectorObjectMixedAccepts styling attributes to style the whisker that connects the boxplot and the minimum value line object.
line-max-levelObjectMixedAccepts styling attributes to style the line at the maximum value.
line-max-connectorObjectMixedAccepts styling attributes to style the whicker that connects the boxplot and the maximum value line object.
https://app.zingsoft.com/demos/embed/5SZVU2CZ
https://app.zingsoft.com/demos/embed/5SZVU2CZ
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.