|
|
     
Box Plot series visualizes distribution of data, using seven values – first and third quartile (q1 and q3), median (that is the second quartile), upper and lower value (inner fences), mean
and outliers. The advantage of this type of series is that it displays detailed information about a set of data in a small space. Figure 1 below shows how the seven
values defining one box plot are represented in a single data point.
If you are not familiar with the usage and terminology of the box plots, check the Wikipedia page on box plots and the related resources listed in it.
Defining Box Plot Series Declaratively
To define a Box Plot series in the HTML, add an object with type property set to "boxPlot" to the
series array.
| Code Listing 1: Declarative Definition of a Box Plot Series | Copy |
|---|
<div id="declarativeBoxPlotSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
series: [{
type: 'boxPlot',
data: [
[26.2, 38.3, 51, 61.45, 68.9, 49.0, [ 18.3, 20, 70, 72,5 ]],
[26.4, 38.125, 46.8, 60.425, 66.8, 47.3, [ 18, 69, 71.3, 71.5 ]],
[31.6, 41.725, 52.35, 62.175, 70.8, 52.3, [ 14, 16.4, 74 ]]
]
}],
theme: 'light'
}">
</div> |
Defining Box Plot Series Programmatically
To programmatically add a Box Plot series to your chart, create a new Telerik.UI.Chart.BoxPlotSeries
object and add it to the Telerik.UI.RadChart.series array. Finally, call refresh()
to have the changes take effect.
| Code Listing 2: Programmatic Definition of a Box Plot Series | Copy |
|---|
var boxPlotSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("boxPlotSeriesChart"), { theme: 'light' });
var boxPlotSeries = new Telerik.UI.Chart.BoxPlotSeries();
boxPlotSeries.data = [
[26.2, 38.3, 51, 61.45, 68.9, 49.0, [18.3, 20, 70, 72, 5]],
[26.4, 38.125, 46.8, 60.425, 66.8, 47.3, [18, 69, 71.3, 71.5]],
[31.6, 41.725, 52.35, 62.175, 70.8, 52.3, [14, 16.4, 74]]
];
boxPlotSeriesChartCtrl.series.push(boxPlotSeries);
boxPlotSeriesChartCtrl.refresh();
|
Configuring Box Plot Series
Apart from the common configuration settings listed in this article, there a few more
specific ones that you can use to customize the look and behavior of the Box Plot series.
Providing Data
In simple scenarios, you can just list the seven values that determine each box plot, as shown in Code Listing 1. Usually, you will get the chart data in JSON
format with the data values assigned to different fields. In such scenario, you can use the following properties of the series object to assign the field names:
q1Field: A number representing the first quartile.
q3Field: A number representing the third quartile.
lowerField: A number representing the lower value.
upperField: A number representing the upper value.
medianField: A number representing the median value.
meanField: A number representing the mean value.
outliersField: An array of numbers representing the outlier values (both mild and extreme outliers).
Code Listing 3 shows a chart with a Box Plot that has all field properties set. Figure 2 after it, shows the result of this definition.
| Code Listing 3: Setting Box Plot Fields | Copy |
|---|
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
series: [{
type: 'boxPlot',
q1Field: 'q1',
q3Field: 'q3',
lowerField: 'lower',
upperField: 'upper',
medianField: 'median',
meanField: 'mean',
outliersField: 'outliers'
}],
dataSource: {
data: [
{ year: 2004, lower: 1.8, q1: 2.75, median: 3.35, q3: 3.825, upper: 4.9, mean: 3.4 },
{ year: 2005, lower: 1.7, q1: 2.275, median: 3.2, q3: 3.825, upper: 5.5, mean: 3.2, outliers: [0.5, 6.7] },
{ year: 2006, lower: 1.2, q1: 1.95, median: 2.45, q3: 3.075, upper: 3.5, mean: 2.5 },
{ year: 2007, lower: 1.3, q1: 1.9, median: 3.05, q3: 3.425, upper: 4, mean: 2.7, outliers: [7, 8.5] }
]
},
categoryAxis: {
field: 'year'
},
tooltip: {
visible: true
},
theme: 'light'
}">
</div> |
Customizing Outliers
Outliers are the points that show outside of the range closed by the lower and upper values (inner fences). By default, they are represented as crosses or circles based on their
distance from the inner fences. Since there are two types of outliers in a box plot—mild and extreme—RadChart renders two types of outliers, too. The type of an outlier depends on a
mathematical formula. If you are not familiar with this formula and the meaning of inner/outer fences, you can check this tutorial: What are outliers in the data?.
You can configure mild and extreme outliers separately using the outliers (for mild outliers) and extremes (for extreme outliers) properties. Both properties expose the following
options:
border: The border settings of the outliers. They include color and width.
size: The outliers size in pixels.
type: The outliers type. The supported values are: "circle" - the marker shape is circle,
"square" — the marker shape is square, "triangle" — the marker shape is triangle and
"cross" — the marker shape is cross. The default values are "cross" for mild outliers and "circle"
for extreme outliers.
visible: A Boolean property, that determines whether the chart will display the series outliers. By default, chart series outliers are displayed.
You can see how different settings are applied to the mild and extreme outliers in Code Listing 4 below and then observe the result in
Figure 3.
| Code Listing 4: Setting Different Options for Extreme and Mild Outliers | Copy |
|---|
<div id="outliersChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
series: [{
type: 'boxPlot',
q1Field: 'q1',
q3Field: 'q3',
lowerField: 'lower',
upperField: 'upper',
medianField: 'median',
meanField: 'mean',
outliersField: 'outliers',
outliers: {
background: 'yellow',
type: 'circle',
size: 9
},
extremes: {
type: 'cross',
border: {
color: 'orange',
width: 1
},
size: 7
},
}],
dataSource: {
data: [
{ year: 2004, lower: 1.8, q1: 2.75, median: 3.35, q3: 3.825, upper: 4.9, mean: 3.4, outliers: [0.1, 1.5, 5.5] },
{ year: 2005, lower: 1.7, q1: 2.275, median: 3.2, q3: 3.825, upper: 5.5, mean: 3.2, outliers: [0.5, 6.7] },
{ year: 2006, lower: 1.2, q1: 1.95, median: 2.45, q3: 3.075, upper: 3.5, mean: 2.5, outliers: [0.5, 4, 5.2, 5.5, 7, 8.5] },
{ year: 2007, lower: 1.3, q1: 1.9, median: 3.05, q3: 3.425, upper: 4, mean: 2.7, outliers: [7, 8.5] }
]
},
categoryAxis: {
field: 'year'
},
tooltip: {
visible: true
},
theme: 'light'
}">
</div> |
See Also
|