Delivering an Interactive Visualization of your Time-Series Data using XamDataChart and Infragistics Motion Framework

Infragistics Motion Framework is an innovative technology, which allows you to build highly engaging visualizations of time-series data using data visualization controls from the NetAdvantage for Silverlight Data Visualization product. These visualizations present changes in tracked series using transitions, which makes for a smooth playback of your data, allowing your users to quickly see patterns emerging and compare different series. We have delivered a sample application – WorldStats, which puts these concepts and components to work to create a highly functional and interactive visualization. We also presented a prototype of a visualization using the XamDataChart, which made available code showing how to build a simple data visualization with animated transitions. 

Seeing the level of interest in WorldStats and in our webinar dedicated to the Infragistics Motion Framework, we are planning to make creating such immersing visualization as easy as possible for developers. As part of this, we’d like to make available a helper class code, which drives the XamDataChart, together with a slider, which indicates the current position in terms of time, and button for controlling playback. This blogpost extends the first version of this helper, adding automatic axis scaling, a slider, play/pause button, and the ability to have the different series leave trails through the XamDataChart during playback.

Using the Motion Framework Infrastructure Core Class

In the Home.xaml file we’ve added a XamDataChart, a XamDateTimeSlider (part of our NetAdvantage for Silverlight Line of Business product) , and a Button with a minimum amount of settings. Apart from styling not much to talk about there. The real work is happening behind the scenes, in the code-behind Home.xaml.cs file. We initialize an instance of the CoreMF class, and set its various properties to customize the playback. The code below is all the setup code which is used in this sample:

this._coreMF = new CoreMF();
//set the interval of playback
this._coreMF.TimerInterval = TimeSpan.FromMilliseconds(200);
//automatically size the chart axes to contain all data in the datasource 
this._coreMF.AutosetAxisMinMax = true;
//set the chart to be used
this._coreMF.DataChart = this.dcMotion;
//set the slider to be used
this._coreMF.DateTimeSlider = this.dcSlider;
//set whether trails would be shown
this._coreMF.ShowTrails = true;
this._coreMF.MarkerTemplate = this.Resources["MarkerTemplate"] as DataTemplate;
//set the data source
this._coreMF.DataSource = DemoModel.GetDictionaryData(5, 500);
//set the properties of bound objects to be used in the chart
this._coreMF.PropertyNameR = "ValueR";
this._coreMF.PropertyNameX = "ValueX";
this._coreMF.PropertyNameY = "ValueY";
this._coreMF.PropertyNameTime = "ValueDateTime";
//set the chart axes
this._coreMF.XAxisName = "axisX";
this._coreMF.YAxisName = "axisY";
this._coreMF.ChartLegend = this.mainLegend;
this._coreMF.CurrentDateChanged += new CoreMF.CurrentDateChangedEventHandler(_coreMF_CurrentDateChanged);
this._coreMF.PlaybackStopped += new CoreMF.PlaybackStoppedEventHandler(_coreMF_PlaybackStopped);

Summary

In this post, we went through the straightforward process of setting a datasource and initializing the Motion Framework Core class with the instances of the XamDataChart and XamDateTimeSlider and legend controls to be used in the playback. The simplicity of this setup will allow you to relatively quickly setup a simple visualization to demonstrate the concept in front of your users to get a conversation started about their needs. Seeing this concept, users would be able to share with you which dimensions of data they would benefit from seeing animated, ultimately helping you add value to your applications.

If you have any questions, do not hesitate to email me at kmatev@infragistics.com.