HtmlChart - Box Plot Chart

Demo Configurator

Outliers Settings
Extremes Settings
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo shows the Box Plot chart type (it uses BoxPlotSeries) in Telerik ASP.NET 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" 
    Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.BoxPlotChart.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?