title: Highcharts not working after jquery upgrade
body: <p>we have some graphics using </p>
  
  <pre><code>highcharts 2.5.1 back in 2011 bundled with Jquery 1.4.2
  </code></pre>
  
  <p>and everything works <strong>OK</strong> but we save some other javascript plugins and they we need to upgrade them as well <code>latest releases have some bug fixed and we want to  take advantage of them</code> and they also need <code>Jquery upgrade as well</code> but when i upgrade to latest <code>jquery version</code></p>
  
  <p><code>jquery-1.11.1.min</code> then <code>highcharts</code> seems not longer works??</p>
  
  <p>what can i do to make it works as using <code>JQuery 1.4.2</code> </p>
  
  <p>sample code</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Highcharts Example&lt;/title&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;      
      &lt;script type="text/javascript" src="../js/highcharts.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          var chart;
          $(document).ready(function() {
              chart = new Highcharts.Chart({
                  chart: {
                      renderTo: 'container',
                      defaultSeriesType: 'bar'
                  },
                  title: {
                      text: 'Stacked bar chart'
                  },
                  xAxis: {
                      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                  },
                  yAxis: {
                      min: 0,
                      title: {
                          text: 'Total fruit consumption'
                      }
                  },
                  legend: {
                      backgroundColor: '#FFFFFF',
                      reversed: true
                  },
                  tooltip: {
                      formatter: function() {
                          return ''+
                               this.series.name +': '+ this.y +'';
                      }
                  },
                  plotOptions: {
                      series: {
                          stacking: 'normal'
                      }
                  },
                      series: [{
                      name: 'John',
                      data: [5, 3, 4, 7, 2]
                  }, {
                      name: 'Jane',
                      data: [2, 2, 3, 2, 1]
                  }, {
                      name: 'Joe',
                      data: [3, 4, 4, 2, 5]
                  }]
              });                         
          });             
      &lt;/script&gt;       
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container" style="width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>generates the right output</p>
  
  <p><img src="https://i.stack.imgur.com/RAwD9.png" alt="Using JQuery 1.4.2"></p>
  
  <p>if i change the <code>JQuery version</code> like this</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;     
  </code></pre>
  
  <p>generates something like.</p>
  
  <p>i see something like </p>
  
  <p><img src="https://i.stack.imgur.com/Q4CYU.png" alt="Using jQuery 1.11"></p>
  
  <p><code>also tested con JQuery 1.10</code></p>