Creating animations with Dundas Chart for ASP.NET

Figure 4: Defining the Animation to Repeat with a delay

// set the Animation Theme to Grow elements together
Chart1.AnimationTheme = AnimationThemes.GrowingTogether;
 
// set to repeat the animation after a 3 second pause
Chart1.AnimationDuration = 7;
 
// set to repeat the animation after a 3 second pause
Chart1.RepeatAnimation = true;
Chart1.RepeatDelay = 3;

Using the above property settings the following chart animation can be created in minutes.

Figure 5: Chart Rendered using the GrowingTogether animation theme

Creating Custom Animated Charts

The animation themes are perfect for making your animated charts and will satisfy the majority of your needs. However, like other chart features provided, there is an easy and powerful way to customize the presentation of your data. Custom animations provide high-end results while maintaining simplicity in development.

Custom animations provide full control of the chart elements, allowing each element to be animated and sequenced as desired.

The above example of animation can be modified so that the line series draws independently of the animation theme, the chart area axis lines and grid lines are removed from the GrowingTogether animation theme, and the title slides in from the right.  The result:

Figure 6: Chart Rendered using a Custom Animation

There are three tasks to complete.  The first will modify the GrowingTogether animation theme to remove the 'fading in' of the axis lines and grid lines.  This is done by creating a FadingAnimation object and adding chart elements to the animation object.  Since the goal is to disable a set of chart elements from the animation theme, the Enabled property will be set to false and the object will be added to the Chart Animation Collection.

The second task is to create a GrowingAnimation object and add it to the Chart Animation Collection.  This animation object consists of the Line chart series.  Setting the OneByOne property to true will cause the line to grow point by point over the time specified for the animation sequence.

Finally, to give the chart title a sliding in effect, a MovingAnimation object is added.  Moving animations provide an X and Y coordinate (in percentage of the chart) to define where the move will begin; The StartPositionX is set to be 100% of the width of the chart so that the text is initially out of view.  The StartTime and Duration is set so that this is one of the last objects to be animated.

// set the Animation Theme to Grow elements together
Chart1.AnimationTheme = AnimationThemes.GrowingTogether;
 
// set to repeat the animation after a 3 second pause
Chart1.AnimationDuration = 7;
 
// set to repeat the animation after a 3 second pause
Chart1.RepeatAnimation = true;
Chart1.RepeatDelay = 3;
 
// Disable axes lines and major grid lines animation
// from the growing together animation theme
FadingAnimation axesAnimation = new FadingAnimation();
axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisX, 
                                   AxisAnimationElement.MajorGridlines);
axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisX, 
                                   AxisAnimationElement.AxisLine);
axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisY, 
                                   AxisAnimationElement.MajorGridlines);
axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisY, 
                                   AxisAnimationElement.AxisLine);
axesAnimation.Enabled = false;
Chart1.CustomAnimation.Add(axesAnimation);
 
// Replace line series animation with Growing One-by-One
GrowingAnimation seriesAnimation = new GrowingAnimation();
seriesAnimation.AnimatedElements.Add(Chart1.Series["Series2"]);
seriesAnimation.StartTime = 2.0;
seriesAnimation.Duration = 3.0;
seriesAnimation.OneByOne = true;
Chart1.CustomAnimation.Add(seriesAnimation);
 
// Animate the title to be moving in from the right
MovingAnimation titleAnimation = new MovingAnimation();
titleAnimation.AnimatedElements.Add(Chart1.Titles[0]);
titleAnimation.StartTime = 8.5;
titleAnimation.Duration = 1.0;
titleAnimation.StartPositionX = 100;
titleAnimation.StartPositionY = 7;
titleAnimation.Enabled = true;
Chart1.CustomAnimation.Add(titleAnimation);

The above example is a fairly simplistic custom animation.  With the API provided and the ability to animate each chart element independently, the developer has full creative control.  The animation possibilities are far too varied to be fully demonstrated here, so to see additional examples visit the Dundas Chart Gallery (see link below), or download a full evaluation copy of Dundas Chart for ASP.NET Enterprise Edition here.