title: "Uncaught ReferenceError: chart is not defined"
body: <p>all,</p>
  
  <p>I'm working with the following HTML/Javascript code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- google fonts from CDN --&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'&gt;
      &lt;!-- highcharts --&gt;
      &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          html, body {
              width: 95%;
              margin: auto;
              font-family: 'Open Sans',sans-serif;
          }
          #chart_container {
              width:100%;
              height:500px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Live Data&lt;/h1&gt;
      &lt;div id="chart_container"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'chart_container',
                  defaultSeriesType: 'line',
                  events: {
                      load: getBirds
                  }
              },
              title: {
                  text: 'DRHW Live Data Stream'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150,
                  maxZoom: 20 * 1000
              },
              yAxis: {
                  title: {
                      text: 'Count Observed'
                  }
              },
              series: [
              ],
              legend: {
                  layout: 'horiztonal',
                  align: 'center'
              }
          });
          function getBirds() {
              var now = new Date();
              var et = now.getTime() / 1000; //PHP TS
              var st = et - 10; //30 seconds prior in PHP
              console.log(chart);
              if (chart.series.length &gt; 0) {
                  var series = chart.series[0];
                  var length = series.length + 1;
                  var shift = series.data.length &gt; 20;
              }
              $.getJSON("https://path/to/json&amp;callback=?", function(result) {
                  var data = result.data;if (data.length == 0) {
                      return;
                  } else {
                      additions = new Array();
                      for (i=0;i&lt;data.length;i++) {
                          if (data[i].qstype != "1") {
                              species = data[i].answers[0]['answer'];
                              scode = species.substring(0,species.search(" - ")).trim()
                              count = (data[i].answers[1]['answer'] * 1);
                              newdata = new Object();
                              newdata['name'] = species;
                              newdata['count'] = count;
                              additions.push(newdata);
                          }
                      }
                      //now, for each addition, you need to loop through the existing data structures, and see if the thing exists.  if it does, add the data; if not, add the thing, then add the data.
                      var existingdata = chart.series;
                      for (i=0;i&lt;additions.length;i++) {
                          isnewpoint = true;
                          for (j=0;j&lt;existingdata.length;j++) {
                              if (existingdata[j].name == additions[i].name) {
                                  isnewpoint = false
                                  count = additions[i].count;
                                  point = [now.getTime(),count];
                                  chart.series[j].addPoint(point, true, shift);
                                  shift = false; //this way, only one shift occurs - the first time through adding a new point to an existing data set. this will control against future shifting, either from other datapoints having new points added, 
                              }
                          }
                          if (isnewpoint) {
                              newseries = new Object();
                              count = additions[i].count;
                              newseries['name'] = additions[i].name;
                              for (j=0;j&lt;length;j++) {
                                  newseries['data'].push(0);
                              }
                              newseries['data'].push(count);
                              chart.series.push(newseries);
                          }
                      }
                      //we have now looped through and added a new data point to all species where new data was created in this pull.  We still need to add a new point to those that were not affected.
                      existingdata = chart.series;
                      for (i=0;i&lt;existingdata.length;i++) {
                          getname = existingdata[i].name;
                          getlength = existingdata[i].data.length;
                          if (getlength&lt;length) { //which we established earlier as one MORE than existed previously, prior to the addition
                              point = [now.getTime(),0]
                              chart.series[i].addPoint(point, true, shift);
                          }
                      }
                  }
                  setTimeout(getBirds,10000);
              });
          }
      });
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem that I'm having is pretty straightforward (but driving me nuts!), and early on in the js block.  Though I'm defining the variable 'chart' as the new Highcharts chart, and I'm setting 'getBirds' as the function to load once that's loaded, the console.log line tells me that the chart is undefined, and the line below it throws an error (<code>Uncaught TypeError: Cannot read property 'series' of undefined</code>). </p>
  
  <p>I've checked the following:</p>
  
  <ol>
  <li>The Highcharts reference (<a href="http://www.highcharts.com/docs/working-with-data/preprocessing-live-data" rel="nofollow">http://www.highcharts.com/docs/working-with-data/preprocessing-live-data</a>), which suggests a setup similar to mine;</li>
  <li>I've tried defining the <code>chart</code> variable on its own line (which of course defines chart for my console.log, but does not define the <code>chart.series</code> required on the next line);</li>
  <li>I've researched stackoverflow and other docs for variable scope, but I think I'm handling it properly based on my research.</li>
  <li>I've tried reversing the order - putting the <code>getBirds()</code> function above the <code>chart</code> definition.</li>
  </ol>
  
  <p>I'm at a loss.  Any help provided is much appreciated; thanks in advance!</p>