Business users today expect to see more than just static data in a charts and graphs on a battleship gray screen. They are used to using interactive applications on the iPad, iPhone, and having engaging experiences on media gaming platforms such as Xbox & PlayStation. So when they come to work, the expectation of a richer, engaging, more meaningful experience in business intelligence applications which interact with data is fairly high.
This higher expectation from business users is driving developers to leverage the richness of the XAML platforms (Silverlight & WPF) to visualize and animate data in beautiful and elegant ways so their customers gain richer, more meaningful insight in their data. While the XAML platform was designed to enable this, it is new to many developers and the learning curves and schedule pressure prohibits the team from achieving this level of interaction.
More on how Infragistics helps with business intelligence and data analytics:
Infragistics solves this problem of delivering better business insight to complex data with our data visualization components and our Motion Framework. The Infragistics Motion Framework enables developers to quickly program rich & interactive data visualizations that will animate data over time to give the user richer insightful along with an engaging experience. To demonstrate the Motion Framework, our application teams have built two new reference applications, WorldMaps & WorldStats, which show real-time streaming data from the Internet and visualizes it in our fast Silverlight chart control, Silverlight geospatial map control and our zoom bar, which is an interactive scrolling and zooming Silverlight control.
Figure 1: The Infragistics WorldStats application displays data of time to gain business insight using Infragistics
Silverlight Data Visualization components and Infragistics Motion Framework.
Click here to view the online, live WordStats application.
Figure 2: The Infragistics WorldMaps application uses Infragistics data visualization components, Infragistics motion framework and Microsoft Azure cloud servers to show an engaging RIA experience
Click here to view the online, live WorldMaps application.
The Infragistics Motion Framework
Infragistics Motion Framework is an inherent part of our rich, interactive Silverlight chart control and WPF chart control, the xamDataChart™, which is included in our NetAdvantage® for Silverlight Data Visualization, NetAdvantage for WPF Data Visualization, and NetAdvantage Ultimate (for both WPF and Silverlight) products. You don't have to modify your code at all to use Infragistics Motion Framework, there's no special set-up. You don't need to write any complicated interpolation code for the data transitions as you might if you wanted to roll your own robust and consistent framework for creating immersive and animated user experiences, and you don't need to worry about special edge cases. Just turn on Infragistics Motion Framework and its there for you.
The other Infragistics WPF data visualization control and Silverlight data visualization controls used to build the interactive data analysis experience in the WorldMaps and WorldStats applications are:
xamMap™ – this is our geospatial Silverlight map control and WPF map control that can be used to visualize any type of geospatial data, including maps, floor plans and seating charts.
Figure 3: The Infragistics xamMap Silverlight map control bound to cloud based WCF data.
xamZoombar™ - this is our scrolling and zooming control available in both Silverlight and WPF which can be bound to controls like the xamDataChart and xamTimeline™ to provide an interactive scrolling and zooming experience.
Figure 4: The Infragistics xamTimeline Silverlight timeline control bound to two data series using the xamZoombar Silverlight scrolling and zooming control to interact with the data.
Business Intelligence with WorldStats
The WorldStats sample demonstrates the data chart’s Motion Framework functionality to animate, or 'play', data over time. This application provides the end user richer insight into statistical data about all countries in the world through an engaging user interface consisting of two highly interactive data charts. Both of these data charts have built-in zooming and panning which can be accessed using the chart’s zoombars and mouse drag and wheel support.
In the top data chart, the series represent statistical data for all countries in the world between 1800 and 2010. End users can choose what statistical data will be plotted for all countries against either X or Y axis. In addition, the bubble size of data points can be mapped to values of statistical data in order to show difference between countries. Also, the statistical data can be plotted in either linear or logarithmic scale along X or Y axis. The possibilities for building rich interactive tool tips, including embedded chart, are also illustrated and tool tips are displayed when end user hovers over individual data points or series in the top data chart.
Figure 5: Comparing GDP and Life Expectancy between Cape Verde, Haiti, Zambia and the United States.
In figure 5, note that in the bottom data chart, the series represent statistical data for countries. Each time a country is selected or unselected in the list box, the data chart and its legend are updated accordingly. This data chart provides selection of statistical data for multiple countries that are plotted against Y-axis in either linear or logarithmic scale and against X-axis over time. Moreover, it allows selection and plotting of different trend lines types to show trends of statistical data over time. This data chart also makes use of custom tooltips that display basic information of selected countries. These tooltips are displayed when mouse cursor hovers over a series in the chart or over an item in the countries list box. Another unique feature of this application is highlighting of individual series that occurs when mouse cursor hovers over a name of country in the chart’s legend.
Working with the Infragistics Motion Framework
In this section, we’ll look at how to achieve the interactivity of the Motion Framework. In our Silverlight chart control and WPF chart control, the xamDataChart, we’ve introduced a new property, TransitionDuration, on the Series class (base class for all series). TransitionDuration is a dependency property of type System.TimeSpan. If set, it indicates the duration of the current series’ morph. The idea behind this property is to provide smooth transition of a data point from one value to another. The morph (smooth transition) is only applied when a value within single data point is changed. No transition happens when you add a new data point to the underlying data source, or when you remove data points. The transition is only applied to a single (or many) data point when a value of bound property is changed.
In the Stats Distribution of World Maps showcase application, we are showing 4-dimentional data. Two of the dimensions are obvious – the X axis shows cumulative hits for the given site, the Y axis shows the share (in percent) for given browser (or region) for that site. Now we apply Time as 3rd dimension, Time – so the X and Y values change over time and you can clearly see this change when hit the Play button. The 4th dimension, change of hits over time is represented by the radius (size) of a bubble. Increase of bubble size shows there are more hits for the current time period (day) relative to the previous one.
Figure 6: Stats distribution over time in the xamDataChart Silverlight chart control using the Motion Framework.
While you can easily accomplish the task with 3 dimensions – X, Y and Time, adding size of bubble requires some advanced techniques. The full solution consists of a DispatcherTimer which ticks at regular time intervals (adjustable by the “Change Animation Speed” slider). On a timer tick we simply update all related data points in the Chart’s data source. In order to see different browsers (or regions) as separate Legend Items, and respective bubbles in different colors, we need to create separate series instance for every browser (or region) we have data for.
To simplify the code, we’ve created a simple application that shows how to implement the Motion Framework in your own application. You can download this code here.
To achieve the animations in the Motion Framework, we are:
- Using a ScatterSeries to show bubbles
- Animating the bubble radius change with the BubbleSeries using the approach of a custom MarkerTemplate for a ScatterSeries
Because we are going to use one and the same MarkerTemplate multiple times, we have created a separate Silverlight User Control that facilitates the job of displaying and animating bubble. It has three important properties:
IsAnimated – Boolean property to indicate whether or not the size of the bubble should be animated upon change; AnimDuration – TimeSpan property to set the duration of animation, when animated; LocalRadius – Double value property indicating the size of the bubble. When this property is changed, if IsAnimated is True, the bubble size changes with smooth animation.
To animate bubble size we use a utility class SizeAnimation, which can be found under MotionFramework folder of the sample. This class creates DoubleAnimationUsingKeyFrames to animate change in Width and Height properties of our custom control used as MarkerTemplate. We also have created custom extensions to easily apply animations to a FrameworkElement.
To box all functionality into a single, reusable routine we have created the CoreMF class. It implements all required functionality around instantiating DispatcherTimer, handling Tick event and changing the data points in data source accordingly. Important properties and methods of CoreMF that you need to know are:
DataChart – xamDataChart instance to perform motion framework actions on; Legend – Legend which will show Chart data sources (Series); DataSource – Dictionary. This is the core united data source for animations. If you, for example have data for 3 browser versions, each browser data will be a separate IList and you have to combine all the sources into one single Dictionary. The core framework will automatically pick up the appropriate item from each IList to update the current data point; XAxisName – string, representing the Name property of XAxis within the DataChart that data will be bound to; YAxisName – string, representing the Name property of YAxis within the DataChart that data will be bound to; PropertyNameX – string, the name of the property of underlying business object that will be bound to the X Axis; PropertyNameY – string, the name of the property of underlying business object that will be bound to the Y Axis; PropertyNameR – string, the name of the property of underlying business object that will be bound to the bubble radius; MarkerTemplate – DataTemplate. You can define your own template to serve as DataTemplate. Of course you can use the provided BubbleMarker user control, but can also create your own DataTemplate, which can be in different shape and may or may not animate the size LegendItemTemplate – DataTemplate. You can define your own DataTemplate for the LegendItem, so you can customize your legend.
Finally, once you have your data ready and you have just inserted xamDataChart on your page, you have created an instance of CoreMF and set its properties like that:
this._coreMF = new CoreMF();
this._coreMF.DataChart = this.dcMotion;
this._coreMF.MarkerTemplate = this.Resources["MarkerTemplate"] as DataTemplate;
this._coreMF.DataSource = DemoModel.GetDictionaryData(5, 25);
this._coreMF.PropertyNameR = "ValueR";
this._coreMF.PropertyNameX = "ValueX";
this._coreMF.PropertyNameY = "ValueY";
this._coreMF.XAxisName = "axisX";
this._coreMF.YAxisName = "axisY";
this._coreMF.ChartLegend = this.mainLegend;
Then, you just decide when to trigger the animation by invoking the Play method on the CoreMF instance:
this._coreMF.Play();
That is pretty much all you need to do to get the rich, interactive experience of the Motion Framework implemented in your own applications to give your end users better insight to business data.
Wrap Up
Business users and consumers are over whelmed with volumes of data every day vying for their attention and many times important information is lost. Tools like the Infragistics Silverlight Data Visualization and WPF Data Visualization controls and the Motion Framework enable you to deliver higher quality, more meaningful applications which help your customers better understand and analyze data.
Download the NetAdvantage Ultimate today so you can deliver the experiences described in this article.
Download the code to implement Motion Framework in your own apps.
