javascript - flot multiple line graph animation -

i have multiple series on graph , animate them not working. using flot , animator plugin.

https://jsfiddle.net/shorif2000/l0vtrgc2/

var datasets = [{"label":"it","curvedlines":{"apply":true},"animator":{"start":0,"steps":7,"duration":3000,"direction":"right"},"idx":0,"data":[{"0":1433156400000,"1":"095.07"},{"0":1435748400000,"1":"097.80"},{"0":1438426800000,"1":"096.72"},{"0":1441105200000,"1":"097.62"},{"0":1443697200000,"1":"097.68"},{"0":1446379200000,"1":"098.49"},{"0":1448971200000,"1":"098.59"},{"0":1451649600000,"1":"098.69"}]},{"label":"network","curvedlines":{"apply":true},"animator":{"start":0,"steps":7,"duration":3000,"direction":"right"},"idx":1,"data":[{"0":1433156400000,"1":"095.07"},{"0":1435748400000,"1":"097.80"},{"0":1438426800000,"1":"096.72"},{"0":1441105200000,"1":"097.62"},{"0":1443697200000,"1":"097.68"},{"0":1446379200000,"1":"098.49"},{"0":1448971200000,"1":"098.59"},{"0":1451649600000,"1":"098.69"}]},{"label":"success rate","curvedlines":{"apply":true},"animator":{"start":0,"steps":7,"duration":3000,"direction":"right"},"idx":2,"data":[[1433156400000,98.58],[1433156400000,null],[1433156400000,95.18],[1433156400000,null],[1435748400000,null],[1438426800000,null],[1441105200000,null],[1443697200000,null],[1446379200000,null],[1448971200000,null],[1451649600000,null]]}];  var options = {"series":{"lines":{"show":true},"curvedlines":{"active":true}},"xaxis":{"mode":"time","ticksize":[1,"month"],"timeformat":"%b %y"},"grid":{"clickable":true,"hoverable":true},"legend":{"nocolumns":3,"show":true}};  $.plotanimator($('#cagraph'), datasets, options); 

problem have when add curved lines not work. https://github.com/michaelzinsmaier/curvedlines

without curvedlines plugin (like in fiddle in question):

1) if have multiple data series , use animator, animate last series. other series drawn instantly. (you can see in fiddle when comment out third data series.)

2) last data series has 2 points @ same date, there nothing animate (this leads problems curvedlines plugin series).

to animate multiple data series 1 one see answer question.

with curvedlines plugin:

3) curvedlines plugin doesn't work animator plugin (probably because animator plugin generates new partial data series each step). can work around issue these steps:

a) plot curvedlines chart without animator,
b) read data points chart , replace original data,
c) change options (deactivate curvedlines since new data curved , adjust step count new data),
d) plot animated chart new data.

see fiddle working example 1 data series. relevant code:

var plot = $.plot($('#cagraph'), datasets, options); var newdata = plot.getdata()[0].datapoints.points;  datasets[0].data = []; (var = 0; < newdata.length; = i+2) {     datasets[0].data.push([newdata[i], newdata[i+1]]); } datasets[0].animator.steps = (newdata.length / 2) - 1; options.series.curvedlines.active = false;  var ani = $.plotanimator($('#cagraph'), datasets, options); 

full solution:

combining 2 parts above fiddle animates 2 curved lines 1 one (the third data series left out because of issues mentioned under 2)). relevant code:

var chartcount = datasets.length; var chartsdone = 0;  var plot = $.plot($('#cagraph'), datasets, options); (var = 0; < chartcount; i++) {     var newdata = plot.getdata()[i].datapoints.points;     datasets[i].data = [];     (var j = 0; j < newdata.length; j = j + 2) {         datasets[i].data.push([newdata[j], newdata[j + 1]]);     }     datasets[i].animator.steps = (newdata.length / 2) - 1; }  options.series.curvedlines.active = false; var ani = $.plotanimator($('#cagraph'), [datasets[0]], options); $("#cagraph ").on("animatorcomplete", function() {     chartsdone++;     if (chartsdone < chartcount) {         ani = $.plotanimator($('#cagraph'), datasets.slice(0, chartsdone + 1), options);     } });