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 : ... }]);
To:
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 => http://www.codicode.com/demo/flotanimator/

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 Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Flot Animator at jquer.in
Hey , I have featured this awesome jquery plugin at <a href"http://jquer.in/">jquer.in</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!  http://handypixel.com/professional-company-logo-design/
- by lipa pipa on 9/12/2017
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....http://stackoverflow.com/questions/28407257/flot-line-chart-animate-a-point - 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?

Thanks!
- by JT on 12/2/2016
BlackMen
This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work [url=https://brsm.io/instagram-auto-likes/]best social media services[/url]
- by BlackMen on 7/30/2017
BlackMen
Thanks for sharing the info, keep up the good work going.... I really enjoyed exploring your site. good resource...canvas foto
- by BlackMen on 8/13/2017
company logo
professional company logo http://handypixel.com/professional-company-logo-design/​ 
- by lipa pipa on 9/12/2017
company logo
professional company logo http://handypixel.com/professional-company-logo-design/​ 
- by lipa pipa on 9/12/2017
www.talktomcalisters.com
I thank you for the information! I was looking for and could not find. You helped me!
<a href="http://guestsurveyclub.com/www-talktomcalisters-com/">www.talktomcalisters.com</a>
- by www.talktomcalisters.com on 9/27/2017
as
<a href="http://signaturia.com">signaturia.com</a> 
- by sagf on 10/9/2017
thanks
[url]http://vakilmodafe24.ir/[/url]

[url]
http://www.musicsingle.ir/[/url]
- by vahid on 10/16/2017
thanks
<a href="http://www.musicsingle.ir/">musicsingle</a>

<a href="http://vakilmodafe24.ir/">vakilmodafe24</a>
- by vahid on 10/16/2017
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access