Box-and-Whisker

Box-and-Whisker series allows you to display groups of data into the range, quartiles, and median. The name itself suggests that the series depicts data through boxes and whiskers.

A box is the range showing the quartiles (lower and upper) and the median. Whiskers, on the other hand, are the lines extending vertically from the boxes. These lines indicate the data variability outside the lower and the upper quartiles. In addition, points that lie outside of these lines are known as outliers.

Box-and-Whisker series is ideal for visualizing statistical distribution or examining multiple sets of data graphically.

Box-and-Whisker series in FlexChart allows working with different features, as follows:

Quartile: Specify whether you would like to calculate quartiles by including or excluding median. To specify quartile calculation, set the QuartileCalculation property from the QuartileCalculation enumeration.
Inner points: Indicate whether to show or hide inner points by setting the ShowInnerPoints property.
Outliers: Indicate whether to show outliers by setting the ShowOutliers property.
Mean line: Display the mean line by setting the ShowMeanLine property.
Mean marks: Show mean marks by setting the ShowMeanMarks property.

The following image displays quartiles, median, and whiskers for the data that compares scores of students in three subjects across different schools.

The following code uses data regarding scores obtained by students of schools A, B, and C in three subjects. The code illustrates how to implement Box-and-Whisker series in FlexChart.

DataCreator.vb
DataCreator.cs

DataCreator.vb

Class DataCreator
    Public Shared Function CreateSchoolScoreData() As List(Of ClassScore)
        Dim result = New List(Of ClassScore)()
        result.Add(New ClassScore() With {
            .ClassName = "English",
            .SchoolA = 46,
            .SchoolB = 53,
            .SchoolC = 66
        })
        result.Add(New ClassScore() With {
            .ClassName = "Physics",
            .SchoolA = 61,
            .SchoolB = 55,
            .SchoolC = 65
        })
        result.Add(New ClassScore() With {
            .ClassName = "English",
            .SchoolA = 58,
            .SchoolB = 56,
            .SchoolC = 67
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 58,
            .SchoolB = 51,
            .SchoolC = 64
        })
        result.Add(New ClassScore() With {
            .ClassName = "English",
            .SchoolA = 63,
            .SchoolB = 53,
            .SchoolC = 45
        })
        result.Add(New ClassScore() With {
            .ClassName = "English",
            .SchoolA = 63,
            .SchoolB = 50,
            .SchoolC = 65
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 60,
            .SchoolB = 45,
            .SchoolC = 67
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 62,
            .SchoolB = 53,
            .SchoolC = 66
        })
        result.Add(New ClassScore() With {
            .ClassName = "Physics",
            .SchoolA = 63,
            .SchoolB = 54,
            .SchoolC = 64
        })
        result.Add(New ClassScore() With {
            .ClassName = "English",
            .SchoolA = 63,
            .SchoolB = 52,
            .SchoolC = 67
        })
        result.Add(New ClassScore() With {
            .ClassName = "Physics",
            .SchoolA = 69,
            .SchoolB = 66,
            .SchoolC = 71
        })
        result.Add(New ClassScore() With {
            .ClassName = "Physics",
            .SchoolA = 48,
            .SchoolB = 67,
            .SchoolC = 50
        })
        result.Add(New ClassScore() With {
            .ClassName = "Physics",
            .SchoolA = 54,
            .SchoolB = 50,
            .SchoolC = 56
        })
        result.Add(New ClassScore() With {
            .ClassName = "Physics",
            .SchoolA = 60,
            .SchoolB = 56,
            .SchoolC = 64
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 71,
            .SchoolB = 65,
            .SchoolC = 50
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 48,
            .SchoolB = 70,
            .SchoolC = 72
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 53,
            .SchoolB = 40,
            .SchoolC = 80
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 60,
            .SchoolB = 56,
            .SchoolC = 67
        })
        result.Add(New ClassScore() With {
            .ClassName = "Math",
            .SchoolA = 61,
            .SchoolB = 56,
            .SchoolC = 45
        })
        result.Add(New ClassScore() With {
            .ClassName = "English",
            .SchoolA = 63,
            .SchoolB = 58,
            .SchoolC = 64
        })
        result.Add(New ClassScore() With {
            .ClassName = "Physics",
            .SchoolA = 59,
            .SchoolB = 54,
            .SchoolC = 65
        })

        Return result
    End Function
End Class

Public Class ClassScore
    Public Property ClassName() As String
        Get
            Return m_ClassName
        End Get
        Set
            m_ClassName = Value
        End Set
    End Property
    Private m_ClassName As String
    Public Property SchoolA() As Double
        Get
            Return m_SchoolA
        End Get
        Set
            m_SchoolA = Value
        End Set
    End Property
    Private m_SchoolA As Double
    Public Property SchoolB() As Double
        Get
            Return m_SchoolB
        End Get
        Set
            m_SchoolB = Value
        End Set
    End Property
    Private m_SchoolB As Double
    Public Property SchoolC() As Double
        Get
            Return m_SchoolC
        End Get
        Set
            m_SchoolC = Value
        End Set
    End Property
    Private m_SchoolC As Double
End Class

DataCreator.cs

class DataCreator
{
    public static List<ClassScore> CreateSchoolScoreData()
    {
        var result = new List<ClassScore>();
        result.Add(new ClassScore() { ClassName = "English", SchoolA = 46, SchoolB = 53, SchoolC = 66 });
        result.Add(new ClassScore() { ClassName = "Physics", SchoolA = 61, SchoolB = 55, SchoolC = 65 });
        result.Add(new ClassScore() { ClassName = "English", SchoolA = 58, SchoolB = 56, SchoolC = 67 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 58, SchoolB = 51, SchoolC = 64 });
        result.Add(new ClassScore() { ClassName = "English", SchoolA = 63, SchoolB = 53, SchoolC = 45 });
        result.Add(new ClassScore() { ClassName = "English", SchoolA = 63, SchoolB = 50, SchoolC = 65 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 60, SchoolB = 45, SchoolC = 67 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 62, SchoolB = 53, SchoolC = 66 });
        result.Add(new ClassScore() { ClassName = "Physics", SchoolA = 63, SchoolB = 54, SchoolC = 64 });
        result.Add(new ClassScore() { ClassName = "English", SchoolA = 63, SchoolB = 52, SchoolC = 67 });
        result.Add(new ClassScore() { ClassName = "Physics", SchoolA = 69, SchoolB = 66, SchoolC = 71 });
        result.Add(new ClassScore() { ClassName = "Physics", SchoolA = 48, SchoolB = 67, SchoolC = 50 });
        result.Add(new ClassScore() { ClassName = "Physics", SchoolA = 54, SchoolB = 50, SchoolC = 56 });
        result.Add(new ClassScore() { ClassName = "Physics", SchoolA = 60, SchoolB = 56, SchoolC = 64 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 71, SchoolB = 65, SchoolC = 50 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 48, SchoolB = 70, SchoolC = 72 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 53, SchoolB = 40, SchoolC = 80 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 60, SchoolB = 56, SchoolC = 67 });
        result.Add(new ClassScore() { ClassName = "Math", SchoolA = 61, SchoolB = 56, SchoolC = 45 });
        result.Add(new ClassScore() { ClassName = "English", SchoolA = 63, SchoolB = 58, SchoolC = 64 });
        result.Add(new ClassScore() { ClassName = "Physics", SchoolA = 59, SchoolB = 54, SchoolC = 65 });

        return result;
    }

}
public class ClassScore
{
    public string ClassName { get; set; }
    public double SchoolA { get; set; }
    public double SchoolB { get; set; }
    public double SchoolC { get; set; }
}

Visual Basic
C#

Visual Basic

Partial Public Class MainPage
    Private _data As List(Of ClassScore) = Nothing
    Public Sub New()
        InitializeComponent()

        ' show mean lines
        boxWhiskerA.ShowMeanLine = True
        boxWhiskerB.ShowMeanLine = True
        boxWhiskerC.ShowMeanLine = True

        ' show inner points
        boxWhiskerA.ShowInnerPoints = True
        boxWhiskerB.ShowInnerPoints = True
        boxWhiskerC.ShowInnerPoints = True

        ' show outliers
        boxWhiskerA.ShowOutliers = True
        boxWhiskerB.ShowOutliers = True
        boxWhiskerC.ShowOutliers = True

        ' show mean marks
        boxWhiskerA.ShowMeanMarks = True
        boxWhiskerB.ShowMeanMarks = True
        boxWhiskerC.ShowMeanMarks = True

        ' specify quartile calculation
        boxWhiskerA.QuartileCalculation = QuartileCalculation.InclusiveMedian
        boxWhiskerB.QuartileCalculation = QuartileCalculation.InclusiveMedian
        boxWhiskerC.QuartileCalculation = QuartileCalculation.InclusiveMedian
    End Sub

End Class

Public ReadOnly Property Data() As List(Of ClassScore)
    Get
        If _data Is Nothing Then
            _data = DataCreator.CreateSchoolScoreData()
        End If

        Return _data
    End Get
End Property

public partial class BoxWhisker : Page
{
    private List<ClassScore> _data = null;
    public BoxWhisker()
    {
        InitializeComponent();

        // show mean lines
        boxWhiskerA.ShowMeanLine = true;
        boxWhiskerB.ShowMeanLine = true;
        boxWhiskerC.ShowMeanLine = true;

        // show inner points
        boxWhiskerA.ShowInnerPoints = true;
        boxWhiskerB.ShowInnerPoints = true;
        boxWhiskerC.ShowInnerPoints = true;

        // show outliers
        boxWhiskerA.ShowOutliers = true;
        boxWhiskerB.ShowOutliers = true;
        boxWhiskerC.ShowOutliers = true;

        // show mean marks
        boxWhiskerA.ShowMeanMarks = true;
        boxWhiskerB.ShowMeanMarks = true;
        boxWhiskerC.ShowMeanMarks = true;

        // specify quartile calculation
        boxWhiskerA.QuartileCalculation = QuartileCalculation.InclusiveMedian;
        boxWhiskerB.QuartileCalculation = QuartileCalculation.InclusiveMedian;
        boxWhiskerC.QuartileCalculation = QuartileCalculation.InclusiveMedian;
    }
    public List<ClassScore> Data
    {
        get
        {
            if (_data == null)
            {
                _data = DataCreator.CreateSchoolScoreData();
            }

            return _data;
        }
    }
}