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:

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.

Visual Basic
C#

Visual Basic

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

}