javascript - Plotly: How to discard older points? -
tl;dr want display long-running strip chart plotly.js. don't know how discard old points.
details
the following updater codepen @ https://codepen.io/michael-f-ellis/pen/qvxpqr want. shows set of 20 samples in 2 traces update continuously @ 500 msec intervals. @ end of demo, plots points show still exist.
var cnt = 0; var interval = setinterval(function() { // add next point each trace plotly.extendtraces('graph', { y: [[rand()], [rand()]] }, [0, 1]) // display 20 recent points plotly.relayout('graph', { 'xaxis.range': [cnt-20, cnt]}) cnt = cnt+1; if(cnt === 100) { // before ending run, show points // demonstrate still exist in plotly. plotly.relayout('graph', { 'xaxis.range': [0, cnt]}); clearinterval(interval); } }, 500);
the problem do want delete older points. real application needs run forever on system limited memory. i'm looking plotly call drop oldest n trace points. needs reasonably efficient performance of target system limited.
thanks!
https://codepen.io/michael-f-ellis/pen/yxeewm
the above seems workable behavioral standpoint. here's revised updating routine:
plotly.plot('graph', data); var cnt = 0; var max = 20; var interval = setinterval(function() { // add next point each trace plotly.extendtraces('graph', { y: [[rand()], [rand()]] }, [0, 1]) // keep 'max' recent points if(cnt > max) { data[0].y.shift(); data[1].y.shift(); } cnt = cnt+1; if(cnt === 100) { // before ending run, show points // demonstrate 'max' points // still exist in plotly. plotly.relayout('graph', { 'xaxis.range': [0, cnt]}); clearinterval(interval); } }, 500);
the solution keep data object in var outside of plotly , use shift()
drop old points beginning of array new points added.
i'm open solution, if there known memory or performance problems approach.
Comments
Post a Comment