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
Usage fix
Hi, the quick "how to use" part needs an update: use $.plotAnimator instead of $.plotanimator (uppercase "A").
- by Joerg Maeckle on 7/21/2014
code updated, thanks alot
- by Chtiwi Malek on 7/29/2014
Plotting multiple waveforms
Hey.. Have tried your plugin. but it doesnt work for multiple waveforms on a single plot. I have 8 signals i need to plot for plotting ecg's but only 1 of the signals is animated...

Thanks in advance... 
- by cyrus furtado on 8/22/2014
Multiple line animate???
Hi, as cyrus furtado said the function doesn't work on more than 1 lines in the same chart. Is there any fix for this ?
Thanks in advance
- by Nikolaos Raptis on 9/12/2014
Glowing effect for specific points in a line chart?
Hi, is it possible to give a continuous glowing effect to specific points in a line chart - these points are not satisfying certain condition and I want to highlight the same to the user. I have asked a question in stackoverflow as well.... - Thanks!
- by Krishnamoorthy R on 2/10/2015
Draw only the last added point with animation?
Hi guys,
I want to know is it possible to draw only the last added point with smooth slide animation effect?

Thanks in advance.
- by Georgi on 9/10/2015
Fantastic plugin!
Thank you for this fantastic plugin!
Its possible to give a easeing effect to the movement?

- by JT on 12/2/2016
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :

» Member access