ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / FlexChart Elements / FlexChart Series / Box-and-Whisker
In This Topic
    Box-and-Whisker
    In This Topic

    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:

    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.
    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
    
    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; }
    }
    
    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;
            }
        }
    }