FlexChart > Working with FlexChart > End-User Interaction > Axis Scrollbar |
The presence of a large number of values or data in charts makes data interpretation difficult, especially in compact user interfaces. Axis Scrollbars solve this problem by letting you easily interpret closely related data within a specific range.
FlexChart allows you to add Axis Scrollbar to primary axes (X and Y axes) as well as secondary axes. To add Axis Scrollbar to an axis, you need to create an instance of the C1.Win.Chart.Interaction.AxisScrollbar class. The instance accepts a parameter that is an object of the C1.Win.Chart.Axis class type. In other words, you need to pass an Axis object while creating the AxisScrollbar instance to display the scrollbar for an axis.
The AxisScrollbar class provides the Maximum and the Minimum property to set the maximum and the minimum possible value of the scrollbar respectively. The class also provides the LowerValue and the UpperValue property to set the lower value and the upper value of the control respectively. The lower and upper values change when the scrollbar is resized or moved. And the ValueChanged event fires when any of the LowerValue or the UpperValue property changes.
To set the horizontal or the vertical orientation of the scrollbar, you can use the Orientation property. When the property changes, the OrientationChanged event fires.
See the following code snippet for reference:
Imports C1.Win.Chart Imports C1.Win.Chart.Interaction Imports System.Collections.Generic Imports System.ComponentModel Imports System.Data Imports System.Drawing Imports System.Linq Imports System.Text Imports System.Threading.Tasks Imports System.Windows.Forms Public Class Form1 Private _horizontalAxisScrollbar As AxisScrollbar Private _verticalAxisScrollbar As AxisScrollbar Public Sub New() InitializeComponent() SetupChart() End Sub Public Sub SetupRangeSelector() If _horizontalAxisScrollbar IsNot Nothing OrElse _verticalAxisScrollbar IsNot Nothing Then Return End If ' add horizontal AxixScrollbar _horizontalAxisScrollbar = New AxisScrollbar(flexChart1.AxisX) AddHandler _horizontalAxisScrollbar.ValueChanged, AddressOf XRangeSelector_ValueChanged ' add vartical AxixScrollbar _verticalAxisScrollbar = New AxisScrollbar(flexChart1.AxisY) _verticalAxisScrollbar.ScrollButtonsVisible = False AddHandler _verticalAxisScrollbar.ValueChanged, AddressOf YRangeSelector_ValueChanged End Sub Private Sub XRangeSelector_ValueChanged(sender As Object, e As EventArgs) flexChart1.AxisX.Min = _horizontalAxisScrollbar.LowerValue flexChart1.AxisX.Max = _horizontalAxisScrollbar.UpperValue End Sub Private Sub YRangeSelector_ValueChanged(sender As Object, e As EventArgs) flexChart1.AxisY.Min = _verticalAxisScrollbar.LowerValue flexChart1.AxisY.Max = _verticalAxisScrollbar.UpperValue End Sub Private Sub SetupChart() Dim rnd = New Random() Dim pointsCount = rnd.[Next](1, 30) Dim pointsList = New List(Of DataItem)() Dim [date] As New DateTime(DateTime.Now.Year - 3, 1, 1) While [date].Year < DateTime.Now.Year pointsList.Add(New DataItem() With { .[Date] = [date], .Series1 = rnd.[Next](100) }) [date] = [date].AddDays(1) End While flexChart1.BeginUpdate() flexChart1.Series.Clear() flexChart1.ChartType = C1.Chart.ChartType.Line flexChart1.BindingX = "Date" flexChart1.Series.Add(New Series() With { .Name = "Series1", .Binding = "Series1" }) flexChart1.DataSource = pointsList.ToArray() flexChart1.EndUpdate() End Sub Private Class DataItem Public Property Series1() As Integer Get Return m_Series1 End Get Set m_Series1 = Value End Set End Property Private m_Series1 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 flexChart1_Rendered(sender As Object, e As RenderEventArgs) SetupRangeSelector() End Sub End Class
using C1.Win.Chart; using C1.Win.Chart.Interaction; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace AxisScrollbarCS { public partial class Form1 : Form { AxisScrollbar _horizontalAxisScrollbar; AxisScrollbar _verticalAxisScrollbar; public Form1() { InitializeComponent(); SetupChart(); } public void SetupRangeSelector() { if (_horizontalAxisScrollbar != null || _verticalAxisScrollbar != null) return; // add horizontal AxixScrollbar _horizontalAxisScrollbar = new AxisScrollbar(flexChart1.AxisX); _horizontalAxisScrollbar.ValueChanged += XRangeSelector_ValueChanged; // add vartical AxixScrollbar _verticalAxisScrollbar = new AxisScrollbar(flexChart1.AxisY); _verticalAxisScrollbar.ScrollButtonsVisible = false; _verticalAxisScrollbar.ValueChanged += YRangeSelector_ValueChanged; } void XRangeSelector_ValueChanged(object sender, EventArgs e) { flexChart1.AxisX.Min = _horizontalAxisScrollbar.LowerValue; flexChart1.AxisX.Max = _horizontalAxisScrollbar.UpperValue; } void YRangeSelector_ValueChanged(object sender, EventArgs e) { flexChart1.AxisY.Min = _verticalAxisScrollbar.LowerValue; flexChart1.AxisY.Max = _verticalAxisScrollbar.UpperValue; } void SetupChart() { var rnd = new Random(); var pointsCount = rnd.Next(1, 30); var pointsList = new List<DataItem>(); for (DateTime date = new DateTime(DateTime.Now.Year - 3, 1, 1); date.Year < DateTime.Now.Year; date = date.AddDays(1)) { pointsList.Add(new DataItem() { Date = date, Series1 = rnd.Next(100) }); } flexChart1.BeginUpdate(); flexChart1.Series.Clear(); flexChart1.ChartType = C1.Chart.ChartType.Line; flexChart1.BindingX = "Date"; flexChart1.Series.Add(new Series() { Name = "Series1", Binding = "Series1" }); flexChart1.DataSource = pointsList.ToArray(); flexChart1.EndUpdate(); } class DataItem { public int Series1 { get; set; } public DateTime Date { get; set; } } private void flexChart1_Rendered(object sender, RenderEventArgs e) { SetupRangeSelector(); } } }