flot line changes after animation -

-

i have flot animation on line time graph. after animation has finished line changes slightly. how can prevent 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, data has more datapoints that. leads interpolation in animation, visible @ positions of local extreme values ("spikes") in chart.

increasing number of steps solves this, best value number of datapoints minus 1 (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;">


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more