Click here to Skip to main content
15,861,168 members
Articles / Web Development / ASP.NET
Article

Creating animations with Dundas Chart for ASP.NET

2 May 20044 min read 155.5K   30   29
Creating Chart Animations with Dundas Chart for ASP.NET Enterprise Edition, Version 4.0

This article is in the Product Showcase section for our sponsors at CodeProject. These articles 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"><param name="_cx" value="10583" /><param name="_cy" value="8467" /><param name="FlashVars" value="" /><param name="Movie" value="dundas_chartani/columngradient2.swf" /><param name="Src" value="dundas_chartani/columngradient2.swf" /><param name="WMode" value="Window" /><param name="Play" value="-1" /><param name="Loop" value="-1" /><param name="Quality" value="High" /><param name="SAlign" value="" /><param name="Menu" value="-1" /><param name="Base" value="" /><param name="AllowScriptAccess" value="always" /><param name="Scale" value="ShowAll" /><param name="DeviceFont" value="0" /><param name="EmbedMovie" value="0" /><param name="BGColor" value="" /><param name="SWRemote" value="" /><param name="MovieData" value="" /><param name="SeamlessTabbing" value="1" /> <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" />
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

C#
// 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

C#
// 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"><param name="_cx" value="7938" /><param name="_cy" value="7938" /><param name="FlashVars" value="" /><param name="Movie" value="dundas_chartani/animationtheme.swf" /><param name="Src" value="dundas_chartani/animationtheme.swf" /><param name="WMode" value="Window" /><param name="Play" value="-1" /><param name="Loop" value="-1" /><param name="Quality" value="High" /><param name="SAlign" value="" /><param name="Menu" value="-1" /><param name="Base" value="" /><param name="AllowScriptAccess" value="always" /><param name="Scale" value="ShowAll" /><param name="DeviceFont" value="0" /><param name="EmbedMovie" value="0" /><param name="BGColor" value="" /><param name="SWRemote" value="" /><param name="MovieData" value="" /><param name="SeamlessTabbing" value="1" /> <embed src="/KB/showcase/dundas_chartani/animationtheme.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" width="300" height="300" type="application/x-shockwave-flash" />
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"><param name="_cx" value="7938" /><param name="_cy" value="7938" /><param name="FlashVars" value="" /><param name="Movie" value="dundas_chartani/customanimation.swf" /><param name="Src" value="dundas_chartani/customanimation.swf" /><param name="WMode" value="Window" /><param name="Play" value="-1" /><param name="Loop" value="-1" /><param name="Quality" value="High" /><param name="SAlign" value="" /><param name="Menu" value="-1" /><param name="Base" value="" /><param name="AllowScriptAccess" value="always" /><param name="Scale" value="ShowAll" /><param name="DeviceFont" value="0" /><param name="EmbedMovie" value="0" /><param name="BGColor" value="" /><param name="SWRemote" value="" /><param name="MovieData" value="" /><param name="SeamlessTabbing" value="1" /> <embed src="/KB/showcase/dundas_chartani/customanimation.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" width="300" height="300" type="application/x-shockwave-flash" />
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.

C#
// 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


Written By
United States United States
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!
This is a Organisation

3 members

Comments and Discussions

 
GeneralRe: Spam Scum Suckers Pin
Paddy Wack3-May-04 14:41
Paddy Wack3-May-04 14:41 
GeneralRe: Spam Scum Suckers Pin
Jamie Nordmeyer4-May-04 5:07
Jamie Nordmeyer4-May-04 5:07 
GeneralRe: Spam Scum Suckers Pin
Paddy Wack4-May-04 5:44
Paddy Wack4-May-04 5:44 
GeneralRe: Spam Scum Suckers Pin
Jamie Nordmeyer4-May-04 5:52
Jamie Nordmeyer4-May-04 5:52 
GeneralRe: Spam Scum Suckers Pin
Paddy Wack4-May-04 6:03
Paddy Wack4-May-04 6:03 
GeneralRe: Spam Scum Suckers Pin
Jamie Nordmeyer4-May-04 6:04
Jamie Nordmeyer4-May-04 6:04 
GeneralSpam Scum Sucker: Pin
Pis**d off user27-Aug-04 1:32
sussPis**d off user27-Aug-04 1:32 
GeneralRe: Spam Scum Suckers Pin
Andrew Bryan3-May-04 16:45
Andrew Bryan3-May-04 16:45 
An evaluation version of the chart can downloaded at any time from our website. These are watermarked but fully functioning and not time-limited. There are over 150 samples to get your charts developed in a very short time.

There is a eval download link in the article above.

As an employee of Dundas Software, I assure you that there has been no other Dundas employee posting -- contrary to Mr Wack.

Andrew Bryan
Program Manager,
Dundas Chart for .NET
GeneralRe: Spam Scum Suckers Pin
Jeff Varszegi3-May-04 14:05
professionalJeff Varszegi3-May-04 14:05 

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

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