title: highstock conflict with jquery.ba-resize.js and jquery.flot.resize.js
body: <p>after hours of troubleshooting about why my chart is not loading, i found using jquery.ba-resize and jquery.flot.resize concurrently with highstock in one page cause this error:</p>
  
  <pre><code> uncaught typeerror: cannot read property 'width' of undefined
  </code></pre>
  
  <p>currently im tring to integrate one of highstock examples into my page, which could be found at highstock demos.</p>
  
  <p>any idea on how to fix this?
  thanks</p>
  
  <p><strong>edit2:</strong> jsfiddle: <a href="http://jsfiddle.net/CFPqG/" rel="nofollow">http://jsfiddle.net/CFPqG/</a></p>
  
  <p>actual code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Highstock Example&lt;/title&gt;
  
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  $(function() {
      var seriesOptions = [],
          yAxisOptions = [],
          seriesCounter = 0,
          names = ['MSFT', 'AAPL', 'GOOG'],
          colors = Highcharts.getOptions().colors;
  
      $.each(names, function(i, name) {
  
          $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&amp;callback=?',   function(data) {
  
              seriesOptions[i] = {
                  name: name,
                  data: data
              };
  
              // As we're loading the data asynchronously, we don't know what order it will arrive. So
              // we keep a counter and create the chart when all the data is loaded.
              seriesCounter++;
  
              if (seriesCounter == names.length) {
                  createChart();
              }
          });
      });
  
  
  
      // create the chart when all data is loaded
      function createChart() {
  
          $('#container').highcharts('StockChart', {
              lang: {
                  rangeSelectorZoom: ''
              },
              chart: {
                  type: 'area'
              },
              legend: {
                  enabled: true,
                  borderRadius: 0,
                  layout: 'horizontal',
                  backgroundColor: null,
                  align: 'right',
                  verticalAlign: 'top',
                  floating: true,
                  borderWidth: 0,
                  y: 20
              },
              colors: [
                 '#71c49a', 
                 '#444444', 
                 '#777777', 
                 '#910000', 
                 '#1aadce', 
                 '#492970',
                 '#f28f43', 
                 '#77a1e5', 
                 '#c42525', 
                 '#a6c96a'
              ],
              exporting: {
              enabled: false
              },
              credits: {
                  enabled: false
              },
              xAxis: {
                  lineColor: '#d8efe3',
                  labels: {
                      style: {
                      color: '#71c49a'
                      },
                  }
              },
              yAxis: {
                  lineColor: '#d8efe3',
                  gridLineColor: '#d8efe3',
                  labels: {
                      style: {
                      color: '#71c49a'
                      },
                      formatter: function() {
                          return (this.value &gt; 0 ? '+' : '') + this.value + '%';
                      }
                  },
                  plotLines: [{
                      value: 0,
                      width: 2,
                      color: '#71c49a'
                  }]
              },
              scrollbar: {
                  enabled: false
              },
              rangeSelector: {
                  selected: 1,
                  inputEnabled: false,
                  buttonSpacing: 5,
                  labelStyle: {
                      color: '#71c49a',
                      fontWeight: 'bold'
                  },
              },
              navigator: {
                  handles: {
                  backgroundColor: '#d8efe3',
                  borderColor: '#71c49a'
                  },
                  series: {
                  color: '#71c49a'    
              }
              },
              plotOptions: {
                  area: {
                      lineWidth: 3,
                      shadow: true,
                      marker: {
                          enabled: true,
                          fillColor: '#FFFFFF',
                          lineWidth: 2,
                          lineColor: null,
                          symbol: 'circle',
                          radius: 3,
                          states: {
                              hover: {
                                  enabled: true
                              }
                          }
                      }
                  },
                  series: {
                      compare: 'percent',
                      fillOpacity: 0.7
                  }
              },
  
              tooltip: {
                  pointFormat: '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y}&lt;/b&gt; ({point.change}%)&lt;br/&gt;',
                  valueDecimals: 2
              },
  
              series: seriesOptions
          });
      }
  
  });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;script src="../../js/highstock.js"&gt;&lt;/script&gt;
  &lt;script src="../../js/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="height: 400px; min-width: 600px"&gt;&lt;/div&gt;
  &lt;script src="your-path/jquery.ba-resize.js"&gt;&lt;/script&gt;
  
    &lt;script src="your-path/jquery.flot.resize.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>