Animation
Overview
Zingchart offers a variety of animated chart options. Plus, it comes with the ability to control what type of animation and in what order things are animated through various effects, methods, and sequences.
Animated Chart Basics
The first step to adding animations to your chart is to add the "animation" attribute to your "plot" object.
plot: {
animation: {
}
}
At the minimum, you will need to specify the "effect" that you want to use. We will look more at what effects are available later in this article. The example below is using the FADE_IN effect.
plot: {
animation: {
effect: 'ANIMATION_FADE_IN'
}
}
Attributes
After you have your "animation" object, there are five different attributes you can set, including "effect", "delay", "method", "sequence", and "speed".
Effect
As stated before, at the very least you need to specify an "effect" to add an animation to your chart. You can specify your animation effect using a numeric code or the corresponding string name.
The numeric code and corresponding string name for each effect are:
| Numeric Code | String Name |
|---|---|
| 1 | ANIMATION_FADE_IN |
| 2 | ANIMATION_EXPAND_VERTICAL |
| 3 | ANIMATION_EXPAND_TOP |
| 4 | ANIMATION_EXPAND_BOTTOM |
| 5 | ANIMATION_EXPAND_LEFT |
| 6 | ANIMATION_EXPAND_RIGHT |
| 7 | ANIMATION_EXPAND_HORIZONTAL |
| 8 | ANIMATION_SLIDE_LEFT |
| 9 | ANIMATION_SLIDE_RIGHT |
| 10 | ANIMATION_SLIDE_TOP |
| 11 | ANIMATION_SLIDE_BOTTOM |
| 12 | ANIMATION_UNFOLD_HORIZONTAL |
| 13 | ANIMATION_UNFOLD_VERTICAL |
For demos of each effect, please visit our JSON Syntax page.
plot: {
animation: {
effect: 'ANIMATION_SLIDE_LEFT'
},
}
Delay
The "delay" attribute is used to set the initial time it will take before the animation starts. The number you specify is measured in milliseconds. If you specify a single digit number (1 - 9), the number will be measured in seconds.
plot: {
animation: {
effect: '1',
delay: 2000
}
}
Method
You also have the option to specify a "method" to control how your animation will behave. Just like with the "effect" attribute, you can use either the numeric code or its corresponding string name.
The numeric code and corresponding string name for each method are:
| Numeric Code | String Name |
|---|---|
| 0 | ANIMATION_LINEAR |
| 1 | ANIMATION_BACK_EASE_OUT |
| 2 | ANIMATION_ELASTIC_EASE_OUT |
| 3 | ANIMATION_BOUNCE_EASE_OUT |
| 4 | ANIMATION_STRONG_EASE_OUT |
| 5 | ANIMATION_REGULAR_EASE_OUT |
For demos of each effect, please visit our JSON Syntax page.
plot: {
animation: {
delay: 10,
effect: '3',
speed: '500',
method: 'ANIMATION_BOUNCE_EASE_OUT'
}
}
Sequence
The "sequence" attribute is used to specify which order your plot items animate in. You can have it all animate in at once, in groups, or one plot node at a time.
The numeric code and corresponding string name for each sequence are:
| Numeric Code | String Name |
|---|---|
| 0 | ANIMATION_NO_SEQUENCE |
| 1 | ANIMATION_BY_PLOT |
| 2 | ANIMATION_BY_NODE |
| 3 | ANIMATION_BY_PLOT_AND_NODE |
For demos of each effect, please visit our JSON Syntax page.
plot: {
animation: {
effect: '11',
method: '3',
sequence: 'ANIMATION_BY_PLOT_AND_NODE',
speed: 10
}
}
Speed
You can also specify how fast or slow you would like your chart to animate using the "speed" attribute. You can specify your speed in milliseconds, or by using its corresponding string name.
Just like with the "delay" attribute, if you specify a single digit number (1 - 9), the number will be measured in seconds.
plot: {
animation: {
effect: '2',
method: '3',
sequence: 'ANIMATION_BY_PLOT',
speed: 'ANIMATION_FAST'
}
}
Summary
Animated JavaScript charts can be a great way to draw attention to your visualizations, or if you just want to add a little flair. Now that you've seen some of what you can do with animations, have some fun and be creative.
Don't forget, a comprehensive list of available attributes and objects can be found on our JSON Syntax page.