title: Plotly: How to discard older points?
body: <p>TL;DR I want to display a long-running strip chart with Plotly.js. I don't know how to discard old points.</p>
  
  <p><strong>Details</strong></p>
  
  <p>The following updater from my CodePen at  <a href="https://codepen.io/Michael-F-Ellis/pen/QvXPQr" rel="nofollow noreferrer">https://codepen.io/Michael-F-Ellis/pen/QvXPQr</a> does almost what I want. It shows a set of 20 samples in 2 traces that update continuously at 500 msec intervals. At the end of the demo, it plots all the points to show they still exist.</p>
  
  <pre><code>var cnt = 0;
  var interval = setInterval(function() {
    // Add next point to each trace
    Plotly.extendTraces('graph', {
      y: [[rand()], [rand()]]
    }, [0, 1])
    // Display only 20 most recent points
    Plotly.relayout('graph', { 'xaxis.range': [cnt-20, cnt]})
  
    cnt = cnt+1;
    if(cnt === 100) {
      // Before ending the run, show all points
      // to demonstrate they still exist in Plotly.
      Plotly.relayout('graph', { 'xaxis.range': [0, cnt]});
      clearInterval(interval);
    }
  }, 500);
  </code></pre>
  
  <p>The problem is that I <strong>do</strong> want to delete older points.  The real application needs to run essentially forever on a system with limited memory.  I'm looking for a Plotly call that will drop the oldest N trace points. It needs to be reasonably efficient as performance of the target system is also limited.</p>
  
  <p>Thanks!</p>