Fix changing spans

@@ -216,6 +216,8 @@
     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('active');
       if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('active');
     }
     }
+
+    socket.emit('change');
   };
   };
 
 
   socket.on('start', function (data) {
   socket.on('start', function (data) {
@@ -225,25 +227,25 @@
     data[defaultSpan].os.pop();
     data[defaultSpan].os.pop();
 
 
     cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
     cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
-    cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
+    cpuChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
       return point.cpu;
       return point.cpu;
     });
     });
     cpuChart.data.labels = data[defaultSpan].os.map(addTimestamp);
     cpuChart.data.labels = data[defaultSpan].os.map(addTimestamp);
 
 
     memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
     memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
-    memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
+    memChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
       return point.memory;
       return point.memory;
     });
     });
     memChart.data.labels = data[defaultSpan].os.map(addTimestamp);
     memChart.data.labels = data[defaultSpan].os.map(addTimestamp);
 
 
     loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
     loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
-    loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
-      return point.load[defaultSpan];
+    loadChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
+      return point.load[0];
     });
     });
     loadChart.data.labels = data[defaultSpan].os.map(addTimestamp);
     loadChart.data.labels = data[defaultSpan].os.map(addTimestamp);
 
 
     responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
     responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
-    responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
+    responseTimeChart.data.datasets[0].data = data[defaultSpan].responses.map(function (point) {
       return point.mean;
       return point.mean;
     });
     });
     responseTimeChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
     responseTimeChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
@@ -251,7 +253,7 @@
     if (data[defaultSpan].responses.length >= 2) {
     if (data[defaultSpan].responses.length >= 2) {
       var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
       var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
       rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
       rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
-      rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
+      rpsChart.data.datasets[0].data = data[defaultSpan].responses.map(function (point) {
         return point.count / deltaTime * 1000;
         return point.count / deltaTime * 1000;
       });
       });
       rpsChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
       rpsChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
@@ -262,6 +264,7 @@
     });
     });
 
 
     var spanControls = document.getElementById('span-controls');
     var spanControls = document.getElementById('span-controls');
+    if (data.length !== spans.length) {
       data.forEach(function (span, index) {
       data.forEach(function (span, index) {
         spans.push({
         spans.push({
           retention: span.retention,
           retention: span.retention,
@@ -275,6 +278,7 @@
         spanNode.onclick = onSpanChange;
         spanNode.onclick = onSpanChange;
         spanControls.appendChild(spanNode);
         spanControls.appendChild(spanNode);
       });
       });
+    }
   });
   });
 
 
   socket.on('stats', function (data) {
   socket.on('stats', function (data) {

@@ -83,6 +83,8 @@
 
 
     io.on('connection', (socket) => {
     io.on('connection', (socket) => {
       socket.emit('start', config.spans);
       socket.emit('start', config.spans);
+
+      socket.on('change', function() { socket.emit('start', config.spans); });
     });
     });
 
 
     config.spans.forEach((span) => {
     config.spans.forEach((span) => {