Box plot is a new chart type that was introduced in JET 2.1.0. Box plots are most commonly used to visualize the statistical distributions of groups of values. In each box plot shape, the box displays first quartile, second quartile (i.e. median), and third quartile values, while the whiskers display the minimum and maximum values. Outlier values can also be displayed using additional point markers.

Screen Shot 2016-08-26 at 4.35.37 PM.png

To create a basic box plot such as above, you only need to create an ojChart with {type: 'boxPlot'} and supply the low, q1, q2, q3, and high values for each data item. Outlier values can be specified by providing a nested items array for each data item.

 

HTML

<div id="boxPlot" data-bind="ojComponent: {
        component: 'ojChart', 
        type: 'boxPlot',
        series: boxPlotSeries, 
        groups: boxPlotGroups
}">
</div>

 

JS

self.boxPlotSeries = ko.observableArray([
    {name: 'Series 1', items : [
        {low: 3, q1: 8, q2: 12, q3: 17, high: 28, items: [40, 50]},
        {low: 21, q1: 24, q2: 36, q3: 44, high: 65, items: [15]},
        {low: 7, q1: 16, q2: 23, q3: 32, high: 49},
        {low: 8, q1: 12, q2: 16, q3: 27, high: 49, items: [61]}
    ]}
]);

self.boxPlotGroups = ko.observableArray(['Group A', 'Group B', 'Group C', 'Group D']);

 

The style of every part of the box plot shape can be customized. For example, it's possible to color the top and bottom segments of the boxes differently, or to render the whiskers with different colors and thicknesses. The styling attributes are listed in the JET JSDoc.

 

It's also possible to use a box plot series within a combo chart. In the example below, a line series is added to a box plot in order to display the mean values.

 

Screen Shot 2016-08-26 at 5.01.02 PM.png

 

Similar to the other chart types, box plot also supports a range of interactivity features, such as selection, filtering, highlighting, zoom & scroll, drag & drop, and animations. More information and demos can be found in the JET Cookbook.