Chart Clients for the Range Control

• Aug 28, 2024
• 6 minutes to read

This document lists the chart client types and explains how to use them in a Range control.

Chart Clients are used to visualize numeric or date-time data within the range control’s viewport. Clients interact with the Range control via the IRangeControlClient interface.

Chart Range Control Clients are divided into two groups:

• Standalone Chart Range Control Clients
• Chart Range Control Client bound to a Chart Control

Common Information

The Client uses one of the following views to represent data when data is bound to a Client directly and when data is provided from the Chart’s series:

Note

Chart clients show an Area view by default.

The following dependency properties configure Chart Range Control Client appearance:

Standalone Chart Range Control Clients

A Standalone Chart Range Control Client uses its ItemsSource property to draw a chart in the Range Control. The following standalone chart clients are available:

• NumericChartRangeControlClient - displays numeric data in the Range control’s background.

• DateTimeChartRangeControlClient – displays date-time data within the Range control’s viewport.

• TimeSpanChartRangeControlClient - displays time-span data within the Range control’s viewport.

See the Range Control section for more information.

To add a chart client (numeric chart client or date-time chart client) to the Range control, do one of the following:

• Drag the NumericChartRangeControlClient (DateTimeChartRangeControlClient or TimeSpanChartRangeControlClient) from the DX.25.2: Common Controls toolbox tab to a form with a Range control.
• Click the Range control’s smart tag, and in its actions list, select the NumericChartRangeControlClient ( DateTimeChartRangeControlClient or TimeSpanChartRangeControlClient ) in the Client combo box.

After adding the numeric chart client, your XAML should appear as follows:

• XAML

<Window  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Custom="http://schemas.devexpress.com/winfx/2008/xaml/charts/rangecontrolclient"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
        xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="NumericRangeControlClient.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxe:RangeControl>
            <dxe:RangeControl.Client>
                <Custom:NumericChartRangeControlClient/>
            </dxe:RangeControl.Client>
        </dxe:RangeControl>
    </Grid>
</Window>

The RangeControl.Client property is automatically set to NumericChartRangeControlClient (or DateTimeChartRangeControlClient).

To display data in chart clients, you need to bind the client to a data source using the following properties:

Note

When you bind a numeric chart range control client to simple type objects (short, integer, long, double, decimal, float types, etc.), for example, to an array of simple objects, you do not need to use ChartRangeControlClient.ArgumentDataMember and ChartRangeControlClient.ValueDataMember properties. In this case, the numeric chart client automatically treats simple type objects’ values as chart values. As a result, the data values are shown in the same order in which elements are added to the array.

Specify the ChartRangeControlClient.ArgumentDataMember property if you need to display numeric points sorted by arguments in the ascending order, for example, from the collection.

To assign a view type to a numeric chart client or date-time chart client, set its ChartRangeControlClient.View property to the RangeControlClientView descendant representing the current chart view.

See the following examples to learn more about how to use the chart client for the range control:

• How to: Bind a Numeric Chart Range Control Client to an Array of Simple Type Objects
• How to: Bind a Numeric Chart Range Control Client to a List of Custom Objects
• How to: Bind a Date-Time Chart Range Control Client to a List of Custom Objects

Chart Range Control Client bound to a Chart Control

The Chart Bound Range Control Client displays data from chart series in a Range Control and allows scrolling and zooming a chart. The Range control can visualize only the primary axes data of the bound chart.

The following code demonstrates how to configure the Chart Bound Range Control Client’s behavior:

• XAML

<dxe:RangeControl AllowZoom="False">
    <dxcr:ChartBoundRangeControlClient Chart="{Binding ElementName=chart}" ThumbLabelFormatString="{}{0:dd MMM yyyy}">
        <dxcr:ScaleOptions LabelFormat="{}{0:MMM yyyy}">
            <dxcr:ScaleOptions.GridBehavior>
                <dxcr:ManualGridBehavior Alignment="Month" Spacing="20"/>
            </dxcr:ScaleOptions.GridBehavior>
            <dxcr:ScaleOptions.SnapBehavior>
                <dxcr:AutoSnapBehavior/>
            </dxcr:ScaleOptions.SnapBehavior>
        </dxcr:ScaleOptions>
    </dxcr:ChartBoundRangeControlClient>
</dxe:RangeControl>

The code above uses the following classes and members:

The Chart Bound Client can use one of the following Grid Behaviors :

The following predefined Snap Behaviors specifies how the Range control’s selected range is aligned:

To configure how a Range Control Client displays the bound Chart’s series, use the following code:

• XAML

<dxc:StockSeries2D DisplayName="EURUSD" DataSource="{Binding EurUsdRates}" 
                   ArgumentDataMember="TimeStamp" ValueDataMember="Rate">
     <dxc:StockSeries2D.RangeControlOptions>
        <dxcr:RangeControlOptions ValueLevel="Close">
            <dxcr:RangeControlOptions.View>
                <dxcr:RangeControlClientLineView ShowMarkers="False"/>
            </dxcr:RangeControlOptions.View>
        </dxcr:RangeControlOptions>
     </dxc:StockSeries2D.RangeControlOptions>
</dxc:StockSeries2D>

The following classes and members allow to configure the appearance of a series within the Range Control: