DataBinding provides a simple way to manipulate and interact with data. DataBinding does the clear separation between UI implementation and business logic layer. The data can be imported from any data source like database, file etc. The UI element can be any framework element like DataGrid, Chart etc to visualize the data. Connection between UI and data object results in flow of data between them. When DataBinding is done, if the data changes then UI element which is bound to the data object also changes. In the case of two ways binding, changes made to UI element will cause data object to change.

In this post I will discuss about “How DataBinding takes place at real-time”. I prefer updating the chart at real-time without manipulating the Visifire chart elements directly. I will be doing multiple operations like add, delete, update with a collection and it’s good to see the changes reflecting in the chart at real-time.

<vc:DataSeries RenderAs="Column" LabelEnabled="True" Margin="-1,0,1,0">
    <vc:DataSeries.DataMappings>
        <vc:DataMapping MemberName="AxisXLabel" Path="AxisXLabel"></vc:DataMapping>
        <vc:DataMapping MemberName="YValue" Path="YValue">
    </vc:DataSeries.DataMappings>
 </vc:DataSeries>

MyChart.Series[0].DataSource  = dataRows;

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace VisifireDataBinding
{ 

  public class DataRow : INotifyPropertyChanged
  {
    /// <summary>
    /// Selected property is used to know whether the DataRow is selected  or not
    /// </summary>
    public Boolean Selected
    {
       get
       {
          return _select;
       }
       set
       {
         _select = value;

        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs("Select"));
        }
    }

    /// <summary>
    /// AxisXLabel property
    /// </summary>
    public String AxisXLabel
    {
        get
        {
            return _axisXLabel;
        }
        set
        {
           _axisXLabel = value;

           if (PropertyChanged != null)
               PropertyChanged(this, new PropertyChangedEventArgs("AxisXLabel"));
         }
     }

     /// <summary>
     /// YValue property
     /// </summary>
     public Double YValue
     {
         get
         {
             return _yValue;
         }
         set
         {
            _yValue = value;

            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("YValue"));
         }
      }

      #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

      #endregion

      Double _yValue;
      String _axisXLabel;
      Boolean _select;
   }
}

You can find additional information about InotificationPropertyChanged here.

As a result, chart is displayed with chart contents as shown below.

DataBinding makes it easy to display “live” data.

Changes made in the DataSource also causes changes in the chart without requiring any coding on your part! Now manipulate the values in DataGrid which may include addition, removal, update of DataPoint properties.

The DataGrid after adding properties for one or more DataPoint will look like below.

The Output changes!

Above image shows the chart with newly added AxisXLabel and YValue at real-time. Notice as I change values in DataGrid, the chart gets updated automatically.

You can download the source code of the sample demo application here.

Cheers,
Team Visifire

Comments(9)