title: How To Auto-Remove old Datapoints in Chart.js
body: <p>I've been dealing with such a problem for a long time, but I haven't found a solution yet, help me please</p>
  <p>I have a Chart for Real time data, which is updated by Javascript.</p>
  <p>But if the script runs to long, the data is getting crammed up. can you help me very fast</p>
  <p>The old Data would have to be shifted to the left side an then be deleted.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
  var ADCvalues = [];
  var Tvalues = [];
  var Axvalues = [];
  var Ayvalues = [];
  var Azvalues = [];
  var Gxvalues = [];
  var Gyvalues = [];
  var Gzvalues = [];
  var timeStamp = [];
  function showGraph()
  {
      var ctx = document.getElementById("Chart").getContext('2d');
      var Chart2 = new Chart(ctx, {
          type: 'line',
          data: {
              labels: timeStamp,  
              datasets: [{
                  label: "Ax",
                  fill: false, 
                  backgroundColor: 'rgba( 100, 200, 100 , 1)', 
                  borderColor: 'rgba( 100, 200, 100 , 1)',
                    pointRadius:0,
                    borderWidth:2,
                  data: Axvalues,
                  
                  
              },{
                  label: "Ay",
                  fill: false,  
                  backgroundColor: 'rgba( 200, 100, 100 , 1)', 
                  borderColor: 'rgba( 200, 100, 100 , 1)', 
                    pointRadius:0,
                    borderWidth:2,
                  data: Ayvalues,
                  
              },{
                  label: "Az",
                  fill: false, 
                  backgroundColor: 'rgba( 10, 150, 150 , 1)', 
                  borderColor: 'rgba( 10, 150, 150 , 1)', 
                    pointRadius:0,
                    borderWidth:2,
                  data: Azvalues,
                  
              }
              ],
          },
          tooltips:{
            mode:'nearest',
            intersect: false
            },
          options: {
            animation:{
                    duration:0
                    },
                    hover: {
              animationDuration: 0 
          },
              title: {
                      display: true,
                      text: "Color Codes"
                  },
                 
              maintainAspectRatio: false,
              elements: {
              line: {
                      tension: 0.2 
                    
                  }
              },
              scales: {
                      yAxes: [{
                        max: 0.1,
                        min: -0.1,
                          ticks: {
                              stepSize: 0.1
                          }
                      }]
                      
              },
          }
      });
  
  }
  
  
  window.onload = function() {
    console.log(new Date().toLocaleTimeString());
    
    
  }; 
  setInterval(function() {
    getData();
    
    
  }, 10); 
  
  function getData() {
    
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
     
    var time = (new Date().toLocaleTimeString());
    var txt = this.responseText;
    var obj = JSON.parse(txt);
        ADCvalues.push(obj.ADC);
        Tvalues.push(obj.Temperature);
        Axvalues.push(obj.Ax);
        Ayvalues.push(obj.Ay);
        Azvalues.push(obj.Az);
        Gxvalues.push(obj.Gx);
        Gyvalues.push(obj.Gy);
        Gzvalues.push(obj.Gz);
       timeStamp.push(time);
        showGraph();
    
        
      var table = document.getElementById("dataTable");
      var row = table.insertRow(1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
      var cell6 = row.insertCell(5);
      var cell7 = row.insertCell(6);
      var cell8 = row.insertCell(7);
      var cell9 = row.insertCell(8);
      cell1.innerHTML = time;
      cell3.innerHTML = obj.Temperature;
      cell4.innerHTML = obj.Ax;
      cell5.innerHTML = obj.Ay;
      cell6.innerHTML = obj.Az;
      cell7.innerHTML = obj.Gx;
      cell8.innerHTML = obj.Gy;
      cell9.innerHTML = obj.Gz;
  
      }
    
    };
    xhttp.open("GET", "readADC", true);
    xhttp.send();
  }
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>