New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Box Plot Chart

    JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember020406080100120140160Total money spent on online purchases
    • Demo Configurator
    Outliers Settings
    Extremes Settings

    The demo shows the Box Plot chart type (it uses BoxPlotSeries) in the ASP.NET AJAX Chart, which is useful for comparing distributions between different sets of numerical data. With OutliersAppearance and ExtremesAppearance properties, you can control the visual settings of certain data points, whose value is far too big or far too small in comparison to the rest of the items.

    You can manually customize the configurators and see how setting each of the properties affects the chart.

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" 
        Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.BoxPlotChart.DefaultVB" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container size-wide">
            <telerik:RadHtmlChart runat="server" ID="BoxPlotChart" Width="800" Height="500" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:BoxPlotSeries
                            DataLowerField="lower"
                            DataQ1Field="q1"
                            DataMedianField="median"
                            DataQ3Field="q3"
                            DataMeanField="mean"
                            DataUpperField="upper"
                            DataOutliersField="outliers">
                            <TooltipsAppearance Color="White"></TooltipsAppearance>
                            <Appearance FillStyle-BackgroundColor="#4f99d2"></Appearance>
                        </telerik:BoxPlotSeries>
                    </Series>
                    <XAxis>
                        <Items>
                            <telerik:AxisItem LabelText="January" />
                            <telerik:AxisItem LabelText="February" />
                            <telerik:AxisItem LabelText="March" />
                            <telerik:AxisItem LabelText="April" />
                            <telerik:AxisItem LabelText="May" />
                            <telerik:AxisItem LabelText="June" />
                            <telerik:AxisItem LabelText="July" />
                            <telerik:AxisItem LabelText="August" />
                            <telerik:AxisItem LabelText="September" />
                            <telerik:AxisItem LabelText="October" />
                            <telerik:AxisItem LabelText="November" />
                            <telerik:AxisItem LabelText="December" />
                        </Items>
                    </XAxis>
                </PlotArea>
                <ChartTitle Text="Total money spent on online purchases"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="BoxPlotChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk"></telerik:RadAjaxLoadingPanel>
        <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Outliers Settings">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox runat="server" ID="ComboBoxOutliersType" AutoPostBack="true" Label="Type">
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <qsf:NumericTextBox runat="server" ID="NumericTextBoxOutliersBorderWidth" AutoPostBack="true" Value="1" MinValue="1" MaxValue="4" Size="Medium" Label="Border width">
                                </qsf:NumericTextBox>
                                <qsf:NumericTextBox runat="server" ID="NumericTextBoxOutliersSize" AutoPostBack="true" Value="8" MinValue="8" MaxValue="14" Size="Medium" Label="Size">
                                </qsf:NumericTextBox>
                            </li>
                            <li><span class="label">Border color</span>
                                <qsf:ColorPicker runat="server" ID="ColorPickerOutliersBorderColor" AutoPostBack="true"
                                    SelectedColor="#fa9819">
                                </qsf:ColorPicker>
                            </li>
                            <li></li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Extremes Settings">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox runat="server" ID="ComboBoxExtremesType" AutoPostBack="true" Label="Type">
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <qsf:NumericTextBox runat="server" ID="NumericTextBoxExtremesBorderWidth" AutoPostBack="true" Value="1" MinValue="1" MaxValue="4" Size="Medium" Label="Border width">
                                </qsf:NumericTextBox>
                                <qsf:NumericTextBox runat="server" ID="NumericTextBoxExtremesSize" AutoPostBack="true" Value="8" MinValue="8" MaxValue="14" Size="Medium" Label="Size">
                                </qsf:NumericTextBox>
                            </li>
                            <li>
                                <label class="label">Border color</label>
                                <qsf:ColorPicker runat="server" ID="ColorPickerExtremesBorderColor" AutoPostBack="true"
                                    SelectedColor="#d41414">
                                </qsf:ColorPicker>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance