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

Range Bar Chart

  • Demo Configurator

This example demonstrates an ASP.NET AJAX Chart control, configured as a Range Bar Chart by using the RangeBarSeries series type. This chart type visualizes the data as horizontal bars, which width varies according to its From and To properties value. With RadHtmlChart you have many options that enable you to change the appearance of your range bar 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

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

<%@ 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="RangeBarChart" Width="800" Height="600">
            <ChartTitle Text="Work Schedule">
                <Appearance Align="Center" Position="Top"></Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
            <PlotArea>
                <XAxis AxisCrossingValue="0">
                    <MinorGridLines Visible="false" />
                    <Items>
                        <telerik:AxisItem LabelText="Monday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Tuesday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Wednesday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Thrusday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Friday"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <YAxis MinValue="6" MaxValue="22">
                    <LabelsAppearance DataFormatString="{0}:00"></LabelsAppearance>
                    <MinorGridLines Visible="false" />
                </YAxis>
                <Series>
                    <telerik:RangeBarSeries Name="George">
                        <TooltipsAppearance Visible="false"></TooltipsAppearance>
                        <LabelsAppearance Visible="true" Position="Center">
                            <ClientTemplate>#=series.name # #= value.from #:00 - #= value.to #:00</ClientTemplate>
                            <FromLabelsAppearance Visible="false"></FromLabelsAppearance>
                        </LabelsAppearance>
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="8" To="14" />
                            <telerik:RangeSeriesItem From="12" To="16" />
                            <telerik:RangeSeriesItem From="8" To="14" />
                            <telerik:RangeSeriesItem From="8" To="12" />
                            <telerik:RangeSeriesItem From="8" To="12" />
                        </SeriesItems>
                    </telerik:RangeBarSeries>
                    <telerik:RangeBarSeries Name="Peter">
                        <TooltipsAppearance Visible="false"></TooltipsAppearance>
                        <LabelsAppearance Visible="true" Position="Center">
                            <ClientTemplate>#=series.name # #= value.from #:00 - #= value.to #:00</ClientTemplate>
                            <FromLabelsAppearance Visible="false"></FromLabelsAppearance>
                        </LabelsAppearance>
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="14" To="18" />
                            <telerik:RangeSeriesItem From="8" To="12" />
                            <telerik:RangeSeriesItem From="10" To="16" />
                            <telerik:RangeSeriesItem From="12" To="16" />
                            <telerik:RangeSeriesItem From="12" To="18" />
                        </SeriesItems>
                    </telerik:RangeBarSeries>
                    <telerik:RangeBarSeries Name="Megan">
                        <TooltipsAppearance Visible="false"></TooltipsAppearance>
                        <LabelsAppearance Visible="true" Position="Center">
                            <ClientTemplate>#=series.name # #= value.from #:00 - #= value.to #:00</ClientTemplate>
                            <FromLabelsAppearance Visible="false"></FromLabelsAppearance>
                        </LabelsAppearance>
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="10" To="16" />
                            <telerik:RangeSeriesItem From="12" To="18" />
                            <telerik:RangeSeriesItem From="12" To="18" />
                            <telerik:RangeSeriesItem From="10" To="18" />
                            <telerik:RangeSeriesItem From="10" To="16" />
                        </SeriesItems>
                    </telerik:RangeBarSeries>
                </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="RangeBarChart" 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 runat="server" Size="Medium">
                    <qsf:ComboBox runat="server" ID="LabelsPosition" AutoPostBack="true" Size="Medium" Label="Labels Position"></qsf:ComboBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn 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="-1" MaxValue="5" IncrementSettings-Step="0.2"></qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="ChartSpacing" Value="0.4" Width="60" AutoPostBack="true" Size="Narrow" Label="Spacing"  MinValue="-1" 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