Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

The ‘five-number summary’ principle is used to plot data on the box and whisker charts. This principle helps to provide a statistical summary for a given set of numbers. It gives information about the range (minimum and maximum numbers), the center (median), and the spread (upper and lower quartiles) for the set of values provided.

FusionCharts Suite XT allows you to customize the five summary numbers and their deviations plotted on a box and a whisker chart according to your requirement.

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

Showing/Hiding the Five Summary Numbers

A box and whisker chart with three of the five summary numbers - the minimum and maximum numbers and the median - shown looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Distribution of annual salaries", "subcaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "$", "theme": "fint", "showValues": "1", "showQ1Values": "0", "showQ3Values": "0" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerBoxColor": "#008ee4", "upperBoxColor": "#6baa01", "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": "#e44a00", "upperBoxColor": "#f8bd19", "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": "$",
        "theme": "fint",
        "showValues": "1",
        "showQ1Values": "0",
        "showQ3Values": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerBoxColor": "#008ee4",
            "upperBoxColor": "#6baa01",
            "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": "#e44a00",
            "upperBoxColor": "#f8bd19",
            "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: '550',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subcaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "showValues": "1",
            //To show or hide the lower quartile value
            "showQ1Values": "0",
            //To show or hide the upper quartile value
            "showQ3Values": "0"
        },
        "categories": [{
            "category": [{
                "label": "Grade 1"
            }, {
                "label": "Grade 2"
            }, {
                "label": "Grade 3"
            }]
        }],
        "dataset": [{
            "seriesname": "Male",
            "lowerBoxColor": "#008ee4",
            "upperBoxColor": "#6baa01",
            "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": "#e44a00",
            "upperBoxColor": "#f8bd19",
            "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 show/hide the five summary numbers:

Attribute Name Description

showValues

It is used to specify whether the five summary numbers will be shown on the box and whisker chart. Setting this attribute to 0 will hide them, setting it to 1 (default) will show them.

showMinValues

It is used to specify whether the minimum value (or the lower limit) for each data plot will be shown. Setting this attribute to 0 will hide the minimum values, setting it to 1 (default) will show them.

This attribute will work only when "showValues": "1".

showMaxValues

It is used to specify whether the maximum value (or the upper limit) for each data plot will be shown. Setting this attribute to 0 will hide the maximum values, setting it to 1 (default) will show them.

This attribute will work only when "showValues": "1".

showMedianValue

It is used to specify whether the median value will be shown. Setting this attribute to 0 will hide the median value, setting it to 1 (default) will show it.

This attribute will work only when "showValues": "1".

showQ1Values

It is used to specify whether the lower quartile value will be shown or hidden. Setting this attribute to 1 will show the value, setting it to 0 (default) will hide it.

This attribute will work only when "showValues": "1".

showQ3Values

It is used to specify whether the upper quartile value will be shown or hidden. Setting this attribute to 1 will show the value, setting it to 0 (default) will hide it.

This attribute will work only when "showValues": "1".

To selectively show summary numbers on the chart, set the showValues attribute and the attributes for the values you want to show to 1. Set the remaining attributes to 0. For example, if you want to show only the minimum values, use the code snippet shown below:

{
    "chart": {
        "caption": "Visits to a Website",
        "subcaption": "In three years",
        "showQ1Values": "0",
        "showQ3Values": "0",
        "showMedianValues": "0",
        "showMinValues": "1",
        "showMaxValues": "1"
    }
}

You can also configure the box and whisker chart to show all five summary numbers at once. To do this you can use the code snippet shown below:

{
    "chart": {
        "caption": "Visits to a Website",
        "subcaption": "In three years",
        "showQ1values": "1",
        "showQ3values": "1",
        "showMedianValues": "1",
        "showMinValues": "1",
        "showMaxValues": "1"
    }
}

Customizing the Median (Q2)

The median for a set of numbers is represented by a line at the center of the box plot. The median acts as the separator between the upper and lower quartile boxes.

Given below is a brief description of the attributes used to customize the median:

Attribute Name Description

medianColor

It is used to specify the hex code of the color that will be used to render the median line.

medianThickness

It is used to specify the thickness of the median line.

medianAlpha

It is used to specify the transparency of the median line. This attribute takes values between 0 (transparent) and 100 (opaque).

All these attributes can be used with the chart, dataset, and the data objects, depending on the requirement.

Customizing the Upper and Lower Quartiles (Q1 and Q3)

The quartiles of a set of data are spread as two boxes, separated by the median. The roof of the upper quartile box represents the exact value of the upper quartile (Q3) . The base of the lower quartile box represents the exact value of the lower quartile (Q1).

Given below is a brief description of the attributes used to customize the quartile points and the boxes.

Attribute Name Description

upperQuartileColor

It is used to specify the hex code of the color that will be used to render the line that represents the exact value of the upper quartile. This line is the roof of the upper quartile box.

upperQuartileThickness

It is used to specify the thickness of the upper quartile line.

upperQuartileAlpha

It is used to specify the transparency of the upper quartile line. This attribute takes values between 0 (transparent) and 100 (opaque).

upperBoxColor

It is used to specify the hex code of the color that will be used to render the upper quartile box.

upperBoxAlpha

It is used to specify the transparency of the upper quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).

upperBoxBorderColor

It is used to specify the hex code of the color that will be used to render the two sides of the upper quartile box.

upperBoxBorderAlpha

It is used to set the transparency of the two sides of the upper quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).

upperBoxBorderThickness

It is used to specify the thickness of the two sides of the upper quartile box.

lowerQuartileColor

It is used to specify the hex code of the color that will be used to render the line that represents the exact value of the lower quartile. This line is the roof of the lower quartile box.

lowerQuartileThickness

It is used to specify the thickness of the lower quartile line.

lowerQuartileAlpha

It is used to specify the transparency of the lower quartile line. This attribute takes values between 0 (transparent) and 100 (opaque).

lowerBoxColor

It is used to specify the hex code of the color that will be used to render the lower quartile box.

lowerBoxAlpha

It is used to specify the transparency of the lower quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).

lowerBoxBorderColor

It is used to specify the hex code of the color that will be used to render the two sides of the lower quartile box.

lowerBoxBorderAlpha

It is used to set the transparency of the two sides of the lower quartile box. This attribute takes values between 0 (transparent) and 100 (opaque).

lowerBoxBorderThickness

It is used to specify the thickness of the two sides of the lower quartile box.

Customizing the Minimum and Maximum Numbers (Lower and Upper Whiskers)

The box and whisker chart displays the biggest number of a set of values as the upper whisker and the smallest number of the set as the lower whisker.

Given below is a brief description of the attributes used to customize the whiskers:

Attribute Name Description

upperWhiskerColor

It is used to specify the hex code of the color that will be used to render the upper whisker of the data plot.

upperWhiskerThickness

It is used to specify the thickness of the upper whisker.

upperWhiskerAlpha

It is used to specify the transparency of the upper whisker. This attribute takes values between 0 (transparent) and 100 (opaque).

lowerWhiskerColor

It is used to specify the hex code of the color that will be used to render the lower whisker of the data plot.

lowerWhiskerThickness

It is used to specify the thickness of the lower whisker.

lowerWhiskerAlpha

It is used to specify the transparency of the lower whisker. This attribute takes values between 0 (transparent) and 100 (opaque).

whiskersLimitsWidthRatio

It is used to specify the width of the whiskers in percentage with respect to the width of the box plot.

Top