I have flot animation on a line time graph. after the animation has finished the line changes slightly. How can i prevent this from ocurring?
https://jsfiddle.net/shorif2000/cq6chwu8/
var options = {
"xaxis": {
"mode": "time",
"timeformat": "%d/%m"
},
"yaxes": [{
"position": "left",
"min": 98,
"max": 100,
"tickSize": 1
}, {
"position": "right",
"min": 0,
"max": 2
}],
"series": {
"lines": {
"show": true,
"lineWidth": 3
},
"curvedLines": {
"apply": true
}
},
"colors": ["#008C00"],
"legend": {
"show": false
},
"grid": {
"hoverable": true,
"clickable": true
}
};
var data_ajax = [{"lines":{"show":true,"lineWidth":3},"points":{"show":false},"threshold":{"below":99.53,"color":"#CC0000"},"data":[{"0":1451433600000,"1":99.5},{"0":1451437200000,"1":99.51},{"0":1451440800000,"1":99.48},{"0":1451444400000,"1":99.46},{"0":1451448000000,"1":99.46},{"0":1451451600000,"1":99.46},{"0":1451455200000,"1":99.48},{"0":1451458800000,"1":99.46},{"0":1451462400000,"1":99.43},{"0":1451466000000,"1":99.42},{"0":1451469600000,"1":99.37},{"0":1451473200000,"1":99.35},{"0":1451476800000,"1":99.4},{"0":1451480400000,"1":99.38},{"0":1451484000000,"1":99.41},{"0":1451487600000,"1":99.41},{"0":1451491200000,"1":99.42},{"0":1451494800000,"1":99.43},{"0":1451498400000,"1":99.43},{"0":1451502000000,"1":99.41},{"0":1451505600000,"1":99.4},{"0":1451509200000,"1":99.41},{"0":1451512800000,"1":99.41},{"0":1451516400000,"1":99.44},{"0":1451520000000,"1":99.44},{"0":1451523600000,"1":99.44},{"0":1451527200000,"1":99.44},{"0":1451530800000,"1":99.43},{"0":1451534400000,"1":99.43},{"0":1451538000000,"1":99.53},{"0":1451541600000,"1":99.43},{"0":1451545200000,"1":99.43},{"0":1451548800000,"1":99.43},{"0":1451552400000,"1":99.43},{"0":1451556000000,"1":99.44},{"0":1451559600000,"1":99.46},{"0":1451563200000,"1":99.47},{"0":1451566800000,"1":99.47},{"0":1451570400000,"1":99.47},{"0":1451574000000,"1":99.47},{"0":1451577600000,"1":99.44},{"0":1451581200000,"1":99.44},{"0":1451584800000,"1":99.47},{"0":1451588400000,"1":99.49},{"0":1451592000000,"1":99.51},{"0":1451595600000,"1":99.49},{"0":1451599200000,"1":99.49},{"0":1451602800000,"1":99.49},{"0":1451606400000,"1":99.5},{"0":1451610000000,"1":99.51},{"0":1451613600000,"1":99.5},{"0":1451617200000,"1":99.49},{"0":1451620800000,"1":99.6},{"0":1451624400000,"1":99.49},{"0":1451628000000,"1":99.5},{"0":1451631600000,"1":99.48},{"0":1451635200000,"1":99.48},{"0":1451638800000,"1":99.47},{"0":1451642400000,"1":99.48},{"0":1451646000000,"1":99.48},{"0":1451649600000,"1":99.47},{"0":1451653200000,"1":99.47},{"0":1451656800000,"1":99.46},{"0":1451660400000,"1":99.46},{"0":1451664000000,"1":99.47},{"0":1451667600000,"1":99.46},{"0":1451671200000,"1":99.46},{"0":1451674800000,"1":99.47},{"0":1451678400000,"1":99.7},{"0":1451682000000,"1":99.48},{"0":1451685600000,"1":99.66},{"0":1451689200000,"1":99.69},{"0":1451692800000,"1":99.69},{"0":1451696400000,"1":99.7},{"0":1451700000000,"1":99.7},{"0":1451703600000,"1":99.7},{"0":1451707200000,"1":99.69},{"0":1451710800000,"1":99.69},{"0":1451714400000,"1":99.69},{"0":1451718000000,"1":99.69},{"0":1451721600000,"1":99.46},{"0":1451725200000,"1":99.46},{"0":1451728800000,"1":99.45},{"0":1451732400000,"1":99.45},{"0":1451736000000,"1":99.45},{"0":1451739600000,"1":99.43},{"0":1451743200000,"1":99.44},{"0":1451746800000,"1":99.44},{"0":1451750400000,"1":99.44},{"0":1451754000000,"1":99.43},{"0":1451757600000,"1":99.44},{"0":1451761200000,"1":99.64},{"0":1451764800000,"1":99.61},{"0":1451768400000,"1":99.62},{"0":1451772000000,"1":99.41},{"0":1451775600000,"1":99.42},{"0":1451779200000,"1":99.41},{"0":1451782800000,"1":99.39},{"0":1451786400000,"1":99.41},{"0":1451790000000,"1":99.4},{"0":1451793600000,"1":99.4},{"0":1451797200000,"1":99.4},{"0":1451800800000,"1":99.41},{"0":1451804400000,"1":99.41},{"0":1451808000000,"1":99.38},{"0":1451811600000,"1":99.37},{"0":1451815200000,"1":99.33},{"0":1451818800000,"1":99.36},{"0":1451822400000,"1":99.36},{"0":1451826000000,"1":99.35},{"0":1451829600000,"1":99.35},{"0":1451833200000,"1":99.37},{"0":1451836800000,"1":99.28},{"0":1451840400000,"1":99.24},{"0":1451844000000,"1":99.26},{"0":1451847600000,"1":99.25},{"0":1451851200000,"1":99.57},{"0":1451854800000,"1":99.39},{"0":1451858400000,"1":99.43},{"0":1451862000000,"1":99.43},{"0":1451865600000,"1":99.43},{"0":1451869200000,"1":99.42},{"0":1451872800000,"1":99.42},{"0":1451876400000,"1":99.41},{"0":1451880000000,"1":99.41},{"0":1451883600000,"1":99.41},{"0":1451887200000,"1":99.41},{"0":1451890800000,"1":99.38},{"0":1451894400000,"1":99.37},{"0":1451898000000,"1":99.31},{"0":1451901600000,"1":99.22},{"0":1451905200000,"1":99.2},{"0":1451908800000,"1":99.22},{"0":1451912400000,"1":99.23},{"0":1451916000000,"1":99.25},{"0":1451919600000,"1":99.3},{"0":1451923200000,"1":99.37},{"0":1451926800000,"1":99.42},{"0":1451930400000,"1":99.42},{"0":1451934000000,"1":99.4},{"0":1451937600000,"1":99.4},{"0":1451941200000,"1":99.4},{"0":1451944800000,"1":99.4},{"0":1451948400000,"1":99.4},{"0":1451952000000,"1":99.37}],"animator":{"start":0,"steps":135,"duration":3000,"direction":"right"}}]
$.plotAnimator($('#chart1'), data_ajax, options);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="chart1" style="width: 540px; height: 250px;">Your animation has 135 steps, but your data has more datapoints then that. This leads to interpolation in the animation, mostly visible at the positions of local extreme values ("spikes") in the chart.
Increasing the number of steps solves this, the best value is the number of datapoints minus one (updated fiddle):
"animator": {
"start": 0,
"steps": 145 - 1,
"duration": 3000,
"direction": "right"
}
var options = {
"xaxis": {
"mode": "time",
"timeformat": "%d/%m"
},
"yaxes": [{
"position": "left",
"min": 98,
"max": 100,
"tickSize": 1
}, {
"position": "right",
"min": 0,
"max": 2
}],
"series": {
"lines": {
"show": true,
"lineWidth": 3
},
"curvedLines": {
"apply": true
}
},
"colors": ["#008C00"],
"legend": {
"show": false
},
"grid": {
"hoverable": true,
"clickable": true
}
};
var data_ajax = [{"lines":{"show":true,"lineWidth":3},"points":{"show":false},"threshold":{"below":99.53,"color":"#CC0000"},"data":[{"0":1451433600000,"1":99.5},{"0":1451437200000,"1":99.51},{"0":1451440800000,"1":99.48},{"0":1451444400000,"1":99.46},{"0":1451448000000,"1":99.46},{"0":1451451600000,"1":99.46},{"0":1451455200000,"1":99.48},{"0":1451458800000,"1":99.46},{"0":1451462400000,"1":99.43},{"0":1451466000000,"1":99.42},{"0":1451469600000,"1":99.37},{"0":1451473200000,"1":99.35},{"0":1451476800000,"1":99.4},{"0":1451480400000,"1":99.38},{"0":1451484000000,"1":99.41},{"0":1451487600000,"1":99.41},{"0":1451491200000,"1":99.42},{"0":1451494800000,"1":99.43},{"0":1451498400000,"1":99.43},{"0":1451502000000,"1":99.41},{"0":1451505600000,"1":99.4},{"0":1451509200000,"1":99.41},{"0":1451512800000,"1":99.41},{"0":1451516400000,"1":99.44},{"0":1451520000000,"1":99.44},{"0":1451523600000,"1":99.44},{"0":1451527200000,"1":99.44},{"0":1451530800000,"1":99.43},{"0":1451534400000,"1":99.43},{"0":1451538000000,"1":99.53},{"0":1451541600000,"1":99.43},{"0":1451545200000,"1":99.43},{"0":1451548800000,"1":99.43},{"0":1451552400000,"1":99.43},{"0":1451556000000,"1":99.44},{"0":1451559600000,"1":99.46},{"0":1451563200000,"1":99.47},{"0":1451566800000,"1":99.47},{"0":1451570400000,"1":99.47},{"0":1451574000000,"1":99.47},{"0":1451577600000,"1":99.44},{"0":1451581200000,"1":99.44},{"0":1451584800000,"1":99.47},{"0":1451588400000,"1":99.49},{"0":1451592000000,"1":99.51},{"0":1451595600000,"1":99.49},{"0":1451599200000,"1":99.49},{"0":1451602800000,"1":99.49},{"0":1451606400000,"1":99.5},{"0":1451610000000,"1":99.51},{"0":1451613600000,"1":99.5},{"0":1451617200000,"1":99.49},{"0":1451620800000,"1":99.6},{"0":1451624400000,"1":99.49},{"0":1451628000000,"1":99.5},{"0":1451631600000,"1":99.48},{"0":1451635200000,"1":99.48},{"0":1451638800000,"1":99.47},{"0":1451642400000,"1":99.48},{"0":1451646000000,"1":99.48},{"0":1451649600000,"1":99.47},{"0":1451653200000,"1":99.47},{"0":1451656800000,"1":99.46},{"0":1451660400000,"1":99.46},{"0":1451664000000,"1":99.47},{"0":1451667600000,"1":99.46},{"0":1451671200000,"1":99.46},{"0":1451674800000,"1":99.47},{"0":1451678400000,"1":99.7},{"0":1451682000000,"1":99.48},{"0":1451685600000,"1":99.66},{"0":1451689200000,"1":99.69},{"0":1451692800000,"1":99.69},{"0":1451696400000,"1":99.7},{"0":1451700000000,"1":99.7},{"0":1451703600000,"1":99.7},{"0":1451707200000,"1":99.69},{"0":1451710800000,"1":99.69},{"0":1451714400000,"1":99.69},{"0":1451718000000,"1":99.69},{"0":1451721600000,"1":99.46},{"0":1451725200000,"1":99.46},{"0":1451728800000,"1":99.45},{"0":1451732400000,"1":99.45},{"0":1451736000000,"1":99.45},{"0":1451739600000,"1":99.43},{"0":1451743200000,"1":99.44},{"0":1451746800000,"1":99.44},{"0":1451750400000,"1":99.44},{"0":1451754000000,"1":99.43},{"0":1451757600000,"1":99.44},{"0":1451761200000,"1":99.64},{"0":1451764800000,"1":99.61},{"0":1451768400000,"1":99.62},{"0":1451772000000,"1":99.41},{"0":1451775600000,"1":99.42},{"0":1451779200000,"1":99.41},{"0":1451782800000,"1":99.39},{"0":1451786400000,"1":99.41},{"0":1451790000000,"1":99.4},{"0":1451793600000,"1":99.4},{"0":1451797200000,"1":99.4},{"0":1451800800000,"1":99.41},{"0":1451804400000,"1":99.41},{"0":1451808000000,"1":99.38},{"0":1451811600000,"1":99.37},{"0":1451815200000,"1":99.33},{"0":1451818800000,"1":99.36},{"0":1451822400000,"1":99.36},{"0":1451826000000,"1":99.35},{"0":1451829600000,"1":99.35},{"0":1451833200000,"1":99.37},{"0":1451836800000,"1":99.28},{"0":1451840400000,"1":99.24},{"0":1451844000000,"1":99.26},{"0":1451847600000,"1":99.25},{"0":1451851200000,"1":99.57},{"0":1451854800000,"1":99.39},{"0":1451858400000,"1":99.43},{"0":1451862000000,"1":99.43},{"0":1451865600000,"1":99.43},{"0":1451869200000,"1":99.42},{"0":1451872800000,"1":99.42},{"0":1451876400000,"1":99.41},{"0":1451880000000,"1":99.41},{"0":1451883600000,"1":99.41},{"0":1451887200000,"1":99.41},{"0":1451890800000,"1":99.38},{"0":1451894400000,"1":99.37},{"0":1451898000000,"1":99.31},{"0":1451901600000,"1":99.22},{"0":1451905200000,"1":99.2},{"0":1451908800000,"1":99.22},{"0":1451912400000,"1":99.23},{"0":1451916000000,"1":99.25},{"0":1451919600000,"1":99.3},{"0":1451923200000,"1":99.37},{"0":1451926800000,"1":99.42},{"0":1451930400000,"1":99.42},{"0":1451934000000,"1":99.4},{"0":1451937600000,"1":99.4},{"0":1451941200000,"1":99.4},{"0":1451944800000,"1":99.4},{"0":1451948400000,"1":99.4},{"0":1451952000000,"1":99.37}],"animator":{"start":0,"steps":145 - 1,"duration":3000,"direction":"right"}}]
$.plotAnimator($('#chart1'), data_ajax, options);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="chart1" style="width: 540px; height: 250px;">