This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.
View all Dundas articles
Introduction
Dundas Chart for ASP.NET Enterprise Edition, version 4.0 now includes the tools you need to create stunning animated charts without writing a single line of code.
When to use animated charts?
Animated charts add depth to your data. They highlight valuable information and support memory retention. If you need to emphasize a Data Point when it reaches a critical value � a pressure value, high/low sales numbers, or a stock sell price - an animated chart ensures your point will be made and remembered.
Figure 1: Dundas Chart Rendering Flash Animation
Dundas Chart animations are extremely useful in online marketing or presentation scenarios. They have the power to draw viewer attention to the most impactful and relevant data. Using an animated chart format to present your firm�s sales performance over time, relative to the industry standard, creates an impressive backdrop for a sales presentation
The Simplicity of Creating Animated Charts
Dundas Chart for .NET Enterprise Edition enables you to design charts without having to write any code. Using the Dundas Chart Wizard, you can design the appearance of the chart, bind it to your data source and use 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. The first step is to decide the output type:
Figure 2: Selecting the to render to Flash
Chart1.ImageType = ChartImageType.Flash;
At this point, the rendering format of a static chart has been selected. The chart will be rendered in Flash in the same manner that a Png or a Jpg would be rendered. Next, an animation theme needs to be selected, or a custom animation must be created. Animation themes have been added to provide common animations to your chart if applicable, thus reducing unnecessary development. Custom animations give the developer full control of an animation sequence; it can be used to set which element is animated, how to animate it (moving, growing or fading animation) and the timing of the animation.
Whether using themes or custom animations, the developer retains the ability to control both the time period and restart properties of the animation.
Figure 3: Selecting an Animation Theme
Figure 4: Defining the Animation to Repeat with a delay
Chart1.AnimationTheme = AnimationThemes.GrowingTogether;
Chart1.AnimationDuration = 7;
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.
Chart1.AnimationTheme = AnimationThemes.GrowingTogether;
Chart1.AnimationDuration = 7;
Chart1.RepeatAnimation = true;
Chart1.RepeatDelay = 3;
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);
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);
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.
