title: Uncaught TypeError: Cannot read property 'addPoint' of undefined ( Highstock live data)
body: <p>As I posted a previous question, I am using Highcharts to consume a REST API (Spring app) (<a href="http://85614a50.ngrok.io/api/devices" rel="nofollow noreferrer">http://85614a50.ngrok.io/api/devices</a>) with 2 series (axes)</p>
  
  <p>The first series is memory vs time, so the object contains (Memory usage, timestamp).</p>
  
  <p>The second series is CPU vs time, so the object contains (CPU Usage, timestamp).</p>
  
  <p><a href="https://i.stack.imgur.com/9bcGv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9bcGv.png" alt="enter image description here"></a></p>
  
  <p>This data is static right now, but I want it to be dynamic.</p>
  
  <p>I created a function which does a call to the REST API every 5 seconds and an event function inside the Chart refreshing every 5 seconds.</p>
  
  <p>I tried to declare variables inside the event function with series, but it gives me this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'addPoint' of undefined</p>
  </blockquote>
  
  <p>Code Pen example: <a href="https://codepen.io/anon/pen/eLEyGb" rel="nofollow noreferrer">https://codepen.io/anon/pen/eLEyGb</a></p>
  
  <p>Home.blade.php</p>
  
  <pre><code>@extends('index.app')
  
  @section('main')
  &lt;style type="text/css"&gt;
    #container{
      width: 100%;
      margin: 0 auto;
    }
  
    .col-lg-4 {
      margin-bottom: 10%;
      min-width: 40%;
      max-width: 100%;
      margin: 1em auto;
      height: 400px;
    }
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 10%; /* Location of the box */
      padding-right: 10%;
      padding-left: 10%;
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }  
    #container.modal{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      display:block;
    }
  &lt;/style&gt;
  
  &lt;h2 class="text-center" &gt;{{$user-&gt;first_name}} Charts &lt;/h2&gt;
  
  &lt;div id="container"&gt;
    &lt;div class="row"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    $(function () {
        setInterval(getHighChart, 10000); //30 seconds onload="getHighChart()" 
    });
  
  function getHighChart() {
    $.getJSON( "http://localhost:8000/api/devices", function( data ) {
  
  console.log(data);
  
  var mappedClientsAllias = _.map(_.uniqBy(data, "clientName"), "clientAllias");
  var mappedClients = _.map(_.uniqBy(data, "Id_client"), "Id_client");
  
  var devices= [];
  
  _.forEach(mappedClients, function(Id_client, clientName) {
    var tempClient = {
      Allias: mappedClientsAllias[clientName],
      name: Id_client,
      data: [],
      memory:[]
    };
    tempClient2=tempClient;
    _.forEach(data, function(tempData) {
      if (clientId === tempData.clientId) {
        _.forEach(tempData.clientData, function(clientData) {
          tempClient.data.push([
            clientData.timestamp,
            clientData.cpuUsage,
          ]);
           tempClient.memory.push([
            clientData.timestamp,
            clientData.memoryUsage,
          ]);
        });
      }
    });
  
    devices.push(tempClient);
  });
  
  console.log("devices", devices);
  var chart = _.forEach(devices, function(device) {
  
    $('&lt;div class="col-lg-4"&gt;')
      .css("position", "relative")
      .appendTo("#container")
      .highcharts("StockChart", {
        marker: {
          states: {
            enabled: true
          }
        },
        time: {
          timezoneOffset: -5 * 60
        },
      exporting: {
        buttons: {
          customButton3: {
            text: 'Zooming',
            //make fullscreen of chart with size change
            onclick: function(b) {
               var w = $(window).width();
               var h = $(window).height();
            $(b.target).closest('#container').toggleClass('modal');
    if($(b.target).closest('#container').hasClass('modal')) {
      $('.col-lg-4').hide();
      $(b.target).closest('.col-lg-4').show();
      $('.col-lg-4').css({
        'width': w * .9,
        'height': h * .9
      });  
    } else {
      $('.col-lg-4').show();
       $('.col-lg-4').css({
                   'width': '',
                  'height': ''
  
              });
  
    }
  $(b.target).closest('.col-lg-4').highcharts().reflow();
  
  
                          }
                      }
                  }
              }, 
        rangeSelector: {
          y: 15,
          buttons: [
            {
              count: 1,
              type: "minute",
              text: "Sec"
            },
            {
              count: 1,
              type: "hour",
              text: "Min"
            },
            {
              count: 1,
              type: "day",
              text: "Hours"
            },
  
            {
              type: "all",
              text: "All"
            }
          ],
          title: "hours",
          inputEnabled: true,
          _selected: 1
        },
  
        title: {
          text: device.Allias
        },
        yAxis: [{
  
                  labels: {
                      enabled: true,
                      align: 'right',
                      x: -3
                  },
                  title: {
                      text: 'CPU'
                  },
                  height: '50%',
                  lineWidth: 2,
                     color: 'red'
              }, {
                  labels: {
                      align: 'right',
                      x: -3
                  },
                  title: {
                      text: 'Memory'
                  },
                  top: '70%',
                  height: '50%',
                  offset: 0,
                  lineWidth: 2,
  
              }],
        xAxis: {
          tickInterval: 1,
          title: {
            enabled: true,
            text: "Client usage"
          },
           top: '20%',
          type: "datetime",
          dateTimeLabelFormats: {
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%e. %b",
            week: "%e. %b",
            day: "%Y.%b-%d"
          }
        },
  
        plotOptions: {
          series: {
            marker: {
              enabled: false,
            }
          }
        },
  
         series: [{
          name: "Memory USAGE",
          data: device.memory.sort()
      },  // Add a new series
      {
          name: "Cpu USAGE",
           yAxis: 1,
            color: 'red',
          data: device.data.sort()
  
      }],
        chart: {
          renderTo: "container",
          height:400,
          events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                  var x = (new Date()).getTime(), // current time
                  y = Math.round(Math.random() * 100);
                  series.addPoint([x, y], false, true);
                }, 1000);
              }
            }
          },
        });
      });
    });
  }
  
  &lt;/script&gt;
  
  @endsection
  </code></pre>
  
  <p><strong><em>Layouts.app</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;!-- CSRF Token --&gt;
    &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
    &lt;title&gt;Master thesis application&lt;/title&gt;
  
    &lt;!-- Jquery --&gt; 
    &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
  
    &lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"&gt;
  
    &lt;!-- Import css file--&gt;
    &lt;link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.highcharts.com/stock/modules/exporting.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    @include('file.hed')
    @include('file.bar')
    &lt;script&gt;
      window.onscroll = function() {myFunction()};
  
      var navbar = document.getElementById("navbar");
      var sticky = navbar.offsetTop;
  
      function myFunction() {
        if (window.pageYOffset &gt;= sticky) {
          navbar.classList.add("sticky")
        } else {
          navbar.classList.remove("sticky");
        }
      }
    &lt;/script&gt;
  
    &lt;div class="container"&gt;
     @include('file.info')
  
    @yield('main')
    &lt;/div&gt; &lt;!-- /container --&gt;
  
    @include('file.down')
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>