This topic provides information on enabling the igDataChart™ controls transition animation feature along with a listing of the supported series.
The following topic is a prerequisite to understanding this topic:
This topic demonstrates how to add the igDataChart™ control to a page and bind it to data.
This topic contains the following sections:
This feature allows you to animate the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the columnSeries animates by rising from the x-axis, a lineSeries animates by drawing from the y-axis. Refer to the following sample to see how the different series animate visually, Transition Animation and Transition Animation (Financial).
Enable animated transitions by setting the isTransitionInEnabled property to “true”.
By default, animated transitions are disabled.
Animated transitions can be configured in terms of transition type, speed of the individual data points relative to each other, and the easing transition (managed by an easing function).
The following series types support the transition animations feature:
Many types of animated transitions are supported based on the nature of the movement and its direction:
fromZero – Series transitions in from the reference value of the value axis.accordionFromLeft – Series accordions in from the left.accordionFromRight – Series accordions in from the right.accordionFromTop – Series accordions in from the top.accordionFromBottom – Series accordions in from the bottom.accordionFromCategoryAxisMinimum – Series accordions in from the category axis minimum.accordionFromCategoryAxisMaximum – Series accordions in from the category axis maximum.accordionFromValueAxisMaximum – Series accordions in from the value axis maximum.accordionFromValueAxisMinimum – Series accordions in from the value axis minimum.expand – Series expands from the value midpoints.sweepFromLeft – Series sweeps in from the leftsweepFromRight – Series sweeps in from the rightsweepFromTop – Series sweeps in from the top.sweepFromBottom – Series sweeps in from the bottom.sweepFromCenter – Series sweeps in from the center.sweepFromCategoryAxisMaximum – Series sweeps in from the category axis maximum.sweepFromCategoryAxisMinimum – Series sweeps in from the category axis minimum.sweepFromValueAxisMaximum – Series sweeps in from the value axis maximum.sweepFromValueAxisMinimum – Series sweeps in from the value axis minimum.The transition’s speed type determines the speed of the individual items of the current series’s transition relative to each other as the animated transition is playing. The following are the different speed types:
auto – Automatically selects a speed type.indexScaled – Data points arrive later if their index is further from the axis origin.normal – All speeds are normal, data points arrive at the same time.random – Data points arrive at random times.valueScaled - Data points arrive later if their value is further from the starting point.The easing function determines what way the animation initially eases in. Apply any easing function. It is set to cubicEase by default.
The transition type is configured by setting the transitionInMode property to the desired transition name. Automatic selection of the transition type based on the series type is possible, too, by setting the property to “auto” (default).
The following example demonstrates how to enable and change transition in animations for the financial chart:
The following topic provides additional information related to this topic:
This topic demonstrates how to add the igDataChart™ control to a page
and bind it to data.
The following samples provide additional information related to this topic.
View on GitHub