FlexChart | ComponentOne
FlexChart / Working with FlexChart / End-User Interaction / Range Selector
In This Topic
    Range Selector
    In This Topic

    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.

    In FlexChart, you can work with Range Selector by creating an instance of the C1.WPF.Chart.Interaction.C1RangeSelector class and adding it to the Layers collection of the chart by using the Layers property of C1FlexChart. The C1RangeSelector class inherits the C1.WPF.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:

        <c1:C1RangeSelector x:Name="rangeSelector" Grid.Row="4" Margin="110 10 0 10"/>
    Copy Code
    void OnChartRendered(object sender, RenderEventArgs e)
        var flexChart = sender as C1FlexChart;
        if (flexChart == null)
        var rect = flexChart.PlotRect;
        e.Engine.SetStroke(new SolidColorBrush(Colors.DimGray));
        e.Engine.DrawRect(rect.X, rect.Y, rect.Width, rect.Height);

    Copy Code
    Private Sub OnChartRendered(sender As Object, e As RenderEventArgs)
        Dim flexChart = TryCast(sender, C1FlexChart)
        If flexChart Is Nothing Then
        End If
        Dim rect = flexChart.PlotRect
        e.Engine.SetStroke(New SolidColorBrush(Colors.DimGray))
        e.Engine.DrawRect(rect.X, rect.Y, rect.Width, rect.Height)
    End Sub