Numeric Scale

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

<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.

<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" />
</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.

<dx:BootstrapRangeSelector ID="LogarithmicRangeScale" runat="server">
    <SettingsScale Type="Logarithmic" MinRange="1" MinorTickCount="10">
        <Label>
            <Format Type="Exponential" />
        </Label>
    </SettingsScale>
    <SettingsSliderMarker>
        <Format Type="Exponential" />
    </SettingsSliderMarker>
</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.

Total: $111,558
<dx:BootstrapRangeSelector runat="server" DataSourceID="SeafoodSalesDataSource" TitleSettings-Text="Seafood Sales">
    <SettingsScale Type="Discrete">
        <Label OverlappingBehavior="None" />
    </SettingsScale>
    <ClientSideEvents ValueChanged="onDiscreteValueChanged" />
</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.

<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