Creating Animations with
Dundas Chart for ASP.NET Enterprise Edition
By Andrew Bryan, Product Manager, Dundas Software
Introduction
Dundas Software recently added new chart animation features to Dundas Chart for ASP.NET Enterprise Edition, version 4.0. Not only can you still create stunning static chart images but you can now create charts that would be the center-piece of any presentation without the need to write a single line of code.
Where would you use chart animations?
Animating your charts is a feature that adds some coolness to your data. It is able to highlight aspects of your data that you want your viewer to notice. For example, you want to highlight a Data Point if it reaches a critical value - like a pressure value, high/low sales numbers, or a stock sell price.
Figure 1: Dundas Chart Rendering Flash Animation
The quality of the Dundas Chart animations is so high that you may find it useful in online marketing or presentation scenarios. The chart animations have the power to draw the attention of the viewer to your data. Let's say you have a product that has a certain performance metric. Showing a chart of the performance against the industry standard coupled with a sales message will aid in getting your point across.
Simplicity of Creating Animated Charts
Using Dundas Chart for .NET Enterprise Edition, you are able to design your charts without actually writing any code; using the Dundas Chart Wizard will allow you to design the appearance of the chart and bind to your data source and using the Visual Studio property browser to set your animation properties.
Dundas Chart for ASP.NET Enterprise Edition is able to animate your data in either Flash or SVG formats. Deciding on the output type is the first step:
Figure 2: Selecting the Image Type to render in Flash
// set the render format to be Flash Chart1.ImageType = ChartImageType.Flash;
At this point, we have selected the rendering format of a static chart. The chart will be rendered in Flash in the same manner that a Png or a Jpg would be rendered. To animate, we need to select an animation theme or create a custom animation. Animation themes have been added to provide common animations to your chart where there is little for the developer to worry about. Custom animations give the developer full control of an animation sequence; it can be used to set what element gets animated, how to animate it (of a moving, growing or fading animation) and when in time it should begin and end.
Regardless of the using themes or custom animations, there is also the ability to control the time period that the animation will occur and set a property to cause the restart of the animation.
Figure 3: Selecting an Animation Theme
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;
With only the above property settings and a couple of minutes of your time, the following chart animation is created.
Figure 5: Chart Rendered using the GrowingTogether animation theme
Creating Custom Animated Charts
The animation themes are great for quickly making your animated charts and will satisfy most user needs. However, like other chart features provided, there is an easy way and there is powerful way. Custom animations provide the power that some developers demand while maintaining simplicity of development.
Custom animations provide full control of the chart elements allowing you to animate each in a different manner and at time in the animation sequence of your choosing.
Using the above example as a basis for our animation, let's modify it such that the line series draws independently of the animation theme, the chart area axis lines and grid lines are removed from the Growing Together animation theme, and the title slides in from the right. The result will look like:
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. We do this by creating a FadingAnimation object and add chart elements to the animation object. Since the goal is to disable a set of chart elements from the animation theme, we will set the Enabled property to false and add the object 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. By setting the OneByOne property to true, this will cause the line to grow point by point over the time we specify for the animation sequence.
Finally, to give the chart title a sliding in effect, we add a MovingAnimation object. Moving animations provide an X and Y coordinate (in percentage of the chart) where the move will begin; we set the StartPositionX 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 rather simple custom animation. With the API provided and the flexibility of animating each chart element independently, the developer has full control. This makes the animation possibilities much more than can be demonstrated here. For additional examples of Dundas Chart for ASP.NET Enterprise Edition animations, please visit the Dundas Chart Gallery, or download a full evaluation copy of Dundas Chart for ASP.NET Enterprise Edition.