FlexChart > Working with FlexChart > End-User Interaction > 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: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); } }