Numeric Scale

The Continuous scale type is used by default when the scale displays numeric or date-time values.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/productweight.json" SelectionStart="1" SelectionEnd="2" TitleSettings-Text="Select a Product Weight">
    <SettingsScale Type="Continuous" ValueType="System.Decimal" TickInterval="1" />
    <Chart>
        <SettingsCommonSeries ArgumentField="weight" />
        <SeriesCollection>
            <dx:BootstrapChartSplineSeries ValueField="appleCost" CssClass="apple-series" />
            <dx:BootstrapChartSplineSeries ValueField="orangeCost" CssClass="orange-series" />
        </SeriesCollection>
    </Chart>
</dx:BootstrapRangeSelector>

Date-Time Scale

This demo illustrates the use of a date-time scale. In this example, the SettingsScale.MinRange and SettingsScale.MaxRange properties are set to prevent an end-user from selecting a vacation period shorter than a week and longer than 31 days. To select a specific month, click between the corresponding scale markers.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapRangeSelector runat="server" SelectionStart="2017/1/5" SelectionEnd="2017/2/1" TitleSettings-Text="Select a Vacation Period">
    <SettingsScale Type="Continuous" ValueType="System.DateTime" StartValue="2017/1/1" EndValue="2017/6/30"
        RangeIntervalUnit="Day" MinRange="7" MaxRange="31"
        TickIntervalUnit="Week" TickInterval="1"
        MinorTickIntervalUnit="Day" MinorTickInterval="1" MinorTickVisible="false" />
    <SettingsSliderMarker>
        <Format Type="MonthAndDay" />
    </SettingsSliderMarker>
</dx:BootstrapRangeSelector>

Logarithmic Scale

In this demo, a logarithmic scale is used to display a range of rapidly growing values. Each scale tick represents a number (logarithm base) raised to a power. You can specify the logarithm base using the SettingsScale.LogarithmBase option.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapRangeSelector ID="LogarithmicRangeScale" runat="server">
    <SettingsScale Type="Logarithmic" MinRange="1" MinorTickCount="10">
        <Label>
            <Format Type="Exponential" />
        </Label>
    </SettingsScale>
    <SettingsSliderMarker>
        <Format Type="Exponential" />
    </SettingsSliderMarker>
    <Chart>
        <SeriesCollection>
            <dx:BootstrapChartAreaSeries />
        </SeriesCollection>
    </Chart>
</dx:BootstrapRangeSelector>
protected void Page_Load(object sender, EventArgs e) {
    Random randNumber = new Random();
    var data = Enumerable.Range(0, 100).Select(i =>
        new { arg = Math.Pow(10, i * 0.1), val = Math.Log10(i + 1) / Math.Log10(0.5) + (randNumber.NextDouble() - 0.5) * (100 / (i + 1)) + 10 }).ToArray();
    LogarithmicRangeScale.DataSource = data;
}

Discrete Scale

The Discrete scale type is used to select a range within a set of categories defined by string values.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapRangeSelector runat="server" DataSourceID="SeafoodSalesDataSource" TitleSettings-Text="Seafood Sales">
    <SettingsScale Type="Discrete">
        <Label OverlappingBehavior="None" />
    </SettingsScale>
    <ClientSideEvents ValueChanged="onDiscreteValueChanged" />
    <Chart>
        <SeriesCollection>
            <dx:BootstrapChartBarSeries ArgumentField="ProductName" ValueField="ProductSales" Name="Seafood">
                <Label Visible="true" Position="Outside" RectCssClass="discrete-label">
                    <Format Type="Currency" />
                </Label>
            </dx:BootstrapChartBarSeries>
        </SeriesCollection>
    </Chart>
</dx:BootstrapRangeSelector>
function onDiscreteValueChanged(s, e) {
    var data = s.GetDataSource().items(),
        total = 0,
        startIndex,
        endIndex;
    $.each(data, function(i, item){
        if (item.ProductName == e.value[0] )
            startIndex = i;
        else if (item.ProductName == e.value[1])
            endIndex = i;
    });
    if(endIndex) {
        data.slice(startIndex, endIndex + 1).forEach(
            function(item) {
                total += item.ProductSales;
        });
    } else {
        total = data[startIndex].ProductSales;
    }
    $("#total").text(Globalize.formatCurrency(total, "USD", { maximumFractionDigits: 0 }));
}

Semidiscrete Scale

The Semidiscrete scale type provides the discrete representation of continuous data. This scale type requires the SettingsScale.MinRange property to be set.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/semidiscrete.json">
    <SettingsScale Type="Semidiscrete" ValueType="System.Decimal" StartValue="0" EndValue="100" MinRange="5"/>
    <Chart>
        <SeriesCollection>
            <dx:BootstrapChartBarSeries />
        </SeriesCollection>
    </Chart>
</dx:BootstrapRangeSelector>
Screen Size
Color Themes
Demo QR Code