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

Range Column Chart

  • Demo Configurator

This example demonstrates an ASP.NET AJAX Chart control, configured asa Range Column Chart by using the RangeColumnSeries series type. This chart type visualizes the data as vertical bars, which height varies according to its From and To values. With RadHtmlChart you have many options that enable you to change the appearance of your range column chart and fully customize it.

The distance between the series items and the series categories can be configured via the properties Gap and Spacing.

Related Resources

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.ColumnChart.DefaultVB" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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="RangeColumnChart" Width="800" Height="500">
            <ChartTitle Text="Avarage temperature">
                <Appearance Align="Center" Position="Top"></Appearance>
            </ChartTitle>
            <PlotArea>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="Jan"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Feb"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Mar"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Apr"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="May"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Jun"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Jul"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Aug"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Sep"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Oct"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Nov"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Dec"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <Series>
                    <telerik:RangeColumnSeries>
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="4" To="13" />
                            <telerik:RangeSeriesItem From="5" To="15" />
                            <telerik:RangeSeriesItem From="7" To="16" />
                            <telerik:RangeSeriesItem From="9" To="18" />
                            <telerik:RangeSeriesItem From="12" To="21" />
                            <telerik:RangeSeriesItem From="16" To="24" />
                            <telerik:RangeSeriesItem From="19" To="28" />
                            <telerik:RangeSeriesItem From="19" To="28" />
                            <telerik:RangeSeriesItem From="17" To="26" />
                            <telerik:RangeSeriesItem From="13" To="22" />
                            <telerik:RangeSeriesItem From="8" To="17" />
                            <telerik:RangeSeriesItem From="6" To="14" />
                        </SeriesItems>
                        <LabelsAppearance Visible="true">
                            <FromLabelsAppearance>
                                <ClientTemplate>#=value.from# &deg;C</ClientTemplate>
                            </FromLabelsAppearance>
                            <ToLabelsAppearance>
                                <ClientTemplate>#=value.to# &deg;C</ClientTemplate>
                            </ToLabelsAppearance>
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White">
                            <ClientTemplate>Avg Min Temp : #= value.from # &deg;C<br>Avg Max Temp : #= value.to # &deg;C</ClientTemplate>
                        </TooltipsAppearance>
                    </telerik:RangeColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RangeColumnChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="LabelsPosition" AutoPostBack="true" Size="Medium" Label="From-Labels Position"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="ToLabelsPosition" AutoPostBack="true" Size="Medium" Label="To-Labels Position"></qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox runat="server" ID="ChartGap" Value="1.5" AutoPostBack="true" Size="Narrow" Label="Gap"  MinValue="-0.9" MaxValue="5" IncrementSettings-Step="0.2"></qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance