Configuring the Five Summary Numbers
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:
{
"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 |
|---|---|
|
It is used to specify whether the five summary numbers will be shown on the box and whisker chart. Setting this attribute to |
|
It is used to specify whether the minimum value (or the lower limit) for each data plot will be shown. Setting this attribute to This attribute will work only when |
|
It is used to specify whether the maximum value (or the upper limit) for each data plot will be shown. Setting this attribute to This attribute will work only when |
|
It is used to specify whether the median value will be shown. Setting this attribute to This attribute will work only when |
|
It is used to specify whether the lower quartile value will be shown or hidden. Setting this attribute to This attribute will work only when |
|
It is used to specify whether the upper quartile value will be shown or hidden. Setting this attribute to This attribute will work only when |
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 |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the median line. |
|
It is used to specify the thickness of the median line. |
|
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 |
|---|---|
|
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. |
|
It is used to specify the thickness of the upper quartile line. |
|
It is used to specify the transparency of the upper quartile line. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify the hex code of the color that will be used to render the upper quartile box. |
|
It is used to specify the transparency of the upper quartile box. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
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. |
|
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). |
|
It is used to specify the thickness of the two sides of the upper quartile box. |
|
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. |
|
It is used to specify the thickness of the lower quartile line. |
|
It is used to specify the transparency of the lower quartile line. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify the hex code of the color that will be used to render the lower quartile box. |
|
It is used to specify the transparency of the lower quartile box. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
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. |
|
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). |
|
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 |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the upper whisker of the data plot. |
|
It is used to specify the thickness of the upper whisker. |
|
It is used to specify the transparency of the upper whisker. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify the hex code of the color that will be used to render the lower whisker of the data plot. |
|
It is used to specify the thickness of the lower whisker. |
|
It is used to specify the transparency of the lower whisker. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify the width of the whiskers in percentage with respect to the width of the box plot. |