[Chartjs]-Auto-Remove old Datapoints in Chart.js

by

3👍

✅

To make this work, I added a config var MAX_DATA_SET_LENGTH and then in addData() I check to see if the length of either the upload/download data set is greater than your config.

If the data set is larger than you want, I shift() the data set array (remove the first entry). I also shift/remove the first label too to keep the data accurate.

If you would still like to keep all the data, I would suggest keeping it in a separate array that Chart.js does not use.

Also, I switched the code to use setInterval() instead since it makes more sense here. You want to run addData on an interval instead of once after a timeout (even though you still make it work by setting the timeout multiple times)

var MAX_DATA_SET_LENGTH = 15;

function reLoad() {
  adddata(Math.random() * 100, Math.random() * 10);
}

var canvas = document.getElementById('myChart');
var data = {
  datasets: [{
      label: 'Download',
      borderColor: 'rgb(237, 18, 237)',
      fill: false,
      borderWidth: 3
    },
    {
      label: 'Upload',
      borderColor: 'rgb(0, 115, 255)',
      fill: false,
      borderWidth: 3
    }
  ]
}
var options = {
  scales: {
    yAxes: [{
      type: 'linear',
    }],

    xAxes: [{
      type: 'time',
      ticks: {
        maxTicksLimit: 5,
      },
      time: {
        unit: 'second',
        displayFormats: {
          'second': 'HH:mm:ss',
        },
        tooltipFormat: 'HH:mm:ss',
      }
    }]
  },
  showLines: true
};
var myChart = new Chart.Line(canvas, {
  data: data,
  options: options
});

function adddata(download = NaN, upload = NaN, label = moment()) {
  var datasets = myChart.data.datasets;
  var labels = myChart.data.labels;
  var downloadDataSet = datasets[0].data;
  var uploadDataSet = datasets[1].data;

  var downloadDataLength = downloadDataSet.length;
  var uploadDataLength = uploadDataSet.length;

  // if upload/download's data set has more than MAX_DATA_SET_LENGTH entries, 
  // remove the first one entry and push on a new data entry
  var didRemoveData = false;
  if (downloadDataLength > MAX_DATA_SET_LENGTH) {
    downloadDataSet.shift();
    didRemoveData = true;
  }

  if (uploadDataLength > MAX_DATA_SET_LENGTH) {
    uploadDataSet.shift();
    didRemoveData = true;
  }

  // if either download or upload data was removed, we also need to remove
  // the first label to keep the data from squeezing in.
  if (didRemoveData) {
    labels.shift();
  }

  labels.push(label);
  downloadDataSet.push(download);
  uploadDataSet.push(upload);
  myChart.update();
}


setInterval(reLoad, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400px" height="100px"></canvas>

Leave a comment