Push data only from current span to chart

@@ -133,6 +133,7 @@
 
 
   var socket = io('http://localhost:41338');
   var socket = io('http://localhost:41338');
   var defaultSpan = 0;
   var defaultSpan = 0;
+  var spans = [];
 
 
   var defaultDataset = {
   var defaultDataset = {
     label: '',
     label: '',
@@ -162,7 +163,8 @@
       enabled: false
       enabled: false
     },
     },
     responsive: true,
     responsive: true,
-    maintainAspectRatio: false
+    maintainAspectRatio: false,
+    animation: false
   };
   };
 
 
   var createChart = function (ctx, dataset) {
   var createChart = function (ctx, dataset) {
@@ -208,11 +210,11 @@
 
 
   var onSpanChange = function (e) {
   var onSpanChange = function (e) {
     e.target.classList.add('active');
     e.target.classList.add('active');
-    defaultSpan = Integer.parseInt(e.target.id);
+    defaultSpan = parseInt(e.target.id);
 
 
     var otherSpans = document.getElementsByTagName('span');
     var otherSpans = document.getElementsByTagName('span');
     for (var i = 0; i < otherSpans.length; i++) {
     for (var i = 0; i < otherSpans.length; i++) {
-      if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('remove');
+      if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('active');
     }
     }
   };
   };
 
 
@@ -261,6 +263,11 @@
 
 
     var spanControls = document.getElementById('span-controls');
     var spanControls = document.getElementById('span-controls');
     data.forEach(function (span, index) {
     data.forEach(function (span, index) {
+      spans.push({
+        retention: span.retention,
+        interval: span.interval
+      });
+
       var spanNode = document.createElement('span');
       var spanNode = document.createElement('span');
       var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
       var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
       spanNode.appendChild(textNode);
       spanNode.appendChild(textNode);
@@ -271,6 +278,7 @@
   });
   });
 
 
   socket.on('stats', function (data) {
   socket.on('stats', function (data) {
+    if (data.retention === spans[defaultSpan].retention && data.interval === spans[defaultSpan].interval) {
       cpuStat.textContent = data.os.cpu.toFixed(1) + '%';
       cpuStat.textContent = data.os.cpu.toFixed(1) + '%';
       cpuChart.data.datasets[0].data.push(data.os.cpu);
       cpuChart.data.datasets[0].data.push(data.os.cpu);
       cpuChart.data.labels.push(data.os.timestamp);
       cpuChart.data.labels.push(data.os.timestamp);
@@ -292,11 +300,15 @@
       rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
       rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
       rpsChart.data.labels.push(data.responses.timestamp);
       rpsChart.data.labels.push(data.responses.timestamp);
 
 
-    charts.forEach(function(chart) {
+      charts.forEach(function (chart) {
+        if (spans[defaultSpan].retention < chart.data.labels.length) {
           chart.data.datasets[0].data.shift();
           chart.data.datasets[0].data.shift();
           chart.data.labels.shift();
           chart.data.labels.shift();
+        }
+
         chart.update();
         chart.update();
       });
       });
+    }
   });
   });
 </script>
 </script>
 </body>
 </body>