Range Selector

While scrollbars are a traditional way of scrolling the chart, Range Selector is a more modern approach, which lets the user visualize where the selected range sits in the complete data range.

FlexChart's Range Selector lets you select a range of numeric data with lower value thumb and upper value thumb. These thumbs define the start and end values of the range. On dragging the thumb towards left (or down) on the range bar, you reduce its value, and dragging it towards the right (or up) increases the value on the range bar.

You can add Range Selector by creating an instance of the C1.Win.Chart.Interaction.RangeSelector class. The instance accepts a parameter of the C1.Win.Chart.FlexChart class type. The C1RangeSelector class inherits the C1.Win.C1Input.C1RangeSlider class. You can use the LowerValue and the UpperValue property provided by C1RangeSlider to set the lower and the upper value of the range selector respectively. The ValueChanged event fires when any of the LowerValue or the UpperValue property is changed.

To set the horizontal or the vertical orientation of the range selector, you can use the Orientation property. When the property is changed, the OrientationChanged event fires.

Here is the code snippet showing the implementation:

Visual Basic
C#

Visual Basic

Private XRangeSelector As C1.Win.Chart.Interaction.RangeSelector

Public Sub New()
    InitializeComponent()
    SetupCharts()
End Sub

Public Sub SetupRangeSelector()
    If XRangeSelector IsNot Nothing Then
        Return
    End If

    ' add X-RangeSelector
    XRangeSelector = New C1.Win.Chart.Interaction.RangeSelector(FlexChart2)

    AddHandler XRangeSelector.ValueChanged, AddressOf XRangeSelector_ValueChanged
End Sub

Private Sub XRangeSelector_ValueChanged(sender As Object, e As EventArgs)
    FlexChart1.AxisX.Min = XRangeSelector.LowerValue
    FlexChart1.AxisX.Max = XRangeSelector.UpperValue
End Sub

Private Sub SetupCharts()
    Dim rnd = New Random()
    Dim pointsCount = rnd.[Next](1, 30)

    Dim temperaturePoints = New List(Of DataItem)()
    Dim [date] As New DateTime(2016, 1, 1)
    While [date].Year = 2016
        Dim newItem = New DataItem()
        newItem.[Date] = [date]
        If [date].Month <= 8 Then
            newItem.MaxTemp = rnd.[Next](3 * [date].Month, 4 * [date].Month)
        Else
            newItem.MaxTemp = rnd.[Next]((13 - [date].Month - 2) * [date].Month, (13 - [date].Month) * [date].Month)
        End If
        newItem.MinTemp = newItem.MaxTemp - rnd.[Next](6, 8)
        newItem.MeanTemp = (newItem.MaxTemp + newItem.MinTemp) / 2
        newItem.MeanPressure = rnd.[Next](980, 1050)
        newItem.Presipitation = If(rnd.[Next](5) = 1, rnd.[Next](0, 20), 0)
        temperaturePoints.Add(newItem)
        [date] = [date].AddDays(1)
    End While

    'Setup flexChart1
    FlexChart1.BeginUpdate()
    FlexChart1.ChartType = C1.Chart.ChartType.Line
    FlexChart1.Series.Clear()

    FlexChart1.BindingX = "Date"
    FlexChart1.Series.Add(New Series() With {
    .Name = "MeanTemp",
    .Binding = "MeanTemp"
})
    FlexChart1.Series.Add(New Series() With {
    .Name = "MaxTemp",
    .Binding = "MaxTemp"
})
    FlexChart1.Series.Add(New Series() With {
    .Name = "MinTemp",
    .Binding = "MinTemp"
})
    FlexChart1.DataSource = temperaturePoints.ToArray()
    FlexChart1.EndUpdate()

    'Setup flexChart2
    FlexChart2.BeginUpdate()
    FlexChart2.ChartType = C1.Chart.ChartType.Line
    FlexChart2.Series.Clear()

    FlexChart2.BindingX = "Date"
    FlexChart2.Series.Add(New Series() With {
    .Name = "MeanTemp",
    .Binding = "MeanTemp"
})
    FlexChart2.DataSource = temperaturePoints.ToArray()
    FlexChart2.EndUpdate()
End Sub

Class DataItem
    Public Property MaxTemp() As Integer
        Get
            Return m_MaxTemp
        End Get
        Set
            m_MaxTemp = Value
        End Set
    End Property
    Private m_MaxTemp As Integer
    Public Property MinTemp() As Integer
        Get
            Return m_MinTemp
        End Get
        Set
            m_MinTemp = Value
        End Set
    End Property
    Private m_MinTemp As Integer
    Public Property MeanTemp() As Integer
        Get
            Return m_MeanTemp
        End Get
        Set
            m_MeanTemp = Value
        End Set
    End Property
    Private m_MeanTemp As Integer
    Public Property MeanPressure() As Integer
        Get
            Return m_MeanPressure
        End Get
        Set
            m_MeanPressure = Value
        End Set
    End Property
    Private m_MeanPressure As Integer
    Public Property Presipitation() As Integer
        Get
            Return m_Presipitation
        End Get
        Set
            m_Presipitation = Value
        End Set
    End Property
    Private m_Presipitation As Integer
    Public Property [Date]() As DateTime
        Get
            Return m_Date
        End Get
        Set
            m_Date = Value
        End Set
    End Property
    Private m_Date As DateTime
End Class


Private Sub FlexChart2_Rendered(sender As Object, e As RenderEventArgs)
    SetupRangeSelector()
    FlexChart1_Rendered(sender, e)
End Sub

Private Sub FlexChart1_Rendered(sender As Object, e As RenderEventArgs)
    Dim flexChart = TryCast(sender, FlexChart)
    If flexChart Is Nothing Then
        Return
    End If

    Using pen = New Pen(New SolidBrush(Color.LightGray))
        Dim rect = New Rectangle(CInt(flexChart.PlotRect.X), CInt(flexChart.PlotRect.Y), CInt(flexChart.PlotRect.Width), CInt(flexChart.PlotRect.Height))
        e.Graphics.DrawRectangle(pen, rect)
    End Using
End Sub

C1.Win.Chart.Interaction.RangeSelector XRangeSelector;

public Form1()
{
    InitializeComponent();
    SetupCharts();
}

public void SetupRangeSelector()
{
    if (XRangeSelector != null) return;

    // add X-RangeSelector
    XRangeSelector = new C1.Win.Chart.Interaction.RangeSelector(flexChart2);

    XRangeSelector.ValueChanged += XRangeSelector_ValueChanged;
}

void XRangeSelector_ValueChanged(object sender, EventArgs e)
{
    flexChart1.AxisX.Min = XRangeSelector.LowerValue;
    flexChart1.AxisX.Max = XRangeSelector.UpperValue;

}

void SetupCharts()
{
    var rnd = new Random();
    var pointsCount = rnd.Next(1, 30);

    var temperaturePoints = new List<DataItem>();
    for (DateTime date = new DateTime(2016, 1, 1); date.Year == 2016; date = date.AddDays(1))
    {
        var newItem = new DataItem();
        newItem.Date = date;
        if (date.Month <= 8)
            newItem.MaxTemp = rnd.Next(3 * date.Month, 4 * date.Month);
        else
            newItem.MaxTemp = rnd.Next((13 - date.Month - 2) * date.Month, (13 - date.Month) * date.Month);
        newItem.MinTemp = newItem.MaxTemp - rnd.Next(6, 8);
        newItem.MeanTemp = (newItem.MaxTemp + newItem.MinTemp) / 2;
        newItem.MeanPressure = rnd.Next(980, 1050);
        newItem.Presipitation = rnd.Next(5) == 1 ? rnd.Next(0, 20) : 0;
        temperaturePoints.Add(newItem);
    }

    //Setup flexChart1
    flexChart1.BeginUpdate();
    flexChart1.ChartType = C1.Chart.ChartType.Line;
    flexChart1.Series.Clear();

    flexChart1.BindingX = "Date";
    flexChart1.Series.Add(new Series() { Name = "MeanTemp", Binding = "MeanTemp" });
    flexChart1.Series.Add(new Series() { Name = "MaxTemp", Binding = "MaxTemp" });
    flexChart1.Series.Add(new Series() { Name = "MinTemp", Binding = "MinTemp" });
    flexChart1.DataSource = temperaturePoints.ToArray();
    flexChart1.EndUpdate();

    //Setup flexChart2
    flexChart2.BeginUpdate();
    flexChart2.ChartType = C1.Chart.ChartType.Line;
    flexChart2.Series.Clear();

    flexChart2.BindingX = "Date";
    flexChart2.Series.Add(new Series() { Name = "MeanTemp", Binding = "MeanTemp" });
    flexChart2.DataSource = temperaturePoints.ToArray();
    flexChart2.EndUpdate();
}

class DataItem
{
    public int MaxTemp { get; set; }
    public int MinTemp { get; set; }
    public int MeanTemp { get; set; }
    public int MeanPressure { get; set; }
    public int Presipitation { get; set; }
    public DateTime Date { get; set; }
}

private void flexChart2_Rendered(object sender, RenderEventArgs e)
{
    SetupRangeSelector();
    flexChart1_Rendered(sender, e);
}

private void flexChart1_Rendered(object sender, RenderEventArgs e)
{
    var flexChart = (sender as FlexChart);
    if (flexChart == null) return;

    using (var pen = new Pen(new SolidBrush(Color.LightGray)))
    {
        var rect = new Rectangle(
            (int)flexChart.PlotRect.X,
            (int)flexChart.PlotRect.Y,
            (int)flexChart.PlotRect.Width,
            (int)flexChart.PlotRect.Height
            );
        e.Graphics.DrawRectangle(pen, rect);
    }
}