JSXGraph
JSXGraph share

Share

Boxplot
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/boxplot" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Boxplot" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" data-ar="1 / 1"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" data-ar="1 / 1"></div>
</div>
<div id="board-2-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-2" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" data-ar="1 / 1"></div>
</div>
<div id="board-3-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-3" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID2 = 'board-2';
    const BOARDID3 = 'board-3';
    const BOARDID = BOARDID0;

    // The four boxplot examples are "sandboxed"  with (function() { ... })();
    
    // Example 1
    (function() {
        var board = JXG.JSXGraph.initBoard(BOARDID0, {
            axis: true,
            boundingbox: [-8, 16, 8, -8],
            keepAspectRatio: false
        });
    
        var Q = [-1, 2, 3, 3.5, 5]; // quantiles
        Q.push([6.2, 6.6, -3, -3.3, 0]); // Outliers
    
        var b = board.create('boxplot', [Q, 2, 4], {
            smallWidth: 1
        });
    })();
    
    // Example 2
    (function() {
        var board = JXG.JSXGraph.initBoard(BOARDID1, {
            axis: true,
            boundingbox: [-5, 250, 40, -25],
            keepAspectRatio: false
        });
    
        var data = [57, NaN, NaN, 57, 57, 58, 63, 66, 66, 67, 67, 68, 69, NaN, 70, 70, 70, 70, 72, 73, 75, 75, 76, 76,
            78, 79, 81, 100, 120, 130, 140, 150, 160, 170];
    
        // Compute quantiles
        var Q = JXG.Math.Statistics.boxplot(data);
        // Output: [57, 67, 72, 81, 100, [120, 130, 140, 150, 160, 170]]
    
        var b = board.create('boxplot', [Q, 5, 4], {
            color: JXG.palette.orange,
            outlier: {
                face: 'x'
            }
        });
    })();
    
    // Example 3
    (function() {
        var board = JXG.JSXGraph.initBoard(BOARDID2, {
            axis: true,
            boundingbox: [-8, 8, 8, -8],
            keepAspectRatio: false
        });
        var Q = [-1, 2, 3, 3.5, 5, [6.0]];
        var b = board.create('boxplot', [Q, 3, 4], {
            dir: 'horizontal',
            smallWidth: 0.25,
            color: JXG.palette.red,
            outlier: {
                face: '-',
            }
        });
    })();
    
    // Example 4
    // Dynamic example
    (function() {
        var board = JXG.JSXGraph.initBoard(BOARDID3, {
            axis: true,
            boundingbox: [-8, 8, 8, -8],
            keepAspectRatio: false
        });
        var mi = board.create('glider', [0, -1, board.defaultAxes.y], { attachToGrid: true, snapY: 5, size: 8 });
        var ma = board.create('glider', [0, 5, board.defaultAxes.y], {});
        var Q = [
                        function() { return mi.Y(); },
                        2, 3, 3.5,
                        function() { return ma.Y(); },
                        [0]
                    ];
    
        var b = board.create('boxplot', [Q, 0, 2], {
            color: JXG.palette.green
        });
    })();
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!
const BOARDID2 = 'your_div_id_2'; // Insert your 3rd board id here!
const BOARDID3 = 'your_div_id_3'; // Insert your 4th board id here!

// The four boxplot examples are "sandboxed"  with (function() { ... })();

// Example 1
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID0, {
        axis: true,
        boundingbox: [-8, 16, 8, -8],
        keepAspectRatio: false
    });

    var Q = [-1, 2, 3, 3.5, 5]; // quantiles
    Q.push([6.2, 6.6, -3, -3.3, 0]); // Outliers

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

// Example 2
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID1, {
        axis: true,
        boundingbox: [-5, 250, 40, -25],
        keepAspectRatio: false
    });

    var data = [57, NaN, NaN, 57, 57, 58, 63, 66, 66, 67, 67, 68, 69, NaN, 70, 70, 70, 70, 72, 73, 75, 75, 76, 76,
        78, 79, 81, 100, 120, 130, 140, 150, 160, 170];

    // Compute quantiles
    var Q = JXG.Math.Statistics.boxplot(data);
    // Output: [57, 67, 72, 81, 100, [120, 130, 140, 150, 160, 170]]

    var b = board.create('boxplot', [Q, 5, 4], {
        color: JXG.palette.orange,
        outlier: {
            face: 'x'
        }
    });
})();

// Example 3
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID2, {
        axis: true,
        boundingbox: [-8, 8, 8, -8],
        keepAspectRatio: false
    });
    var Q = [-1, 2, 3, 3.5, 5, [6.0]];
    var b = board.create('boxplot', [Q, 3, 4], {
        dir: 'horizontal',
        smallWidth: 0.25,
        color: JXG.palette.red,
        outlier: {
            face: '-',
        }
    });
})();

// Example 4
// Dynamic example
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID3, {
        axis: true,
        boundingbox: [-8, 8, 8, -8],
        keepAspectRatio: false
    });
    var mi = board.create('glider', [0, -1, board.defaultAxes.y], { attachToGrid: true, snapY: 5, size: 8 });
    var ma = board.create('glider', [0, 5, board.defaultAxes.y], {});
    var Q = [
                    function() { return mi.Y(); },
                    2, 3, 3.5,
                    function() { return ma.Y(); },
                    [0]
                ];

    var b = board.create('boxplot', [Q, 0, 2], {
        color: JXG.palette.green
    });
})();
<jsxgraph width="50%, 50%, 50%, 50%" aspect-ratio="1 / 1, 1 / 1, 1 / 1, 1 / 1" numberOfBoards="4" title="Boxplot" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   // The four boxplot examples are "sandboxed"  with (function() { ... })();
   
   // Example 1
   (function() {
       var board = JXG.JSXGraph.initBoard(BOARDID0, {
           axis: true,
           boundingbox: [-8, 16, 8, -8],
           keepAspectRatio: false
       });
   
       var Q = [-1, 2, 3, 3.5, 5]; // quantiles
       Q.push([6.2, 6.6, -3, -3.3, 0]); // Outliers
   
       var b = board.create('boxplot', [Q, 2, 4], {
           smallWidth: 1
       });
   })();
   
   // Example 2
   (function() {
       var board = JXG.JSXGraph.initBoard(BOARDID1, {
           axis: true,
           boundingbox: [-5, 250, 40, -25],
           keepAspectRatio: false
       });
   
       var data = [57, NaN, NaN, 57, 57, 58, 63, 66, 66, 67, 67, 68, 69, NaN, 70, 70, 70, 70, 72, 73, 75, 75, 76, 76,
           78, 79, 81, 100, 120, 130, 140, 150, 160, 170];
   
       // Compute quantiles
       var Q = JXG.Math.Statistics.boxplot(data);
       // Output: [57, 67, 72, 81, 100, [120, 130, 140, 150, 160, 170]]
   
       var b = board.create('boxplot', [Q, 5, 4], {
           color: JXG.palette.orange,
           outlier: {
               face: 'x'
           }
       });
   })();
   
   // Example 3
   (function() {
       var board = JXG.JSXGraph.initBoard(BOARDID2, {
           axis: true,
           boundingbox: [-8, 8, 8, -8],
           keepAspectRatio: false
       });
       var Q = [-1, 2, 3, 3.5, 5, [6.0]];
       var b = board.create('boxplot', [Q, 3, 4], {
           dir: 'horizontal',
           smallWidth: 0.25,
           color: JXG.palette.red,
           outlier: {
               face: '-',
           }
       });
   })();
   
   // Example 4
   // Dynamic example
   (function() {
       var board = JXG.JSXGraph.initBoard(BOARDID3, {
           axis: true,
           boundingbox: [-8, 8, 8, -8],
           keepAspectRatio: false
       });
       var mi = board.create('glider', [0, -1, board.defaultAxes.y], { attachToGrid: true, snapY: 5, size: 8 });
       var ma = board.create('glider', [0, 5, board.defaultAxes.y], {});
       var Q = [
                       function() { return mi.Y(); },
                       2, 3, 3.5,
                       function() { return ma.Y(); },
                       [0]
                   ];
   
       var b = board.create('boxplot', [Q, 0, 2], {
           color: JXG.palette.green
       });
   })();
</jsxgraph>

Boxplot

Statistics
A few examples how to use JSXGraph boxplots.
// Define the ids of your boards in BOARDID0, BOARDID1,...

// The four boxplot examples are "sandboxed"  with (function() { ... })();

// Example 1
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID0, {
        axis: true,
        boundingbox: [-8, 16, 8, -8],
        keepAspectRatio: false
    });

    var Q = [-1, 2, 3, 3.5, 5]; // quantiles
    Q.push([6.2, 6.6, -3, -3.3, 0]); // Outliers

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

// Example 2
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID1, {
        axis: true,
        boundingbox: [-5, 250, 40, -25],
        keepAspectRatio: false
    });

    var data = [57, NaN, NaN, 57, 57, 58, 63, 66, 66, 67, 67, 68, 69, NaN, 70, 70, 70, 70, 72, 73, 75, 75, 76, 76,
        78, 79, 81, 100, 120, 130, 140, 150, 160, 170];

    // Compute quantiles
    var Q = JXG.Math.Statistics.boxplot(data);
    // Output: [57, 67, 72, 81, 100, [120, 130, 140, 150, 160, 170]]

    var b = board.create('boxplot', [Q, 5, 4], {
        color: JXG.palette.orange,
        outlier: {
            face: 'x'
        }
    });
})();

// Example 3
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID2, {
        axis: true,
        boundingbox: [-8, 8, 8, -8],
        keepAspectRatio: false
    });
    var Q = [-1, 2, 3, 3.5, 5, [6.0]];
    var b = board.create('boxplot', [Q, 3, 4], {
        dir: 'horizontal',
        smallWidth: 0.25,
        color: JXG.palette.red,
        outlier: {
            face: '-',
        }
    });
})();

// Example 4
// Dynamic example
(function() {
    var board = JXG.JSXGraph.initBoard(BOARDID3, {
        axis: true,
        boundingbox: [-8, 8, 8, -8],
        keepAspectRatio: false
    });
    var mi = board.create('glider', [0, -1, board.defaultAxes.y], { attachToGrid: true, snapY: 5, size: 8 });
    var ma = board.create('glider', [0, 5, board.defaultAxes.y], {});
    var Q = [
                    function() { return mi.Y(); },
                    2, 3, 3.5,
                    function() { return ma.Y(); },
                    [0]
                ];

    var b = board.create('boxplot', [Q, 0, 2], {
        color: JXG.palette.green
    });
})();

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.