OK, we created the new JSXGraph element "boxplot" which will be available in today's nightly build (after 10pm CET).
You can supply fixed values for the quantiles, but also functions. Here are a few examples:
<div id='jxgbox0' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>
<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox0', {axis:true, boundingbox:[-8,8,8,-8], keepAspectRatio:false});
var Q = [ -1, 2, 3, 3.5, 5 ];
var b = board.create('boxplot', [Q, 2, 4]);
})();
</script>
<div id='jxgbox1' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>
<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox1', {axis:true, boundingbox:[-5,90,5,30], keepAspectRatio:false});
var Stat = JXG.Math.Statistics;
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 = [];
Q[0] = JXG.Math.Statistics.min(data);
Q = Q.concat(JXG.Math.Statistics.percentile(data, [25, 50, 75]));
Q[4] = JXG.Math.Statistics.max(data);
var b = board.create('boxplot', [Q, 0, 3]);
})();
</script>
<div id='jxgbox2' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>
<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox2', {axis:true, boundingbox:[-8,8,8,-8], keepAspectRatio:false});
var Q = [ -1, 2, 3, 3.5, 5 ];
var b = board.create('boxplot', [Q, 3, 4], {dir: 'horizontal', smallWidth: 0.25, color:'red'});
})();
</script>
<div id='jxgbox3' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>
<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox3', {axis:true, boundingbox:[-8,8,8,-8], keepAspectRatio:false});
var mi = board.create('glider', [0, -1, board.defaultAxes.y], {attachToGrid:true, snapY: 5});
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]);
})();
</script>
The last example uses dynamic values for the min and max, you can adjust it to your needs easily.
Please, give us feedback if everything works.