Skip to content

Latest commit

 

History

History
1578 lines (1219 loc) · 38.9 KB

datachart-chart-motion-framework.adoc

File metadata and controls

1578 lines (1219 loc) · 38.9 KB
Raw

Chart Motion Framework

This topic demonstrates, with code examples, how to animate your charts using the Motion Framework™ in the {DataChartName}™ control. Procedures for both general and custom implementations are provided.

The topic is organized as follows:

Introduction

The Motion Framework allows you to animate changes in data over time in the {DataChartName} control, creating an immersive and animated user experience that “tells the story” of your data.

xamDataChart Chart Motion Framework 01

Figure 1: The {DataChartName} control with the Motion Framework animating six data sources over time

The Motion Framework is managed by the TransitionDuration and the TransitionEasingFunction properties of Series object. These properties are available on all types of series in the Data Chart.

Table 1: Properties of the Motion Framework

Series Property Name Property Type Description

TimeSpan

Determines time duration between series’s morph. The idea behind this property is to provide smooth transition of a data point from one value to another

EasingFunctionBase

Determines the Easing Function used to morph the current series. By default, the Motion Framework uses linear easing function, but you can change it by providing other easing functions that are available in the System.Windows.Media.Animation namespace.

Limitations

The Motion Framework has the following limitation in the {DataChartName} control: if the range of an axis changes as a result of a data change, no animation will begin.

Using the Motion Framework

General Implementation

The general implementation of the Motion Framework gives you full control over how the {DataChartName} will animate data bound to it. However this implementation requires configuring each series in the {DataChartName} control individually and providing a method for updating data. To start using the Motion Framework in the {DataChartName}:

  1. Set the TransitionDuration property. The TransitionDuration property controls the time for shifting the points of the series from their previous values to their next values. On the series you want to animate, set that property to a timespan that would provide smooth series’s transition. A of 0.5 seconds would be a good choice in most cases.

  2. Set the TransitionEasingFunction property to the desired easing function or linear easing function that will be used to morph the series.

The code snippet below shows how to set TransitionDuration TransitionEasingFunction properties on ScatterLineSeries. The same logic can be applied to any other type of series supported in the {DataChartName}.

  1. Make sure that your data notifies the chart when it changes. For example, if your items bound to the chart implement the INotifyPropertyChanged interface, then modifying one of their properties will notify the chart, and the change will be animated. For a collection, if it implements the INotifyCollectionChanged interface, then additions, removals, and changes to the collection will also be animated.

Note
Note:

You should review the Chart Performance topic to see how data implementation affects performance of the {DataChartName} control.

The following code snippet shows an example of data that will notify the Data Chart when items are added, removed, replaced, and when their values are changed.

Ideally, you should update the data only as frequently as the TransitionDuration period. If you update the data more frequently, your chart will animate smoothly but will not be able to refresh to display the updated values: it will not be able to interpret them due to insufficient time to perform the necessary interpolations.

The following code shows how to use a timer to trigger updates in data animated in the {DataChartName}.

Custom Implementation

Another approach to using the Motion Framework in the {DataChartName} is through our custom MotionFrameworkManager object which provides the following features:

  • Simpler configuration and interaction with the Motion Framework

  • Handling and synchronizing data updates for multiple data sources

  • Interactive experience through controls that start/stop data animation and display current state of the Motion Framework

  • Playback of data changes

You can download the Motion Framework Manager object and use it in your project. The following section explains how to use the manager for the Motion Framework.

Preview

The final result is shown in Figure 1 above.

Instructions

  1. Add a ToggleButton control and a Slider control to the root layout.

This button will control the animation playback of changes in data using the Motion Framework.

  1. Add the {DataChartName} control with horizontal and vertical axes:

  1. Add the MotionFrameworkManager object to your project.

  2. Declare MotionFrameworkManager and DataSources members.

  1. Create an instance of the MotionFrameworkManager object in code-behind.

  1. Configure the MotionFrameworkManager object:

Set the TransitionFunction property to ExponentialEase animation function. **

Set the TransitionDuration property to 1 second. **

Set the DataUpdateInterval property to 1 second.

  1. Bind your own data source(s) that will be animated or use the DataSourceGenerator to generate random data.

  1. Bind {DataChartName} and map its axes to the manager of the Motion Framework.

  1. Bind the Slider control created in the first step to the DateTimeSlider property of MotionFrameworkManager.

.

Set the current DataContext to the MotionFrameworkManager object.

.

Initialize the MotionFrameworkManager object.

.

Add event handler for the Click event of the button that toggles play animation of the Motion Framework.

.

Save your project.

.

(Optional) Verify the result. If you have implemented the code correctly, your animated chart should look like the one shown in Figure 1 above.