Creating Your First DataBinding Sample

In this topic, we will explain how you can bind Chart to a DataSource. You can download the source code for Silverlight/WPF sample here.

 

Create a Silverlight application and add Visifire binary references to it. For information about creating Visifire Chart in a Silverlight application, please refer to Managed Code Silverlight Sample.

 

Below is a Chart XAML.

 

<StackPanel Orientation="Horizontal">  

         

  <vc:Chart Name="MyChart" Width="500" Height="300" Padding="10,10" Margin="10,0" AnimatedUpdate="True">

 

  <vc:Chart.Titles>

      <vc:Title Text="Visifire DataBinding"></vc:Title>

  </vc:Chart.Titles>

 

  <vc:Chart.Series>

     <vc:DataSeries RenderAs="Column">

        <vc:DataSeries.DataMappings>

           <vc:DataMapping MemberName="AxisXLabel" Path="Label"></vc:DataMapping>

           <vc:DataMapping MemberName="YValue" Path="YValue"></vc:DataMapping>

        </vc:DataSeries.DataMappings>

     </vc:DataSeries>

  </vc:Chart.Series>

  </vc:Chart>

                        

</StackPanel>

 

Now add a new class called Value inside the project and create a class inside it and implement INotifyPropertyChanged interface as shown below. Add a PropertyChanged event inside the class. Create two properties named Label and YValue which should implement ProperyChanged event as shown below:

 

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;

 

namespace VisifireDataBinding

{

    public class Value : INotifyPropertyChanged

    {

        public String Label

        {

            get

            {

                return _label;

            }

            set

            {

                _label = value;

                if (PropertyChanged != null)

                    PropertyChanged(this, new PropertyChangedEventArgs("Label"));

            }

        }

 

        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 _label;

    }

}

 

Note: Please make sure that System.ComponentModel namespace is added inside the page.

 

Now from code behind, we will create an ObservableCollection of type Value and set it as the DataSource of DataSeries present in Chart.

 

public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

 

            values.Add(new Value() { Label = "Sony", YValue = 50 });

            values.Add(new Value() { Label = "Dell", YValue = 35 });

            values.Add(new Value() { Label = "HP", YValue = 27 });

            values.Add(new Value() { Label = "HCL", YValue = 17 });

            values.Add(new Value() { Label = "Toshiba", YValue = 16 });

            

            MyChart.Series[0].DataSource = values;

        }

 

        ObservableCollection<Value> values = new ObservableCollection<Value>();

  }

 

In the above example, values is a collection of Value class. "Label" and "YValue" properties are mapped to AxisXLabel and YValue properties of DataPoint individually using DataMapping. As the DataSource property of DataSeries is set to "values", DataSeries fetches data from the values collection to generate corresponding DataPoints.

 

Below is the screen shot of the chart

 

DataBindingSample.jpg