ComponentOne FinancialChart for WinForms
Interaction / Range Selector
In This Topic
    Range Selector
    In This Topic

    FinancialChart's RangeSelector lets a user select a specific range of data to be displayed on the chart. A user can easily bind the RangeSelector with various types of financial charts. It is mostly used by finance industry to perform stock analysis on different data ranges.

    The RangeSelector has a left thumb (for minimum value) and right thumb (for maximum value) that lets you scroll through particular time periods on the chart. Users can change the minimum and maximum values of the RangeSelector, and adjust the visible range of data on the chart by dragging these thumbs to left or right. On dragging the thumb towards left on the range bar, you reduce its value, and dragging it towards the right increases its value on the range bar.

    To work with RangeSelector, you first need to create a namespace C1.Win.Chart.RangeSelector containing a class RangeSelector in code. Then, to use RangeSelector, you need to create an instance of the RangeSelector class.

    The following code snippet illustrates how to use RangeSelector in an application.

    Public Class DataService
    
        Public Class DataService
            Private _companies As New List(Of Company)()
    
            Public Sub New()
                _companies.Add(New Company() With {
                .Symbol = "box",
                .Name = "Box Inc"
            })
                _companies.Add(New Company() With {
                .Symbol = "fb",
                .Name = "Facebook"
            })
            End Sub
    
            Public Function GetCompanies() As List(Of Company)
                Return _companies
            End Function
    
            Public Function GetSymbolData(symbol As String) As List(Of Quote)
                Dim path As String = String.Format("FinancialChartExplorer.Resources.{0}.json", symbol)
                Dim stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(path)
                Dim ser = New System.Runtime.Serialization.Json.DataContractJsonSerializer(GetType(Quote()))
                Dim data = DirectCast(ser.ReadObject(stream), Quote())
                Return data.ToList()
            End Function
    
            Shared _ds As DataService
            Public Shared Function GetService() As DataService
                If _ds Is Nothing Then
                    _ds = New DataService()
                End If
                Return _ds
            End Function
        End Class
    
        Public Class Quote
            Public Property [date]() As String
                Get
                    Return m_date
                End Get
                Set
                    m_date = Value
                End Set
            End Property
            Private m_date As String
            Public Property high() As Double
                Get
                    Return m_high
                End Get
                Set
                    m_high = Value
                End Set
            End Property
            Private m_high As Double
            Public Property low() As Double
                Get
                    Return m_low
                End Get
                Set
                    m_low = Value
                End Set
            End Property
            Private m_low As Double
            Public Property open() As Double
                Get
                    Return m_open
                End Get
                Set
                    m_open = Value
                End Set
            End Property
            Private m_open As Double
            Public Property close() As Double
                Get
                    Return m_close
                End Get
                Set
                    m_close = Value
                End Set
            End Property
            Private m_close As Double
            Public Property volume() As Double
                Get
                    Return m_volume
                End Get
                Set
                    m_volume = Value
                End Set
            End Property
            Private m_volume As Double
        End Class
    
        Public Class Company
            Public Property Symbol() As String
                Get
                    Return m_Symbol
                End Get
                Set
                    m_Symbol = Value
                End Set
            End Property
            Private m_Symbol As String
            Public Property Name() As String
                Get
                    Return m_Name
                End Get
                Set
                    m_Name = Value
                End Set
            End Property
            Private m_Name As String
        End Class
    
    End Class
    
    public class DataService
    {
        List<Company> _companies = new List<Company>();
    
        public DataService()
        {
            _companies.Add(new Company() { Symbol = "box", Name = "Box Inc" });
            _companies.Add(new Company() { Symbol = "fb", Name = "Facebook" });
        }
    
        public List<Company> GetCompanies()
        {
            return _companies;
        }
    
        public List<Quote> GetSymbolData(string symbol)
        {
            string path = string.Format("FinancialChartExplorer.Resources.{0}.json", symbol);
            var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(path);
            var ser = new System.Runtime.Serialization.Json.DataContractJsonSerializer(typeof(Quote[]));
            var data = (Quote[])ser.ReadObject(stream);
            return data.ToList();
        }
    
        static DataService _ds;
        public static DataService GetService()
        {
            if (_ds == null)
                _ds = new DataService();
            return _ds;
        }
    }
    
    public class Quote
    {
        public string date { get; set; }
        public double high { get; set; }
        public double low { get; set; }
        public double open { get; set; }
        public double close { get; set; }
        public double volume { get; set; }
    }
    
    public class Company
    {
        public string Symbol { get; set; }
        public string Name { get; set; }
    }
    
    Partial Public Class RangeSelector
        Inherits UserControl
        Private rs As C1.Win.Chart.RangeSelector.RangeSelector
    
        Public Sub New()
            InitializeComponent()
    
            Dim dataService__1 = DataService.GetService()
            Dim data = dataService__1.GetSymbolData("fb")
    
            financialChart1.BeginUpdate()
            financialChart1.BindingX = "date"
            financialChart1.Binding = "high,low,open,close,volume"
            financialChart1.ToolTip.Content = "Date: {date}" & vbLf &
                "Open: {open}" & vbLf &
                "High: {high}" & vbLf &
                "Low: {low}" & vbLf &
                "Close: {close}"
            financialChart1.Series.Add(New FinancialSeries())
            financialChart1.ChartType = C1.Chart.Finance.FinancialChartType.Candlestick
            financialChart1.DataSource = data
            financialChart1.EndUpdate()
    
            financialChart2.BeginUpdate()
            financialChart2.BindingX = "date"
            financialChart2.Binding = "close"
            financialChart2.Series.Add(New FinancialSeries())
            financialChart2.ChartType = C1.Chart.Finance.FinancialChartType.Line
            financialChart2.DataSource = data
            financialChart2.ToolTip.Content = Nothing
    
            financialChart2.EndUpdate()
        End Sub
    
        Private Sub RangeSelector_Load(sender As Object, e As EventArgs)
            AddHandler financialChart2.Rendered, AddressOf financialChart2_Rendered
        End Sub
    
        Private Sub financialChart2_Rendered(sender As Object, e As C1.Win.Chart.RenderEventArgs)
            If rs Is Nothing AndAlso financialChart2.AxisX.ActualMin <> financialChart2.AxisX.ActualMax Then
                rs = New C1.Win.Chart.RangeSelector.RangeSelector(financialChart2)
                AddHandler rs.ValueChanged, AddressOf rs_ValueChanged
            End If
        End Sub
    
        Private Sub rs_ValueChanged(sender As Object, e As EventArgs)
    
            financialChart1.AxisX.Min = rs.LowerValue
            financialChart1.AxisX.Max = rs.UpperValue
        End Sub
    End Class
    
    public partial class RangeSelector : UserControl
    {
        C1.Win.Chart.RangeSelector.RangeSelector rs;
    
        public RangeSelector()
        {
            InitializeComponent();
    
            var dataService = DataService.GetService();
            var data = dataService.GetSymbolData("fb");
    
            financialChart1.BeginUpdate();
            financialChart1.BindingX = "date";
            financialChart1.Binding = "high,low,open,close,volume";
            financialChart1.ToolTip.Content = "Date: {date}\nOpen: {open}\nHigh: {high}\nLow: {low}\nClose: {close}";
            financialChart1.Series.Add(new FinancialSeries());
            financialChart1.ChartType = C1.Chart.Finance.FinancialChartType.Candlestick;
            financialChart1.DataSource = data;
            financialChart1.EndUpdate();
    
            financialChart2.BeginUpdate();
            financialChart2.BindingX = "date";
            financialChart2.Binding = "close";
            financialChart2.Series.Add(new FinancialSeries());
            financialChart2.ChartType = C1.Chart.Finance.FinancialChartType.Line;
            financialChart2.DataSource = data;
            financialChart2.ToolTip.Content = null;
            financialChart2.EndUpdate();
    
        }
    
        private void RangeSelector_Load(object sender, EventArgs e)
        {
            financialChart2.Rendered += financialChart2_Rendered;
        }
    
        void financialChart2_Rendered(object sender, C1.Win.Chart.RenderEventArgs e)
        {
            if (rs == null && financialChart2.AxisX.ActualMin != financialChart2.AxisX.ActualMax)
            {
                rs = new C1.Win.Chart.RangeSelector.RangeSelector(financialChart2);
                rs.ValueChanged += rs_ValueChanged;
            }
        }
    
        void rs_ValueChanged(object sender, EventArgs e)
        {
    
            financialChart1.AxisX.Min = rs.LowerValue;
            financialChart1.AxisX.Max = rs.UpperValue;
        }
    }