In This Topic
The easiest way to create animated charts is by applying an animation theme to the chart. The animation theme will automatically apply animation styles with proper start and duration as well as other adjustments like animation bounds mode etc.
Creating an Animation Theme
You create an animation theme by creating an instance of the NAnimationTheme class, for example:
| C# |
Copy Code
|
|
NAnimationTheme animationTheme = new NAnimationTheme();
animationTheme.Apply(nChartControl1.Document);
|
| Visual Basic |
Copy Code
|
|
Dim animationTheme As New NAnimationTheme
animationTheme.Apply(NChartControl1.Document)
|
This will create a default animation theme and apply it to the specified chart document.
Controlling the Animation Sequence
When you apply an animation theme by default it will animate all chart elements that support animation simultaneously. In certain cases however you may decide to animate the chart sequentially by instructing the theme to animate the chart panel by panel. This is done by setting one of the properties in the following table to true:
| Property |
Description |
| AnimatePanelsSequentially |
When set to true the theme will animate the control scene panel by panel. For example consider you have a simple chart configuration consisting of a label, chart and legend. In this case the control will first animate the label, then the chart and finally the legend. |
| AnimateChartsSequentially |
When set to true the animation applied to the control will first animate the chart axes and walls and then the chart series. This means that the chart series will not be visible until the axes and walls are animated. |
| AnimateSeriesSequentially |
When set to true the series contained in each chart will be animated one by one, in the order they are added to the chart series collection. |
| AnimateDataPointsSequentially |
When set to true the datapoints contained within a series will be animated one by one. |
| AnimateGaugesSequentially |
When set to true the gauge axes will be animated before the indicators within a gauge. |
| AnimateIndicatorsSequentially |
When set to true the gauge indicators will be animated one by one, instead of animating them simultaneously. |
The following code snippet shows how to instruct the control to animate series and data points sequentially:
| C# |
Copy Code
|
|
NAnimationTheme animationTheme = new NAnimationTheme();
animationTheme.AnimateSeriesSequentially = true;
animationTheme.AnimateDataPointsSequentially = true;
animationTheme.Apply(nChartControl1.Document);
|
| Visual Basic |
Copy Code
|
|
Dim animationTheme As New NAnimationTheme
animationTheme.AnimateSeriesSequentially = True
animationTheme.AnimateDataPointsSequentially = True
animationTheme.Apply(NChartControl1.Document)
|
Controlling the Animation Duration
The animation theme object also allows you to control the duration of the animation style applied on individual chart elements. The following table shows the properties that control this:
| Property |
Description |
| AxesAnimationDuration |
Controls the duration of animations applied on chart and gauge axes. |
| WallsAnimationDuration |
Controls the duration of animations applied on chart walls. |
| SeriesAnimationDuration |
Controls the duration of animations applied on chart series. If data points within a series are animated sequentially, then this value control the total duration of all data point animations within a series. |
| IndicatorsAnimationDuration |
Controls the duration of animations applied on gauge indicators. |
The following code snippets show how to extend the series animation duration to 5 seconds:
| C# |
Copy Code
|
|
NAnimationTheme animationTheme = new NAnimationTheme();
animationTheme.AnimateSeriesSequentially = true;
animationTheme.SeriesAnimationDuration = 5;
animationTheme.Apply(nChartControl1.Document);
|
| Visual Basic |
Copy Code
|
|
Dim animationTheme As New NAnimationTheme
animationTheme.AnimateSeriesSequentially = True
animationTheme.SeriesAnimationDuration = 5
animationTheme.Apply(NChartControl1.Document)
|
Controlling the Animation Type
The animation theme object has a property called AnimationThemeType that allows you to change the type of animation applied on individual chart elements. This property accepts values from the AnimationThemeType enumeration. The following table lists the available options:
| Animation Theme Type |
Description |
| Scale |
The animation theme will create animations that scale chart elements starting from zero to their original size. |
| Fade |
The animation theme will create animations that fade in chart elements starting from completely transparent to their original transparency. |
| ScaleAndFade |
The animation will create animations that simultaneously scale and fade in chart elements. |
The following code snippets show to change the animation theme type:
| C# |
Copy Code
|
|
NAnimationTheme animationTheme = new NAnimationTheme();
animationTheme.AnimationThemeType = AnimationThemeType.ScaleAndFade;
animationTheme.Apply(NChartControl1.Document);
|
| Visual Basic |
Copy Code
|
|
Dim animationTheme As New NAnimationTheme
animationTheme.AnimationThemeType = AnimationThemeType.ScaleAndFade
animationTheme.Apply(NChartControl1.Document)
|
Related Examples
Windows Forms \ Image Export \ Animation Themes
Web Forms \ Flash \ Animation Themes 1
Web Forms \ Flash \ Animation Themes 2