Blazor | ComponentOne
Controls / FlexChart / Chart Types / Statistical Charts / Box Whisker
In This Topic
    Box Whisker
    In This Topic

    Box-and-Whisker charts are the statistical charts that display the distribution of numerical data through quartiles, means and outliers. As the name suggests, these values are represented using boxes and whiskers where boxes show the range of quartiles (lower quartile, upper quartile and median) while whiskers indicate the variability outside the upper and lower quartiles. Any point outside the whiskers is said to be an outlier. These charts are useful for comparing distributions between many groups or data sets. For instance, you can easily display the variation in monthly temperature of two cities.

    Box Whisker

    In FlexChart, Box-and-Whisker can be implemented using the BoxWhisker class which represents a Box-and-Whisker series. FlexChart also provides options to specify whether to display outliers, inner points, mean line and mean marks through ShowOutliers, ShowInnerPoints, ShowMeanLine and ShowMeanMarks properties respectively.

    To create a box-and-whisker chart through code, use the following code:

    Razor
    Copy Code 
    @page "/FlexChart/BoxWhisker"
@using C1.Chart;
@using C1.Blazor.Chart;
@using C1.Blazor.Input;

<FlexChart Class="chart" BindingX="Quarter" ItemsSource="Data">
    <SeriesCollection>
        <C1.Blazor.Chart.BoxWhisker Name="Experiment 1" Binding="Value1" ShowOutliers="true" />
        <C1.Blazor.Chart.BoxWhisker Name="Experiment 2" Binding="Value2" ShowOutliers="true" />
    </SeriesCollection>
    <AxisCollection>
        <Axis AxisType="AxisType.Y" Min="0" Max="1500" Position="Position.Left" AxisLine="false" MajorGrid="true" />
    </AxisCollection>
</FlexChart>

@code {
    List<DataSource.QuarterData> Data { get; set; }

    protected override void OnInitialized()
    {
        Data = DataSource.GetData();
    }

    public class DataSource
    {
        private static Random rnd = new Random();

        public class QuarterData
        {
            public string Quarter { get; set; }
            public double Value1 { get; set; }
            public double Value2 { get; set; }
        }

        public static List<QuarterData> GetData(int rangeMin = 500, int rangeMax = 1000)
        {
            var names = "Q1,Q2,Q3,Q4".Split(',');
            var data = new List<QuarterData>();
            for (int j = 0; j < 100; j++)
            {
                for (int i = 0; i < names.Length; i++)
                {
                    var item = new QuarterData
                    {
                        Quarter = names[i],
                        Value1 = rnd.Next(rangeMin, rangeMax),
                        Value2 = rnd.Next(rangeMin, rangeMax)
                    };
                    data.Add(item);
                }
            }

            // add some outliers
            for (int j = 0; j < 5; j++)
            {
                for (int i = 0; i < names.Length; i++)
                {
                    var item = new QuarterData
                    {
                        Quarter = names[i],
                        Value1 = rnd.Next(0, 1500),
                        Value2 = rnd.Next(0, 1500),
                    };

                    data.Add(item);
                }
            }

            return data;
        }
    }
}