HtmlChart - Range Column Chart

Demo Configurator

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

This example demonstrates a RadHtmlChart 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

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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="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"></qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?