Silverlight & WPF Polar Charts

somnath

Hi,

In this release Polar Chart has been implemented. Visit Visifire documentation for more information regarding Polar Chart. http://visifire.com/documentation/Visifire_Documentation/Chart_Types/Polar_Chart.htm

Get Microsoft Silverlight

Also, this release contains fix for the following bugs:

  • If ShadowEnabled property was set to true in Chart then Transparent color was not getting applied as background color of PlotArea.
  • AxisZoomEventArgs didn’t return accurate values for ViewMin and ViewMax properties while zooming.
  • Chart was not behaving as expected while zooming the combination charts with Spline.
  • In WPF RightClick event was not working as expected.

You can download Visifire v3.1.4 beta 3 & v3.5.7 beta 3 here.

Cheers,
Team Visifire


Windows Phone 7 Charts

Chirag

Hi,

You folks know that Windows Phone 7 Charts are possible with Visifire. Due to some breaking changes in the latest Beta release of Windows Phone Developer Tools users had issues using Visifire. We have decided to ship separate binaries for WP7 users. All that changes is that one has to provide reference to SLWpVisifire.Charts.dll instead of regular Visifire for Silverlight binaries. Listed below are few links to get you started quickly with Windows Phone 7 Charts:

Get Microsoft Silverlight

Download the latest version of Visifire here. We are very excited about this release & would love to have your feedback.

Cheers
Team Visifire


Visifire Silverlight and WPF Charts v3.5.7 beta 2 Released!

somnath

Hi,

Today we are releasing Visifire binary specifically for Windows Phone 7 Series. Visifire binary provides you a control which can be used in WP7 only. Create your first chart in WP7 today! Following link from Visifire documentation will be helpful for you.

http://visifire.com/documentation/Visifire_Documentation/Quick_Start/WP7/Your_First_Windows_Phone_Chart.htm

Also, this release contains fix for the following bugs:

  • Chart threw exception while updating chart at real-time in Blend.
  • ZoomingEnabled property in chart was not working as expected at real-time.
  • ZoomBar didn’t behave as expected if chart state was changed from ScrollBar to ZoomBar at real-time.

Visifire v3.1.4 beta 2 for Silverlight 3 has also been released with the above bug fixes.

You can download Visifire v3.1.4 beta 2 & v3.5.7 beta 2 here.

Cheers,
Team Visifire


Silverlight/WPF Spline Chart

Chirag

Hi,

With this release Visifire introduces Spline Chart. A Spline Chart is similar to a Line Chart except that it draws a fitted curve through the data points. The spline interpolation and smoothing is for improved presentation of data. It allows one to take a limited set of known data points and approximate transitional values.

Demoed below is Messi’s path to glory!

Get Microsoft Silverlight

Cheers,
Team Visifire

http://www.visifire.com/blog/wp-content/post_xaps/GoalsScoredByMessiForBarcelonaClub.xap" height=" 680">Get Microsoft Silverlight


Silverlight/WPF Radar Chart

Chirag

Hi,

With this release Visifire introduces Radar Chart. A Radar Chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. Radar Chart is also known as Web, Spider or Star Chart.

Shown below is the goals scored by top countries in FIFA World Cups 2006 & 2010 (till date).

Get Microsoft Silverlight

Cheers,
Team Visifire


Visifire Silverlight and WPF Charts v3.5.7 beta Released!

somnath

Hi,

This release contains the following enhancement:

  • New Chart types Spline and Radar have been implemented in Visifire.

Also, this release contains fix for the following bugs:

  • Int64 overflow issue with DataPoint having bigger YValue.
  • AxisIndicator was getting clipped if chart size was less.
  • Chart threw exception while updating the DataSeries which was removed from the Series collection of Chart.

Visifire v3.1.4 beta for Silverlight 3 has also been released with the above features.

You can download Visifire v3.1.4 beta & v3.5.7 beta here.

Cheers,
Team Visifire


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