Animating the C1Chart Control

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

<c1:C1Chart Name="chart">

            <c1:C1Chart.Data>

                <c1:ChartData>

                    <c1:ChartData.LoadAnimation>

                        <!-- load animation -->

                        <c1:PlotElementAnimation>

                            <!-- initial style: invisible  -->

                            <c1:PlotElementAnimation.SymbolStyle>

                                <Style TargetType="c1:PlotElement">

                                    <Setter Property="Opacity" Value="0" />

                                </Style>

                            </c1:PlotElementAnimation.SymbolStyle>

                            <c1:PlotElementAnimation.Storyboard>

                                <Storyboard >

                                    <!-- display element with index delay -->

                                    <DoubleAnimation

                   Storyboard.TargetProperty="Opacity"

                   c1:PlotElementAnimation.IndexDelay="0.5"

                   To="1" Duration="0:0:1" />

                                </Storyboard>

                            </c1:PlotElementAnimation.Storyboard>

                        </c1:PlotElementAnimation>

                    </c1:ChartData.LoadAnimation>

                </c1:ChartData>

            </c1:C1Chart.Data>

        </c1:C1Chart>

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

 

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.

 


Send us comments about this topic.
Copyright © GrapeCity, inc. All rights reserved.