title: Update a chart dynamically with socket.io in real time
body: <p>I have a basic node.js webserver. The connected clients can send values to the server. The server stores them in an array. The array will be send back to the client every 1/25 second and the client draws the chart with this array. So every client sees the updateted chart in real time. But unfortunately the clients do not draw the Chart.</p>
  
  <p>What i tried:
  The client emits an event and sends a value to the server. The server listenes to this event and stores the value in an array. With a setInterval the server emits the array every 1/25 second to the client. The client gets the array and draws the chart.</p>
  
  <p>client.js:</p>
  
  <pre><code>var numbers = [];
  var context = document.getElementById("chart");
  var config = {
    type: 'doughnut',
    data: {
      datasets: [
         {
         backgroundColor: ['orange', 'blue', 'yellow'],
         data: numbers,
         borderWidth: 0,           
         }
      ]
    },
    options: {
         responsive: false,
    }    
  }
  var chart = new Chart(context, config);
  
  const socket = io();
  
  var someValue = 7;
  
  socket.emit('add', someValue);
  
  socket.on('update', (arr) =&gt; {
      numbers = arr;
      console.log(numbers);
  });
  </code></pre>
  
  <p>server.js:</p>
  
  <pre><code>const chartArray = [];
  
  io.on('connection', (socket) =&gt; {
      socket.on('add', (data) =&gt; {
          chartArray.push(data);
      }); 
  
      setInterval(function() {
          socket.emit('update', chartArray);
      },1000/25);
  });
  </code></pre>
  
  <p>When i log the the numbers array in the console of the client it works. The server emits the array every 1/25 second to the client and the client gets the array. But the chart will not be drawn.</p>