Background Image
The SettingsBackground property provides access to options related to the range selector's background.
<dx:BootstrapRangeSelector runat="server" SelectionStart="2017/8/29 08:00:00" SelectionEnd="2017/8/29 17:00:00" TitleSettings-Text="Select a Time Period">
<SettingsBackground ImageUrl="../images/RangeImage.png" ImageLocation="Full" />
<SettingsScale ValueType="System.DateTime" StartValue="2017/8/29 00:00:00" EndValue="2017/8/30 00:00:00"
TickIntervalUnit="Hour" TickInterval="2" MinorTickIntervalUnit="Minute" MinorTickCssClass="minor-tick" MinorTickInterval="30" PlaceholderHeight="20">
<Label>
<Format Type="ShortTime" />
</Label>
</SettingsScale>
<SettingsSliderMarker PlaceholderHeight="30">
<Format Type="ShortTime" />
</SettingsSliderMarker>
</dx:BootstrapRangeSelector>
This demo illustrates how you can apply custom text formatting to various elements of the Range Selector control.
In this demo, the format of the text displayed by the slider marker is customized using a client callback function assigned to the SettingsSliderMarker.OnClientCustomizeText property.
In the same way, custom formatting is applied to scale labels. Additionally, the SettingsScale.Label.Format.Precision property is used to specify the precision of the displayed values.
<dx:BootstrapRangeSelector runat="server" TitleSettings-Text="Select a Lead Concentration in Water">
<SettingsSliderMarker OnClientCustomizeText="customizeMarkerText">
<Format Type="FixedPoint" Precision="4" />
</SettingsSliderMarker>
<SettingsScale ValueType="System.Double" StartValue="0.004563" EndValue="0.04976" TickInterval="0.005" MinorTickInterval="0.001">
<Label OnClientCustomizeText="customizeMarkerText">
<Format Type="FixedPoint" Precision="3" />
</Label>
</SettingsScale>
<SettingsBehavior SnapToTicks="false" />
</dx:BootstrapRangeSelector>
function customizeMarkerText(scaleValue){
return scaleValue.valueText + " mg/L";
}
Background Chart
The Range Selector control can display a data-bound chart on top of the background. You can configure the displayed chart using the Chart property. To show the chart without a background, set the SettingsBackground.Visible property to false.
Select a Range in the CPU Usage History
<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/cpuusage.json" SelectionStart="2" SelectionEnd="7" TitleSettings-Text="Select a Range in the CPU Usage History">
<Chart TopIndent="0.05" BottomIndent="0.05">
<SeriesCollection>
<dx:BootstrapChartLineSeries ArgumentField="x" ValueField="y" CssClass="cpu-series" />
</SeriesCollection>
</Chart>
<SettingsBackground CssClass="cpu-range-background" />
<SettingsSliderMarker Visible="false" />
<SettingsScale ValueType="System.Decimal" TickInterval="1" MinorTickInterval="0.5">
<Label OnClientCustomizeText="customizeLabelText" />
</SettingsScale>
</dx:BootstrapRangeSelector>
function customizeLabelText(scaleValue){
return scaleValue.valueText + " s";
}
Chart Series Template
This demo illustrates the capability of the Range Selector to display the Chart with series customized using a series template. The Chart.SettingsSeriesTemplate.OnClientCustomizeSeries property specifies a callback function that returns a series object with individual series settings.
<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/oil.json" TitleSettings-Text="Select a Year Period">
<Chart TopIndent="0.05" BottomIndent="0.05">
<SettingsSeriesTemplate NameField="country" OnClientCustomizeSeries="customizeSeries" />
<SettingsCommonSeries ArgumentField="year" ValueField="oil" Type="Spline" />
</Chart>
<SettingsScale ValueType="System.Decimal" StartValue="1970" TickInterval="1" MinorTickInterval="1" MinorTickVisible="false" />
</dx:BootstrapRangeSelector>
function customizeSeries(valueFromNameField){
return valueFromNameField === "USA" ? { color: "red" } : {};
}