title: How-to Dynamic update a chart via socket.io and slide chart view as a sliding window?
body: <p>Could anyone help me to figure out what I am missing on showing only last X samples in the chart, please?</p>
  
  <p>Looking at <a href="http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/" rel="nofollow noreferrer">this</a> example and <a href="https://forum.highcharts.com/highcharts-usage/how-to-make-dynamic-chart-using-data-from-mysql-with-node-js-t36229/" rel="nofollow noreferrer">this</a> thread, I am developing a simple page which receives samples from server via socket.io and plots the last 10 samples.
  However, it is not working and I am struggling to figure out what I am missing.</p>
  
  <p>The server.js is a simple samples generator:</p>
  
  <pre><code>var app = require('express')();
  var http = require('http').Server(app);
  var io = require('socket.io')(http);
  
  app.get('/', function (req, res) {
      res.sendfile('index.html');
  });
  
  // On connection event.
  io.on('connection', function (socket) {
      console.log('a user connected');
  
      socket.on('disconnect', function () {
          console.log('user disconnected');
          // TODO (How-to) release connection (?)
      });
  
      var max = 100;  // Scale samples from 0 to 100.
  
      // Generate random samples.
      setInterval(function () {
          var x = (new Date()).getTime(), // current time
              y = Math.floor((Math.random() * max) + 1);
          socket.emit('chart_data', {
              x: x,
              y: y
          });
          console.info("emitted: [" + x + "," + y + "]");
      }, 2000); //update every sec.
  });
  
  http.listen(3000, function () {
      console.log('listening on *:3000');
  });
  </code></pre>
  
  <p>The html file include such script to handle the plot:</p>
  
  <pre><code>    $(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
  
        // Instantiate the chart object which plots the samples.
        var graph = new Highcharts.chart('graph_container', {
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {
                        // set up the updating of the chart on each sample
                        var series = this.series[0];
                        socket.on('chart_data', function (sample) {
                            //add chart data to series
                            series.addPoint([sample.x, sample.y], true, false);
                        });
                    }
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' +
                        Highcharts.dateFormat('%H:%M:%S', this.x) + '&lt;br/&gt;' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = 0,
                        i;
  
                    socket.on('chart_data', function (sample) {
                        //add chart data to series
                        time = sample.x;
                        for (i = -19; i &lt;= 0; i += 2) {
                            data.push({
                                x: time + i
                            });
                        }
                    });
                    return data;
                }())
            }]
        });
  
      });
  </code></pre>
  
  <p>I am brand new to node.js, but I believe that my mistake is pushing samples without y in "data.push". However, the plot is working, but without the "sliding window" of last X samples (e.g. 10).</p>
  
  <p>Does anyone have a suggestion to let the "sliding window" work, please?</p>