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" />
<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.
<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.
Total: $111,558
<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.
<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>