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:

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:

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:

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.