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.
The figure shown below explains the conceptual representation of DataBinding between Visifire Chart and an ObservableCollection. DataRow is a class which holds Data for a DataPoint. A DataRow defines one or more number of properties to be mapped with DataPoints according to the data-mapping-rules defined at Series level. DataRows is a collection of one or more DataRow. Every record present in the DataRows collection represents a DataPoint.
DataMapping rules which are to be specified in DataSeries are shown below:
<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>
In this example we are going to use dataRows as DataSource. Here DataSource property of the DataSeries has been set from managed code.
MyChart.Series[0].DataSource = dataRows;
Please note that I have used a DataGrid to dispaly the data present in dataRows in a tabular format. So I have bound dataRows collection with the DataGrid also. As DataGrid is bound with the collection, one can update the data present in collection just by editing the DataGrid cells. We can even directly perform Add, Remove operations with dataRows collection which will reflect in Chart as well as DataGrid.
DataRow is the class which has two properties named AxisXLabel and YValue. This class contains business logic which is required to interact with values of dataRows. You may wonder how does it know when the property value changes? The answer to this question lies in the interface called INotifyPropertyChanged which is in System.ComponentModel namespace. The DataRow class implements INotifyPropertyChanged which notifies when the business object changes. So, whenever the value changes in the DataSource, corresponding property will trigger PropertyChanged event.
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(3)
