Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

A box and whisker chart is used to examine a given set of data and draw the statistical conclusion using the five-number summary principle.

In this section, you will be shown how you can:

Creating a Simple Box and Whisker Chart

As an example, we will create a box and whisker chart that shows the gender-wise distribution of annual salaries.

The box and whisker chart thus created looke like this:

FusionCharts will load here..
{ "chart": { "caption": "Distribution of annual salaries", "subCaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00", "bgColor": "#ffffff", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "showCanvasBorder": "0", "showAlternateHGridColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "legendPosition": "right", "showValues": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerBoxColor": "#0075c2", "upperBoxColor": "#1aaf5d", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500" }, { "value": "15000,19000,25000,32000,50000,65000" } ] }, { "seriesname": "Female", "lowerBoxColor": "#f45b00", "upperBoxColor": "#f2c500", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000" }, { "value": "24000,32000,35000,37000,39000, 58000" } ] } ] }
{
    "chart": {
        "caption": "Distribution of annual salaries",
        "subCaption": "By Gender",
        "xAxisName": "Pay Grades",
        "YAxisName": "Salaries (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
        "bgColor": "#ffffff",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "showAlternateHGridColor": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendPosition": "right",
        "showValues": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerBoxColor": "#0075c2",
            "upperBoxColor": "#1aaf5d",
            "data": [
                {
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000"
                }
            ]
        },
        {
            "seriesname": "Female",
            "lowerBoxColor": "#f45b00",
            "upperBoxColor": "#f2c500",
            "data": [
                {
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'boxandwhisker2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subCaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
            "bgColor": "#ffffff",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "showAlternateHGridColor": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "legendPosition": "right",
            "showValues": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },
        "categories": [{
            "category": [{
                "label": "Grade 1"
            }, {
                "label": "Grade 2"
            }, {
                "label": "Grade 3"
            }]
        }],
        "dataset": [{
            "seriesname": "Male",
            "lowerBoxColor": "#0075c2",
            "upperBoxColor": "#1aaf5d",
            "data": [{
                "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
            }, {
                "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
            }, {
                "value": "15000,19000,25000,32000,50000,65000"
            }]
        }, {
            "seriesname": "Female",
            "lowerBoxColor": "#f45b00",
            "upperBoxColor": "#f2c500",
            "data": [{
                "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
            }, {
                "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
            }, {
                "value": "24000,32000,35000,37000,39000, 58000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the chart shown above, note that the minimum and maximum values and the median are displayed by default, whereas the upper and lower quartile values are hidden.

Given below is a brief description of the attributes used to create a box and whisker chart:

Attribute Name Description

seriesName

It is used to specify the series name for a dataset. For example, you can name the dataset for the male employee salaries ‘Male’. This attribute belongs to the dataset object.

lowerBoxColor

It is used to specify the hex code of the color that will be used to render the lower quartile box. This attribute belongs to the dataset object.

upperBoxColor

It is used to specify the hex code of the color that will be used to render the upper quartile box. This attribute belongs to the dataset object.

value

It is used to specify a comma-separated list of values for each item in the dataset. This attribute belongs to the data object, which belongs to the dataset object.

The comma is the default data-separator. You can explicitly specify the data-separator using the dataSeparator attribute. For example, "dataSeparator”: "|”. This attribute belongs to the data object, which belongs to the dataset object.

Legends in Box and Whisker chart

FusionCharts Suite XT supports legend for the box and whisker chart. Legend allows you to display single color icons for numberic numbers.

A simple box and whisker chart rendered with a legend looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Distribution of annual salaries", "subCaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00", "bgColor": "#ffffff", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "showCanvasBorder": "0", "showAlternateHGridColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "legendPosition": "right", "showValues": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerBoxColor": "#0075c2", "upperBoxColor": "#1aaf5d", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500" }, { "value": "15000,19000,25000,32000,50000,65000" } ] }, { "seriesname": "Female", "lowerBoxColor": "#f45b00", "upperBoxColor": "#f2c500", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000" }, { "value": "24000,32000,35000,37000,39000, 58000" } ] } ] }
{
    "chart": {
        "caption": "Distribution of annual salaries",
        "subCaption": "By Gender",
        "xAxisName": "Pay Grades",
        "YAxisName": "Salaries (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
        "bgColor": "#ffffff",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "showAlternateHGridColor": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendPosition": "right",
        "showValues": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerBoxColor": "#0075c2",
            "upperBoxColor": "#1aaf5d",
            "data": [
                {
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000"
                }
            ]
        },
        {
            "seriesname": "Female",
            "lowerBoxColor": "#f45b00",
            "upperBoxColor": "#f2c500",
            "data": [
                {
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'boxandwhisker2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subCaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
            "bgColor": "#ffffff",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "showAlternateHGridColor": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "legendPosition": "right",
            "showValues": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },
        "categories": [{
            "category": [{
                "label": "Grade 1"
            }, {
                "label": "Grade 2"
            }, {
                "label": "Grade 3"
            }]
        }],
        "dataset": [{
            "seriesname": "Male",
            "lowerBoxColor": "#0075c2",
            "upperBoxColor": "#1aaf5d",
            "data": [{
                "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
            }, {
                "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
            }, {
                "value": "15000,19000,25000,32000,50000,65000"
            }]
        }, {
            "seriesname": "Female",
            "lowerBoxColor": "#f45b00",
            "upperBoxColor": "#f2c500",
            "data": [{
                "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
            }, {
                "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
            }, {
                "value": "24000,32000,35000,37000,39000, 58000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to display legend in a box and whisker chart:

Attribute Name Description

showLegend

Whether to show legend on the chart. Set it to 1 to show the legend or to 0 to hide it.

legendPosition

The legend can be plotted at two positions on the chart - below the chart for value bottom and to the right of the chart for value right.

legendBorderAlpha

Border alpha for the legend. It can take values from 0(transparent) to 100(opaque).

legendShadow

Whether to show a shadow for legend. Set it to 1 to show shadow and 0 to hide it.

Top