Realtime Update Using DataBinding

somnath

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.

Get Microsoft Silverlight

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.
Visifire-Chart-Realtime-Update-Using-DataBinding.xap
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

  1. saravana
    July 27th, 2010 | 8:26 am

    Hi,

    It is a good eye opener for me.

    I want to implement the above kind of feature in asp.net mvc web application with visifire(Silverlight) chat. Is it possible? Do you have any samples for this?

  2. August 18th, 2010 | 5:25 am

    try add many points, say 30, and delete some points,say 10, and try add some points agaign, you ‘ll find the point is overlapping.
    is there any workaround?
    in my situation, i want to keep the count of points to some constant value, like 30 points, and i need to remove the old points, and add new points, but visifire seems buggy.

  3. August 18th, 2010 | 5:28 am

    i just found that the xlabel may duplicate, so i download the source code, and change some bit

    DataRows.Add(new DataRow() { AxisXLabel = “Label” + random.Next(100000), YValue = random.Next(10, 100) });

    this can make label name unique. but still the bug come out

  4. Somnath
    August 18th, 2010 | 7:26 am

    Hi Kevin,

    AxisXLabel may duplicate because index is generated randomly. If you want to generate unique index you can take an integer variable.

    DataRows.Add(new DataRow() { AxisXLabel = “Label” + (index++), YValue = random.Next(10, 100) });

  5. August 19th, 2010 | 12:41 am

    hi, Somnath, thanks for your quick reply.
    i did generate unique index for xlabel, but still the bug is there. the new points will overlap with the last existing point.
    time by time, there will be only one point in AxisX, but multiple points in chart.
    check my last thread, i impletement a ‘queue’ collection, which will always keep 30 elements in the collection. newest one will be insert in the last position, and oldest one will be removed. but when i do the databinding job to a dataseries, wiered thing comes up, finally all point will be overlapped.

  6. Somnath
    August 19th, 2010 | 3:40 am

    Kevin,

    We are able to reproduce the issue here. The same issue has been already reported in forum.

    http://www.visifire.com/forums/index.php?showtopic=2136

    We are looking into it. It will be fixed soon.

  7. Somnath
    September 6th, 2010 | 1:57 am

    Kevin,

    The issue has been already fixed. Please try with the latest version of Visifire.

  8. Valko
    October 5th, 2010 | 6:34 am

    Hi,

    this sounds good but in real world application the data is coming from database so my question is can your chart controls handle real time live update from a database?

    thanks

  9. Somnath
    October 5th, 2010 | 7:58 am

    Valko,

    You can use web-service to retrieve data from Database and update the chart at real-time (at client side). Again it depends upon which type of application you are working with.

    There are many examples present in Visifire documentation. Kindly visit Example section in Visifire documentation.

    http://www.visifire.com/visifire_charts_documentation.php
    Go to: Visifire documentation > Examples

    Regards,
    Somnath

Leave a reply