Animation | ComponentOne Chart for WPF and Silverlight

Animation

In This Topic

Almost all of the plot elements can be animated by using the built-in animation API. Using the built-in animation options simplifies creating various visual animation effects for the C1Chart control's plot elements. The properties contained in the PlotElementAnimation class are as follows:

Property	Description
IndexDelay	An attached property that allows you to specify the animation delay depending on the element's point index.
Storyboard	Gets or sets the storyboard that is applied to the plot element.
SymbolStyle	Gets or sets the symbol style that is applied to the plot element before the storyboard starts.

Animating the C1Chart control also involves the ChartData.LoadAnimation.

To set the animation effects using the built-in animation options, you can use the following XAML markup:

XAML	Copy Code
<c1chart:C1Chart Name="chart"> <c1chart:C1Chart.Data> <c1chart:ChartData> <c1chart:ChartData.LoadAnimation> <!-- load animation --> <c1chart:PlotElementAnimation> <!-- initial style: invisible --> <c1chart:PlotElementAnimation.SymbolStyle> <Style TargetType="c1chart:PlotElement"> <Setter Property="Opacity" Value="0" /> </Style> </c1chart:PlotElementAnimation.SymbolStyle> <c1chart:PlotElementAnimation.Storyboard> <Storyboard > <!-- display element with index delay --> <DoubleAnimation Storyboard.TargetProperty="Opacity" c1chart:PlotElementAnimation.IndexDelay="0.5" To="1" Duration="0:0:1" /> </Storyboard> </c1chart:PlotElementAnimation.Storyboard> </c1chart:PlotElementAnimation> </c1chart:ChartData.LoadAnimation> </c1chart:ChartData> </c1chart:C1Chart.Data> </c1chart:C1Chart>

XAML

Copy Code

<c1chart:C1Chart Name="chart">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:ChartData.LoadAnimation>
                        <!-- load animation -->
                        <c1chart:PlotElementAnimation>
                            <!-- initial style: invisible  -->
                            <c1chart:PlotElementAnimation.SymbolStyle>
                                <Style TargetType="c1chart:PlotElement">
                                    <Setter Property="Opacity" Value="0" />
                                </Style>
                            </c1chart:PlotElementAnimation.SymbolStyle>
                            <c1chart:PlotElementAnimation.Storyboard>
                                <Storyboard >
                                    <!-- display element with index delay -->
                                    <DoubleAnimation
                   Storyboard.TargetProperty="Opacity"
                   c1chart:PlotElementAnimation.IndexDelay="0.5"
                   To="1" Duration="0:0:1" />
                                </Storyboard>
                            </c1chart:PlotElementAnimation.Storyboard>
                        </c1chart:PlotElementAnimation>
                    </c1chart:ChartData.LoadAnimation>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
        </c1chart:C1Chart>

And then you can insert the following code directly beneath the InitializeComponent() method:

C#	Copy Code
var rnd = new Random(); chart.MouseLeftButtonDown += (s, e) => { chart.Data.Children.Clear(); // create new data var vals = new double[rnd.Next(5, 10)]; for (int i = 0; i < vals.Length; i++) vals[i] = rnd.Next(0, 100); chart.Data.Children.Add(new DataSeries() { ValuesSource = vals }); };

Copy Code

var rnd = new Random();
            chart.MouseLeftButtonDown += (s, e) =>
            {
                chart.Data.Children.Clear();
                // create new data
                var vals = new double[rnd.Next(5, 10)];
                for (int i = 0; i < vals.Length; i++)
                    vals[i] = rnd.Next(0, 100);
                chart.Data.Children.Add(new DataSeries() { ValuesSource = vals });
            };

When you run your application, the data will load or re-load on mouse click, showing the animation effect that was set in the XAML markup.