Click here to Skip to main content
Click here to Skip to main content
Go to top

Creating animations with Dundas Chart for ASP.NET

Creating Chart Animations with Dundas Chart for ASP.NET Enterprise Edition, Version 4.0

Editorial Note

This article is in the Product Showcase section 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.

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.

<OBJECT id=SWFObj1 codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0 height=320 width=400 border=0 classid=clsid:D27CDB6E-AE6D-11CF-96B8-444553540000> <embed src="/KB/showcase/dundas_chartani/columngradient2.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="SWFObj1" width="400" height="320"></OBJECT>
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

// set the render format to be 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

// 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.

<OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 height=300 width=300 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000> <EMBED src="/KB/showcase/dundas_chartani/animationtheme.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" width="300" height="300" type="application/x-shockwave-flash" ></EMBED></OBJECT>
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:

<OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 height=300 width=300 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000> <EMBED src="/KB/showcase/dundas_chartani/customanimation.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" width="300" height="300" type="application/x-shockwave-flash" ></EMBED></OBJECT>
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Since 1992 Dundas Data Visualization has been helping companies all over the world visualize their data. Dundas products have a global reputation of being the highest quality, and are all designed, built and tested to meet the strictest requirements that developers and business managers demand.
 
Our showcase product is Dundas Dashboard, an easy-to-integrate digital dashboard software solution. Dundas Dashboard allows for the rapid and collaborative development of performance dashboards, helping companies leverage their business intelligence (BI) solutions.
 
Our web-based dashboard software comes with wizard interfaces, and a unique Dundas DashFlowTM process, allowing for the simultaneous development of an executive dashboard by business analysts, IT staff and database administrators. It also uses premier charts, maps, gauges and graph controls, letting end-users visualize their data as required.
 
Dundas also offers superb, world class consulting services for those companies that do not have the in-house expertise to implement their data visualization projects.
 
The quality of our products in conjunction with our unmatched technical support, numerous awards and years of experience reflect Dundas Data Visualization's commitment to being the best!
Group type: Organisation

3 members


Comments and Discussions

 
GeneralException occurs in Chart Animation PinmemberCybSachina30-Jul-08 1:26 
GeneralRe: Exception occurs in Chart Animation PinmemberMidaroh7-Mar-12 8:34 
GeneralRe: Exception occurs in Chart Animation PinmemberMidaroh7-Mar-12 9:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 3 May 2004
Article Copyright 2004 by Dundas Data Visualization
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid