Skip to main content

TimeSpanChartRangeControlClientGridOptions.SnapAlignment Property

Specifies the measurement unit to which selection thumbs of the range control are snapped.

Namespace: DevExpress.XtraEditors

Assembly: DevExpress.XtraEditors.v24.2.dll

Declaration

[XtraSerializableProperty]
public RangeControlTimeSpanGridAlignment SnapAlignment { get; set; }

Property Value

Type Description
RangeControlTimeSpanGridAlignment

A RangeControlTimeSpanGridAlignment enumeration value that represents the alignment interval of selection thumbs.

Available values:

Name Description
Millisecond

Specifies a millisecond as the time-span unit to which chart grid lines should be aligned.

Second

Specifies a second as the time-span unit to which chart gridlines should be aligned.

Minute

Specifies a minute as the time-span unit to which chart grid lines should be aligned.

Hour

Specifies an hour as the time-span unit to which chart grid lines should be aligned.

Day

Specifies a day as the time-span unit to which chart gridlines should be aligned.

Property Paths

You can access this nested property as listed below:

Object Type Path to SnapAlignment
TimeSpanChartRangeControlClient
.GridOptions .SnapAlignment

Remarks

Use the SnapAlignment property to snap the selection thumbs to the range interval when dragging them in the range control’s viewport.

Example

This example demonstrates how to configure a range control with the time-span chart client to display a chart with time-span data in the range control’s background.

In order to provide data to a chart time-span range control client, access the ChartRangeControlClientDataProvider object using the ChartRangeControlClientBase.DataProvider property and assign a data source to the ChartRangeControlClientDataProvider.DataSource property. Then specify the required data fields via the ChartRangeControlClientDataProvider.ArgumentDataMember, ChartRangeControlClientDataProvider.ValueDataMember, and ChartRangeControlClientDataProvider.SeriesDataMember (optional) properties.

In the current example, a time-span chart client is bound to a simple data table containing three columns (“Argument”, “Value”, and “Series”).

In addition, this example shows how to customize chart client common settings (e.g., change the time-span range, customize template view and grid options).

using DevExpress.XtraEditors;
using System;
using System.Data;
using System.Drawing;

namespace TimeSpanChartRangeClient {
    public partial class Form1 : XtraForm {
        public Form1() {
            InitializeComponent();

            // Assign a time-span chart client to the Range control. 
            rangeControl1.Client = timeSpanChartRangeControlClient1;

            // Generate a data table and bind the time-span client to it.
            timeSpanChartRangeControlClient1.DataProvider.DataSource = CreateChartData(100, 2);

            // Specify data members to bind the client.
            timeSpanChartRangeControlClient1.DataProvider.ArgumentDataMember = "Argument";
            timeSpanChartRangeControlClient1.DataProvider.ValueDataMember = "Value";
            timeSpanChartRangeControlClient1.DataProvider.SeriesDataMember = "Series";

            // Specify the chart range control client view.       
            AreaChartRangeControlClientView areaView = new AreaChartRangeControlClientView();
            timeSpanChartRangeControlClient1.DataProvider.TemplateView = areaView;

            // Customize the area view appearance. 
            areaView.AreaOpacity = 90;
            areaView.Color = Color.Aqua;
            areaView.ShowMarkers = true;
            areaView.MarkerSize = 5;
            areaView.MarkerColor = Color.Red;

            // Format labels of the time-span chart range control client. 
            timeSpanChartRangeControlClient1.GridOptions.LabelFormat = "c";

            // Specify the palette name to get a nice-looking chart.
            timeSpanChartRangeControlClient1.PaletteName = "Office";

            // Customize grid alignment, grid spacing, snap spacing and snap alignment of the chart range control client.
            timeSpanChartRangeControlClient1.GridOptions.GridAlignment = RangeControlTimeSpanGridAlignment.Hour;
            timeSpanChartRangeControlClient1.GridOptions.GridSpacing = 1;
            timeSpanChartRangeControlClient1.GridOptions.SnapSpacing = 1;
            timeSpanChartRangeControlClient1.GridOptions.SnapAlignment = RangeControlTimeSpanGridAlignment.Hour;

            // Change the time-span range of the chart range control client.
            timeSpanChartRangeControlClient1.Range.Min = TimeSpan.FromHours(9);
            timeSpanChartRangeControlClient1.Range.Max = TimeSpan.FromHours(18);
        }
        private DataTable CreateChartData(int pointCount, int seriesCount) {

            // Create an empty table.
            DataTable table = new DataTable("Table1");

            // Add three columns to the table.
            table.Columns.Add("Argument", typeof(TimeSpan));
            table.Columns.Add("Value", typeof(Double));
            table.Columns.Add("Series", typeof(string));

            // Add data rows to the table.
            Random rand = new Random(10);
            DataRow row = null;
            double value = 0;

            for (int seriesIndex = 0; seriesIndex < seriesCount; seriesIndex++) {
                for (int pointIndex = 0; pointIndex < pointCount; pointIndex++) {
                    value += (rand.NextDouble() - 0.3);
                    row = table.NewRow();
                    row["Argument"] = TimeSpan.FromMinutes(pointIndex * 30);
                    row["Value"] = Math.Sin(pointIndex) + value;
                    row["Series"] = seriesIndex.ToString();
                    table.Rows.Add(row);
                }
            }
            return table;
        }
    }
}
See Also