title: Highcharts not Drawing point on setInterval
body: <p>I have data being put on an api every 30 seconds on a backend. On the frontend I am using highcharts to visualize the data and a setInterval setup to retrieve the new data every 30 seconds. My problem is that on that setInterval, the line graph disappears or does not draw to the next new dot. Does anyone now why this is? </p>
  
  <p>fiddle: <a href="http://jsfiddle.net/b8tf281n/3/" rel="nofollow">http://jsfiddle.net/b8tf281n/3/</a></p>
  
  <p>code:  </p>
  
  <pre><code>chart1 = {
      yAxisMin: 40,
      yAxisMax: 100
  };
  // empty objects for our data and to create chart
  seriesData = [];
  BPM = [];
  time1 = [];
  
  // console.log(chart1.data.series);
  
  $(function () {
      $(document).ready(function () {
          Highcharts.setOptions({
              global: {
                  useUTC: false
              }
          });
  
  
  
          var url = 'http://msbandhealth.azurewebsites.net/odata/PulsesAPI/';
          $.ajax({
              url: url,
              dataType: 'json',
              context: seriesData,
              success: function (data) {
  
  
  
                  // structure our data 
                  for (var i = 0; i &lt; data.value.length; i++) {
                      bpm = data.value[i].BPM;
                      time = data.value[i].Time;
                      BPM.push({
                          x: moment(time),
                          y: bpm
                      });
                      // console.log(BPM);
                      time1.push(time);
                  }
                  console.log((new Date).getTime());
                  console.log(moment(time, "DD.MM.YYYY hh:mm:ss"));
                  console.log(BPM);
                  console.log(BPM[BPM.length - 1]);
                  // console.log(seriesData);
  
                  // set our data series and create new chart
                  chart1.data.series[0].data = BPM;
  
                  chart = new Highcharts.Chart(chart1.data);
                  $('#container').css({
                      height: '400px'
                  });
  
  
                  // console.log(sortedBPM);
  
  
                  // console.log(time1);
  
              }
  
          });
  
  
  
  
          // give highcharts something to render to
          var container = document.getElementById("container");
  
          chart1.data = {
  
              chart: {
                  renderTo: container,
                  type: 'spline',
                  animation: Highcharts.svg, // don't animate in old IE
                  marginRight: 10,
                  events: {
                      load: function () {
                          setInterval(function () {
  
                              // find last data points
                              var test = BPM[BPM.length - 1];
                              var x = (new Date).getTime(),
                                  y = test.y;
                              console.log(x);
  
                              shift = chart.series[0].data.length &lt; 30;
                              chart.series[0].addPoint([x, y], true, true);
  
  
  
  
                          },
                          30000);
                      }
                  }
  
              },
              title: {
                  text: 'Microsoft Band: Real Time Pulse Analysis'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150,
                  dateTimeLabelFormats: {
  
  
                  },
              },
              yAxis: {
                  min: chart1.yAxisMin,
                  max: chart1.yAxisMax,
                  title: {
                      text: 'Heart Rate'
                  },
                  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: 'Beats Per Minute',
                  data: []
              }]
  
  
          };
  
      });
  });
  </code></pre>