title: Highcharts Gauge example does not display
body: <p>I am trying to use the stock standard Highcharts Gauge example and I keep getting a blank page.  When I copy the code back into jsfiddle - I still get a blank page! (The weird part is I copied the code from the example on jsfiddle in the first place!)</p>
  
  <p>Can someone please tell me what's going on here??</p>
  
  <p>Link to my test page here:  <a href="http://www.sesupply.co.nz/test2.htm" rel="nofollow">Test page</a></p>
  
  <p>jsfiddle page here:  <a href="http://jsfiddle.net/9eybsrsy/" rel="nofollow">jsfiddle</a></p>
  
  <p>When I look at the console I get the following errors:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'addEvent' of undefined</code></p>
  
  <p><code>Uncaught TypeError: k.getOptions is not a function</code></p>
  
  <p><code>Uncaught TypeError: Cannot read property 'fireEvent' of undefined</code></p>
  
  <p><code>Uncaught ReferenceError: $ is not defined</code></p>
  
  <pre><code>$(function () {
  
  $('#gauge_container').highcharts({
  
      chart: {
          type: 'gauge',
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false
      },
  
      title: {
          text: 'Speedometer'
      },
  
      pane: {
          startAngle: -150,
          endAngle: 150,
          background: [{
              backgroundColor: {
                  linearGradient: {
                      x1: 0,
                      y1: 0,
                      x2: 0,
                      y2: 1
                  },
                  stops: [
                      [0, '#FFF'],
                      [1, '#333']
                  ]
              },
              borderWidth: 0,
              outerRadius: '109%'
          }, {
              backgroundColor: {
                  linearGradient: {
                      x1: 0,
                      y1: 0,
                      x2: 0,
                      y2: 1
                  },
                  stops: [
                      [0, '#333'],
                      [1, '#FFF']
                  ]
              },
              borderWidth: 1,
              outerRadius: '107%'
          }, {
              // default background
          }, {
              backgroundColor: '#DDD',
              borderWidth: 0,
              outerRadius: '105%',
              innerRadius: '103%'
          }]
      },
  
      // the value axis
      yAxis: {
          min: 0,
          max: 200,
  
          minorTickInterval: 'auto',
          minorTickWidth: 1,
          minorTickLength: 10,
          minorTickPosition: 'inside',
          minorTickColor: '#666',
  
          tickPixelInterval: 30,
          tickWidth: 2,
          tickPosition: 'inside',
          tickLength: 10,
          tickColor: '#666',
          labels: {
              step: 2,
              rotation: 'auto'
          },
          title: {
              text: 'km/h'
          },
          plotBands: [{
              from: 0,
              to: 120,
              color: '#55BF3B' // green
          }, {
              from: 120,
              to: 160,
              color: '#DDDF0D' // yellow
          }, {
              from: 160,
              to: 200,
              color: '#DF5353' // red
          }]
      },
  
      series: [{
          name: 'Speed',
          data: [80],
          tooltip: {
              valueSuffix: ' km/h'
          }
      }]
  
  },
  // Add some life
  function (chart) {
      if (!chart.renderer.forExport) {
          setInterval(function () {
              var point = chart.series[0].points[0],
                  newVal,
                  inc = Math.round((Math.random() - 0.5) * 20);
  
              newVal = point.y + inc;
              if (newVal &lt; 0 || newVal &gt; 200) {
                  newVal = point.y - inc;
              }
  
              point.update(newVal);
  
          }, 3000);
      }
  });
  
  });
  </code></pre>