Boxplot

Element

Vertical or horizontal boxplot or also called box-and-whisker plot to present numerical data through their quartiles. The direction of the boxplot is controlled by the attribute "dir". Internally, a boxplot is realized with a single JSXGraph curve.

Given a data set, the input array Q for the boxplot can be computed e.g. with the method JXG.Math.Statistics.boxplot.

Usage (signatures)
board.create('boxplot', [quantiles, axis, width]);
Parameters
Name Type Description
quantiles Array

Array containing five quantiles (e.g. min, first quartile, median, third quartile, maximum) and an optional array with outlier values. The elements of this array can be of type number, function or string. The optional aub-array outlier is an array of numbers or a function returning an array of numbers.

axis Number | function

Axis position of the boxplot

width Number | function

Width of the rectangle part of the boxplot. The width of the first and 3th quartile is relative to this width and can be controlled by the attribute "smallWidth".

Examples
var Q = [ -1, 2, 3, 3.5, 5 ];

var b = board.create('boxplot', [Q, 2, 4], {strokeWidth: 3});

// With outliers
var Q = [ -1, 2, 3, 3.5, 5, [-4, -6] ];
var b = board.create('boxplot', [Q, 3, 4], {dir: 'horizontal', width: 2, smallWidth: 0.25, color:'red'});

var data = [57, 57, 57, 58, 63, 66, 66, 67, 67, 68, 69, 70, 70, 70, 70, 72, 73, 75, 75, 76, 76, 78, 79, 81];
var Q = JXG.Math.Statistics.boxplot(data);
var b = board.create('boxplot', [Q, 0, 3]);

var mi = board.create('glider', [0, -1, board.defaultAxes.y]);
var ma = board.create('glider', [0, 5, board.defaultAxes.y]);
var Q = [function() { return mi.Y(); }, 2, 3, 3.5, function() { return ma.Y(); }];

var b = board.create('boxplot', [Q, 0, 2]);

Attributes

Own

dir

Description

Direction of the boxplot: 'vertical' or 'horizontal'

Type
String
Default Value
'vertical'
Source
options.js, line 4716

outlier

Description

Size and face of outliers. Size is the point size in pixel. Possible values for face are 'o' (default), '[]', '<>', '<<>>', '+', 'x', '-', '|'. See JXG.Grid for these names ('o' here is 'regpol' of the grid).

Type
Object
Default Value
{
  size: 3,
  face: 'o'
}
Source
options.js, line 4736

smallWidth

Description

Relative width of the maximum and minimum quantile

Type
Number
Default Value
0.5
Source
options.js, line 4726

Inherited

Members

Own

none

Inherited

Methods

Own

none

Inherited

Events

Own

none

Inherited

Example

var data = [57, 57, 57, 58, 63, 66, 66, 67, 67, 68, 69, 70, 70, 70, 70, 72, 73, 75, 75, 76, 76, 78, 79, 81];
var Q = JXG.Math.Statistics.boxplot(data);
var b = board.create('boxplot', [Q, 2, 4]);

Details

Type
JXG.Curve
See
Source
base/curve.js, line 3112

Extends