Loading
Configuring Outliers
Outliers are values that are numerically distant from the set of numbers provided. They are indicative values which may occur by chance or by error for any set of data provided. Outliers are not included in the statistical calculation of the five summary numbers - the minimum and maximum values, the median value, and the lower and upper quartile values. Instead, they are placed as separate points on the chart.
In this section, you will be shown how you can:
Customizing the Outlier Icon
A box and whisker chart with outliers 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",
"showAllOutliers ": "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",
"outliers": "16900"
},
{
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
"outliers": "23000"
},
{
"value": "15000,19000,25000,32000,50000,65000",
"outliers": "72000"
}
]
},
{
"seriesname": "Female",
"lowerboxcolor": "#e44a00",
"upperboxcolor": "#f8bd19",
"data": [
{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
"outliers": "12000"
},
{
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
"outliers": "25000"
},
{
"value": "24000,32000,35000,37000,39000, 58000",
"outliers": "71000"
}
]
}
]
}<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",
//Showing out of range outliers
"showAllOutliers ": "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",
//specifying the outlier
"outliers": "16900"
}, {
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
"outliers": "23000"
}, {
"value": "15000,19000,25000,32000,50000,65000",
"outliers": "72000"
}]
}, {
"seriesname": "Female",
"lowerboxcolor": "#e44a00",
"upperboxcolor": "#f8bd19",
"data": [{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
"outliers": "12000"
}, {
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
"outliers": "25000"
}, {
"value": "24000,32000,35000,37000,39000, 58000",
"outliers": "71000"
}]
}]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>In the above chart, outlier values are displayed as triangle icons above each data plot.
Given below is a brief description of the attributes used to customize the outlier icon:
| Attribute Name | Description |
|---|---|
|
It is used to specify the outliers or the values greater than the maximum value from the data set provided. This attribute belongs to the |
|
It is used to specify the shape for the outlier icon. This attribute can take one of the following two values: |
|
It is used to specify the radius, in pixels, for the outlier icon. |
|
It is used to specify the number of sides for the outlier icon. The default value of this attribute is |
|
It is used to specify the hex code of the color that will be used to render the outlier icon in the legend. |
|
It is used to specify the transparency for the outlier icon. This attribute takes values between 0 (transparent) and 100 (opaque). |
Showing Outliers Beyond the Range of the Y-axis
For the chart shown above, all outliers provided as values to the outliers attribute are in the range of the y-axis scale. However, there can be instances where the outlier values lie outside the range of the y-axis. In this case, by default, such outlier values are not shown on the chart to maintain the visual integrity of the data plots.
A box and whisker chart with outliers beyond the range of the y-axis hidden 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",
"data": [
{
"value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000",
"outliers": "16900"
},
{
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
"outliers": "23000"
},
{
"value": "15000,19000,25000,32000,50000,65000",
"outliers": "72000"
}
]
},
{
"seriesname": "Female",
"lowerboxcolor": "#e44a00",
"upperboxcolor": "#f8bd19",
"data": [
{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
"outliers": "12000"
},
{
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
"outliers": "25000"
},
{
"value": "24000,32000,35000,37000,39000, 58000",
"outliers": "71000"
}
]
}
]
}<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",
"data": [{
"value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000",
//specifying the outlier
"outliers": "16900"
}, {
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
"outliers": "23000"
}, {
"value": "15000,19000,25000,32000,50000,65000",
"outliers": "72000"
}]
}, {
"seriesname": "Female",
"lowerboxcolor": "#e44a00",
"upperboxcolor": "#f8bd19",
"data": [{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
"outliers": "12000"
}, {
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
"outliers": "25000"
}, {
"value": "24000,32000,35000,37000,39000, 58000",
"outliers": "71000"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>In the data above, you will see that the outlier values for Grade 3 are 72000 for male and 71000 for female. Therefore, the outliers for these values are not shown on the chart.
You can opt to show these hidden outlier values.
A box and whisker chart with outlier values shown on the chart 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",
"showAllOutliers ": "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",
"outliers": "16900"
},
{
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
"outliers": "23000"
},
{
"value": "15000,19000,25000,32000,50000,65000",
"outliers": "72000"
}
]
},
{
"seriesname": "Female",
"lowerboxcolor": "#e44a00",
"upperboxcolor": "#f8bd19",
"data": [
{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
"outliers": "12000"
},
{
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
"outliers": "25000"
},
{
"value": "24000,32000,35000,37000,39000, 58000",
"outliers": "71000"
}
]
}
]
}<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",
//Showing out of range outliers
"showAllOutliers ": "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",
//specifying the outlier
"outliers": "16900"
}, {
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
"outliers": "23000"
}, {
"value": "15000,19000,25000,32000,50000,65000",
"outliers": "72000"
}]
}, {
"seriesname": "Female",
"lowerboxcolor": "#e44a00",
"upperboxcolor": "#f8bd19",
"data": [{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
"outliers": "12000"
}, {
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
"outliers": "25000"
}, {
"value": "24000,32000,35000,37000,39000, 58000",
"outliers": "71000"
}]
}]
}
}
);
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 all outliers on the box and whisker chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether outliers beyond the range of the y-axis will be shown on the chart. Setting this attribute to |