Category : Javascript | Author : Chtiwi Malek | First posted : 10/15/2013 | Updated : 8/14/2014
Tags : flot, plugin, animate, charts, animation, plot, draw, dynamic, jquery, plugins, free, open source
jQuery Flot Animator

jQuery Flot Animator

Flot Animator is a free jQuery plugin that will add smooth or gradual animations to Flot charts.
It will allow you to highlight and draw attention to some charts and/or series by easily adding animation to your existing charts. Flot Animator also animates any type of series (lines, points, bars ...)
Start delay: Steps: Duration: ms Direction:   

How it works?

This plugin will read the original data array and will build a second array containing all the frames needed for the animation: the new array length will be equal the total animation frames.

Then it will use “setTimeout” and the jQuery Flot “.setData()” and  “.draw()” functions to draw each frame, and when the animation is complete, the original data is restored and displayed.

How to use this plugin :

It is very easy to animate a Flot chart with Flot Animator, just add a reference to the Flot Animator JavaScript file “jquery.flot.animator.min.js” after your “jquery.flot.min.js” reference, and change your plot function from :
var plot = $.plot($("#myChart"), [{ data : ... }]);
var plot = $.plotAnimator($("#myChart"), [{ data : ... }]);
You can also choose which series to animate and change some properties of the animation by adding the “animator: {}” keyword :
var plot = $.plotAnimator($("#myChart"), [{ data : dt, animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }]);
In the example above, the animation will start after 0.1 second (100ms) and will last 1 second, the animation will begin from the left to the right and will be composed of 99 frames :
Click =>
Also when the animation is complete an event will be fired “animatorComplete” on the chart container:
$("#myChart ").on("animatorComplete", function() {
  // do something ...
This version '1.0' of Flot Animator will display all series available in your chart/graph, but you’ll have to choose only one of the series to animate, I will try to add multiple, simultaneous (or one at a time) series animation in the next version.

More demos and samples are available here =>

This plugin is available under Creative Commons Attribution 3.0 Unported License, You can use it freely for commercial and personal projects.

Source code, minified JavaScript and demo files are available in the attached file, and on Github.
About the author :
Malek Chtiwi is the man behind
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Flot Animator at
Hey , I have featured this awesome jquery plugin at <a href""></a>
- by Jay Kanakiya on 11/4/2013
Thanks for the information you brought to us. They are very interesting and new. Look forward to reading more useful and new articles from you!
html color
- by html color on 7/3/2017
This is just great, very valuable info, and awesome company logo!
- by lipa pipa on 9/12/2017
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :