Version

Binding to Live Data

Purpose

This topic demonstrates how to bind data to the XamFinancialChart control. At the end of each section, a complete code sample is provided.

Introduction

The procedure below demonstrates how to bind the XamFinancialChart control to live data. The XamFinancialChart allows you to bind to any object that implements the IEnumerable interface. Nested collections that implement ICollection and IEnumerable are also supported.

Supported Chart Types

The ChartType property enables you to choose which series type you wish to display.

Supported series types:

  • Bar

  • Candle

  • Column

  • Line

Requirements

Following are the general requirements for adding the XamFinancialChart control.

Add the following NuGet package reference to your application:

  • Infragistics.WPF.FinancialChart

For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

In XAML:

xmlns:ig="http://schemas.infragistics.com/xaml"

In C#:

using Infragistics.Controls.Charts;

In VB:

Imports Infragistics.Controls.Charts

Preview Binding to Data

The XamFinancialChart control as implemented by the binding to data sample code:

financialchart wpf livedata.png

Overview Binding to Data

  1. Defining a Data Model

  2. Adding an Instance of the XamFinancialChart control

  3. (Optional) Verifying the result

Steps – Binding to Data

Define Data

Create a class to model the data:

When the ItemsSource implements INotifyCollectionChanged, the chart will respond to the CollectionChanged events.

Also as long as the objects in the ItemsSource implement INotifyPropertyChanged, the chart will respond to the PropertyChanged events.

In C#:

public class Price : ObservableModel
{
    private DateTime _time;
    private double _open;
    private double _high;
    private double _low;
    private double _close;
    private double _volume;

    public DateTime Time
    {
        get { return _time; }
        set
        {
            if (_time != value)
            {
                _time = value;
                OnPropertyChanged();
            }
        }
    }
    public double Open
    {
        get { return _open; }
        set
        {
            if (_open != value)
            {
                _open = value;
                OnPropertyChanged();
            }
        }
    }
    public double High
    {
        get { return _high; }
        set
        {
            if (_high != value)
            {
                _high = value;
                OnPropertyChanged();
            }
        }
    }
    public double Low
    {
        get { return _low; }
        set
        {
            if (_low != value)
            {
                _low = value;
                OnPropertyChanged();
            }
        }
    }
    public double Close
    {
        get { return _close; }
        set
        {
            if (_close != value)
            {
                _close = value;
                OnPropertyChanged();
            }
        }
    }
    public double Volume
    {
        get { return _volume; }
        set
        {
            if (_volume != value)
            {
                _volume = value;
                OnPropertyChanged();
            }
        }
    }

    public string Label { get { return this.Time.ToShortDateString(); } }
}

public class ObservableModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

In Visual Basic:

Public Class Price
    Inherits ObservableModel

    Private _time As DateTime
    Private _open As Double
    Private _high As Double
    Private _low As Double
    Private _close As Double
    Private _volume As Double

    Public Property Time As DateTime
        Get
            Return Me._time
        End Get
        Set
            If (Me._time <> value) Then
                Me._time = value
                OnPropertyChanged
            End If
        End Set
    End Property

    Public Property Open As Double
        Get
            Return Me._open
        End Get
        Set
            If (Me._open <> value) Then
                Me._open = value
                OnPropertyChanged
            End If
        End Set
    End Property

    Public Property High As Double
        Get
            Return Me._high
        End Get
        Set
            If (Me._high <> value) Then
                Me._high = value
                OnPropertyChanged
            End If
        End Set
    End Property

    Public Property Low As Double
        Get
            Return Me._low
        End Get
        Set
            If (Me._low <> value) Then
                Me._low = value
                OnPropertyChanged
            End If
        End Set
    End Property

    Public Property Close As Double
        Get
            Return Me._close
        End Get
        Set
            If (Me._close <> value) Then
                Me._close = value
                OnPropertyChanged
            End If
        End Set
    End Property

    Public Property Volume As Double
        Get
            Return Me._volume
        End Get
        Set
            If (Me._volume <> value) Then
                Me._volume = value
                OnPropertyChanged
            End If
        End Set
    End Property

    Public ReadOnly Property Label As String
        Get
            Return Me.Time.ToShortDateString
        End Get
    End Property
End Class

Public Class ObservableModel
    Implements INotifyPropertyChanged

    Public Event PropertyChanged As PropertyChangedEventHandler

    Public Sub OnPropertyChanged(Optional ByVal propertyName As String = "")
        If (Not (PropertyChanged) Is Nothing) Then
            PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
        End If

    End Sub
End Class

Add an instance of the XamFinancialChart Control

Add an instance of the XamFinancialChart and bind it to the data:

In XAML:

<Window.DataContext>
    <local:Data />
</Window.DataContext>
<Grid>
    <ig:XamFinancialChart ItemsSource="{Binding}" />
</Grid>

Finally you will want to update your data source with the new data you pull from your service.

(Optional) Verify the Result

Run your application to verify the result. If you have successfully bound the XamFinancialChart control to the data collection, the resulting chart will look like the one shown above.

Related Content

Topics

The following topics provide additional information related to this topic:

Topic Purpose

This topic provides an overview of binding data to the Financial Chart control.

This article explains how to bind a single set data to the Financial Chart control.

This article explains how to bind multiple sets data to the Financial Chart control.