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"
    }
}
https://app.zingsoft.com/demos/embed/OJM3JEFK
https://app.zingsoft.com/demos/embed/OJM3JEFK

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"
    },
}
https://app.zingsoft.com/demos/embed/KFNRNB4I
https://app.zingsoft.com/demos/embed/KFNRNB4I

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"
    }
}
https://app.zingsoft.com/demos/embed/75Q8X0LD
https://app.zingsoft.com/demos/embed/75Q8X0LD

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"
    }
}
https://app.zingsoft.com/demos/embed/L8U41MTQ
https://app.zingsoft.com/demos/embed/L8U41MTQ

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
    }
}
https://app.zingsoft.com/demos/embed/JFNPS3MP
https://app.zingsoft.com/demos/embed/JFNPS3MP

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"
    }
}
https://app.zingsoft.com/demos/embed/1OXOCFPS
https://app.zingsoft.com/demos/embed/1OXOCFPS

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.