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 Axis (X and Y axis) as well as secondary Axis. 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:

Visual Basic
C#

Visual Basic

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();
        }
    }
}