FusionCharts Logo
v3.12.1
Demos
Beginner's Guide
Charts / Gauges / Maps Guide
Customizing Charts
API
Integrating With Your Stack
Help

Configuring Quartile Deviation

The distance between the upper quartile and the lower quartile is called the interquartile range. Quartile deviation is half the distance between the two quartiles, i.e. half the interquartile range. It is also called the semi interquartile range.

In a box and whisker chart, along with the dataset seriesname, the legend also shows the icons for mean, mean deviation, standard deviation, quartile deviation, and the outliers of every data plot. This is a concept exclusively applicable to the box and whisker chart. Each dataset is highlighted by different colors to easily differentiate between them and their icons. The legend icons are interactive; you can click the icons to show/hide the associated values on the chart.

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

Showing/Hiding the Quartile Deviation Icon

A box and whisker chart with the quartile deviation icon shown in the legend box 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": "0", "showQD": "1" }, "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": "0",
        "showQD": "1"
    },
    "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: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subcaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "showValues": "0",
            //To show the icon representing the quartile deviation
            "showQD": "1"
        },
        "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 attribute used to show/hide the quartile deviation icon in the legend:

Attribute Name Description

showQD

It is used to specify whether the icon representing the quartile deviation value of the dataset will be shown in the legend. Setting this attribute to 1 will show the icon, setting it to 0 (default) will hide it.

Showing/Hiding Individual Quartile Deviation Values

You can opt to show/hide the quartile deviation for specific datasets.

A box and whisker chart with the quartile deviation value shown for the male staff and hidden for the female staff 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": "0" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerboxcolor": "#008ee4", "upperboxcolor": "#6baa01", "showQD": "1", "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": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerboxcolor": "#008ee4",
            "upperboxcolor": "#6baa01",
            "showQD": "1",
            "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: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subcaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "showValues": "0"
        },
        "categories": [{
            "category": [{
                "label": "Grade 1"
            }, {
                "label": "Grade 2"
            }, {
                "label": "Grade 3"
            }]
        }],
        "dataset": [{
            "seriesname": "Male",
            "lowerboxcolor": "#008ee4",
            "upperboxcolor": "#6baa01",
            //To show the icon representing the Quartile deviation
            "showQD": "1",
            "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>

To show/hide individual quartile deviation values, use the showQD attribute with the data object, that belongs to the dataset object.

Customizing the Quartile Deviation Icon

Given below is a brief description of the attributes used to customize the quartile deviation icon:

Attribute Name Description

qdIconShape

It is used to specify the shape for the quartile deviation icon. This attribute can take one of the following two values: polygon or spoke. The default shape for a quartile deviation icon is the triangle.

qdIconRadius

It is used to specify the radius, in pixels, for the quartile deviation icon.

qdIconSides

It is used to specify the number of sides for the quartile deviation icon. The default value of this attribute is 3.

qdIconColor

It is used to specify the hex code of the color that will be used to render the quartile deviation icon in the legend.

qdIconAlpha

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

Drawing Quartile Deviation Connectors

For multiple data plots, you can draw a line to connect the quartile deviation icons of each data plot.

A box and whisker chart rendered with a quartile deviation connector 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": "0", "drawQDConnector": "1" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerboxcolor": "#008ee4", "upperboxcolor": "#6baa01", "showQD": "1", "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": "0",
        "drawQDConnector": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerboxcolor": "#008ee4",
            "upperboxcolor": "#6baa01",
            "showQD": "1",
            "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: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subcaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "showValues": "0",
            "drawQDConnector": "1"
        },
        "categories": [{
            "category": [{
                "label": "Grade 1"
            }, {
                "label": "Grade 2"
            }, {
                "label": "Grade 3"
            }]
        }],
        "dataset": [{
            "seriesname": "Male",
            "lowerboxcolor": "#008ee4",
            "upperboxcolor": "#6baa01",
            //To show the icon representing the Quartile deviation
            "showQD": "1",
            "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 attribute used to draw quartile deviation connectors for the box and whisker chart:

Attribute Name Description

drawQDConnector

It is used to specify whether a connector will be drawn to connect the quartile deviation for multiple sets of data. Setting this attribute to 1 will draw the connector, setting it to 0 (default) will hide it.

The color that is used to render the quartile deviation icon is also used to render the connecting line.

Connecting Null Data

If you use the showQD attribute with the data object and set it to 0, the chart will not display the quartile deviation icon for that particular set of data. In this case, the missing quartile deviation is considered as null data. Consequently, the quartile deviation connectors will skip this null data and draw a continuous connector.

A box and whisker chart with null data connected 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": "0", "drawQDConnector": "1", "connectNullData ": "1" }, "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", "showQD": "1" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500", "showQD": "0" }, { "value": "15000,19000,25000,32000,50000,65000", "showQD": "1" } ] }, { "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": "0",
        "drawQDConnector": "1",
        "connectNullData ": "1"
    },
    "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",
                    "showQD": "1"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
                    "showQD": "0"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000",
                    "showQD": "1"
                }
            ]
        },
        {
            "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: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subcaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "showValues": "0",
            "drawQDConnector": "1",
            //To ignore the null data and draw a continuous connector
            "connectNullData ": "1"
        },
        "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",
                "showQD": "1",
            }, {
                "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
                "showQD": "0",
            }, {
                "value": "15000,19000,25000,32000,50000,65000",
                "showQD": "1",
            }]
        }, {
            "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>

In the above chart, a connector is drawn connecting the quartile deviation icons of the first and the third data plots, skipping the second data plot.

Given below is a brief description of the attribute used to connect null data using quartile deviation connectors:

Attribute Name Description

connectNullData

It is used to specify whether the null values will be skipped and a continuous connector line will be drawn for multiple sets of data. Setting this attribute to 1 will ignore the null values and draw a continuous connector line, setting it to 0 will not ignore the null values.

This attribute is applicable for the quartile deviation icon and all the other deviation icons.
Top