Infragistics Motion Framework 101

Akshay Luther / Friday, December 2, 2011

With the 2011 Volume 2 release, NetAdvantage for Silverlight now includes the high-performance XamDataChart which was previously available only in the Data Visualization control toolkits for Silverlight and WPF.

One of my favourite features of the XamDataChart is the Motion Framework, which allows you to visualize the "story" of your data. Open up the WorldStats showcase and move the slider to see what I mean. As you move it, you can see how the data changes.

How does this work? At the heart of the Motion Framework this is the ability of the chart to smoothly animate values as they are updated.

Consider for example, the following chart:

XAML:

<Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <ig:XamDataChart x:Name="xamDataChart" Height="500" Width="500">

                <ig:XamDataChart.Axes>
                    <ig:NumericXAxis x:Name="numericXAxis" MinimumValue="-50" MaximumValue="50"/>
                    <ig:NumericYAxis x:Name="numericYAxis" MinimumValue="-50" MaximumValue="50" />
                </ig:XamDataChart.Axes>

                <ig:XamDataChart.Series>
                    <ig:BubbleSeries x:Name="bubbleSeries" 
                        XAxis="{Binding ElementName=numericXAxis}" 
                        YAxis="{Binding ElementName=numericYAxis}" 
                        XMemberPath="X" 
                        YMemberPath="Y" 
                        RadiusMemberPath="Radius">
                    </ig:BubbleSeries>
                </ig:XamDataChart.Series>
            </ig:XamDataChart>
            
            <Button Name="UpdateButton" Height="30" Width="100" Content="Update Data" Click="UpdateButton_Click"/>
        </StackPanel>
    </Grid>

Code-behind:

ObservableCollection<Bubble> _bubbles = new ObservableCollection<Bubble>();

        public SimpleChart()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(SimpleChart_Loaded);
        }

        void SimpleChart_Loaded(object sender, RoutedEventArgs e)
        {
            Bubble bubble1 = new Bubble();
            bubble1.X = 0;
            bubble1.Y = 40;
            bubble1.Radius = 30;
            _bubbles.Add(bubble1);

            Bubble bubble2 = new Bubble();
            bubble2.X = 40;
            bubble2.Y = 0;
            bubble2.Radius = 70;
            _bubbles.Add(bubble2);

            xamDataChart.Series["bubbleSeries"].ItemsSource = _bubbles;
        }

        private void UpdateButton_Click(object sender, RoutedEventArgs e)
        {
            foreach (Bubble bubble in _bubbles)
            {
                bubble.X *= -1;
                bubble.Y *= -1;
            }
        }

When the button is clicked, the X and Y coordinates of each bubble are changed and they immediate move to the their new positions on the chart:

In order to smoothly animate them when when they are updated, we simply specify the TransitionDuration property on the series.

<ig:BubbleSeries x:Name="bubbleSeries" 
                        XAxis="{Binding ElementName=numericXAxis}" 
                        YAxis="{Binding ElementName=numericYAxis}" 
                        XMemberPath="X" 
                        YMemberPath="Y" 
                        RadiusMemberPath="Radius"
                        TransitionDuration="0:0:1">

Now when the button is clicked, the bubbles smoothly move to the their updated locations. A value of "0:0:1" tells the chart to do any animations over one second.

By default, the bubbles move linearly, but you can specify an easing function. For example here I have specified an ElasticEase function with 2 oscillations and a springiness of 5:

<ig:BubbleSeries x:Name="bubbleSeries" 
                        XAxis="{Binding ElementName=numericXAxis}" 
                        YAxis="{Binding ElementName=numericYAxis}" 
                        XMemberPath="X" 
                        YMemberPath="Y" 
                        RadiusMemberPath="Radius"
                        TransitionDuration="0:0:1">

                        <ig:BubbleSeries.TransitionEasingFunction>
                            <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5" />
                        </ig:BubbleSeries.TransitionEasingFunction>

                    </ig:BubbleSeries>

See the inheritance hierarchy of EasingFunctionBase for all the available easing functions and their properties.

Now you can appreciate how the the Motion Framework works with the slider: Data for all points in time represented by the slider are preloaded. When the slider changes, the chart is updated to show data for the particular slider value, and the Motion Framework takes care of the rest!

More implementation details are covered in the following blog posts:

Incidentally, the Motion Framework is also a feature our fantastic new jQuery Chart control!

Source code for this sample: MotionFramework101.zip

As always, feel free to ping me at akshayl@infragistics.com if you have any questions or comments.