FlexChart > Working with FlexChart > FlexChart Elements > Series > 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. In FlexChart, the series 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.
Public Sub New() InitializeComponent() SetupChart() End Sub Private Sub InitializeComponent() Throw New NotImplementedException() End Sub Private Sub SetupChart() flexChart1.BeginUpdate() ' specify the data source flexChart1.DataSource = CreateForBoxWhisker() ' Set the property containing X values flexChart1.BindingX = "ClassName" ' clear the Series collection flexChart1.Series.Clear() ' create first Boxwhisker series and set various properties Dim boxWhiskerA As C1.Win.Chart.BoxWhisker = New BoxWhisker() boxWhiskerA.Name = "SchoolA" boxWhiskerA.Binding = "SchoolA" boxWhiskerA.QuartileCalculation = QuartileCalculation.InclusiveMedian boxWhiskerA.ShowInnerPoints = True boxWhiskerA.ShowOutliers = True boxWhiskerA.ShowMeanLine = True boxWhiskerA.ShowMeanMarks = True Dim bindAxis = New Y_AxisBinding() {New Y_AxisBinding() With { .d = 10, .str = "10 (Fail)" }, New Y_AxisBinding() With { .d = 20, .str = "20 (Fail)" }, New Y_AxisBinding() With { .d = 30, .str = "30 (Fail)" }, New Y_AxisBinding() With { .d = 40, .str = "40 (Pass)" }, New Y_AxisBinding() With { .d = 50, .str = "50 (Pass)" }, New Y_AxisBinding() With { .d = 60, .str = "60 (Pass)" }, New Y_AxisBinding() With { .d = 70, .str = "70 (Pass)" }} ' create second Boxwhisker series and set various properties Dim boxWhiskerB As C1.Win.Chart.BoxWhisker = New BoxWhisker() boxWhiskerB.Name = "SchoolB" boxWhiskerB.Binding = "SchoolB" boxWhiskerB.QuartileCalculation = QuartileCalculation.InclusiveMedian boxWhiskerB.ShowInnerPoints = True boxWhiskerB.ShowOutliers = True boxWhiskerB.ShowMeanLine = True boxWhiskerB.ShowMeanMarks = True ' create third Boxwhisker series and set various properties Dim boxWhiskerC As C1.Win.Chart.BoxWhisker = New BoxWhisker() boxWhiskerC.Name = "SchoolC" boxWhiskerC.Binding = "SchoolC" boxWhiskerC.QuartileCalculation = QuartileCalculation.InclusiveMedian boxWhiskerC.ShowInnerPoints = True boxWhiskerC.ShowOutliers = True boxWhiskerC.ShowMeanLine = True boxWhiskerC.ShowMeanMarks = True ' add the series to the Series collection flexChart1.Series.Add(boxWhiskerA) flexChart1.Series.Add(boxWhiskerB) flexChart1.Series.Add(boxWhiskerC) flexChart1.EndUpdate() End Sub ' create data source Public Shared Function CreateForBoxWhisker() 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 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 Public Class Y_AxisBinding Public Property d() As Double Get Return m_d End Get Set m_d = Value End Set End Property Private m_d As Double Public Property str() As String Get Return m_str End Get Set m_str = Value End Set End Property Private m_str As String ' public int d { get; set; } End Class
public Form1() { InitializeComponent(); SetupChart(); } void SetupChart() { flexChart1.BeginUpdate(); // specify the data source flexChart1.DataSource = CreateForBoxWhisker(); // Set the property containing X values flexChart1.BindingX = "ClassName"; // clear the Series collection flexChart1.Series.Clear(); // create first Boxwhisker series and set various properties C1.Win.Chart.BoxWhisker boxWhiskerA = new BoxWhisker(); boxWhiskerA.Name = "SchoolA"; boxWhiskerA.Binding = "SchoolA"; boxWhiskerA.QuartileCalculation = QuartileCalculation.InclusiveMedian; boxWhiskerA.ShowInnerPoints = true; boxWhiskerA.ShowOutliers = true; boxWhiskerA.ShowMeanLine = true; boxWhiskerA.ShowMeanMarks = true; var bindAxis = new Y_AxisBinding[] { new Y_AxisBinding {d=10,str="10 (Fail)"}, new Y_AxisBinding {d=20,str="20 (Fail)"}, new Y_AxisBinding {d=30,str="30 (Fail)"}, new Y_AxisBinding {d=40,str="40 (Pass)"}, new Y_AxisBinding {d=50,str="50 (Pass)"}, new Y_AxisBinding {d=60,str="60 (Pass)"}, new Y_AxisBinding {d=70,str="70 (Pass)"}, }; // create second Boxwhisker series and set various properties C1.Win.Chart.BoxWhisker boxWhiskerB = new BoxWhisker(); boxWhiskerB.Name = "SchoolB"; boxWhiskerB.Binding = "SchoolB"; boxWhiskerB.QuartileCalculation = QuartileCalculation.InclusiveMedian; boxWhiskerB.ShowInnerPoints = true; boxWhiskerB.ShowOutliers = true; boxWhiskerB.ShowMeanLine = true; boxWhiskerB.ShowMeanMarks = true; // create third Boxwhisker series and set various properties C1.Win.Chart.BoxWhisker boxWhiskerC = new BoxWhisker(); boxWhiskerC.Name = "SchoolC"; boxWhiskerC.Binding = "SchoolC"; boxWhiskerC.QuartileCalculation = QuartileCalculation.InclusiveMedian; boxWhiskerC.ShowInnerPoints = true; boxWhiskerC.ShowOutliers = true; boxWhiskerC.ShowMeanLine = true; boxWhiskerC.ShowMeanMarks = true; // add the series to the Series collection flexChart1.Series.Add(boxWhiskerA); flexChart1.Series.Add(boxWhiskerB); flexChart1.Series.Add(boxWhiskerC); flexChart1.EndUpdate(); } // create data source public static List<ClassScore> CreateForBoxWhisker() { 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; } } public class Y_AxisBinding { public double d { get; set; } public string str { get; set; } // public int d { get; set; } }