Visit ZingGrid.com to learn more about our new JavaScript library for data grids & data tables

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.

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) ] ] } ] }

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

**boxplot**

Result

HTML

JavaScript

CSS

{ "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**

Result

HTML

JavaScript

CSS

{ "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 */ ] } ] }

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 384545 46 48 49

Q1 = 45

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

51 52 53 565759 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

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 ] ] } ]

Result

HTML

JavaScript

CSS

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. |

Result

HTML

JavaScript

CSS

"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 } },

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.