title: $(...).highcharts is not a function
body: <p>I know questions with the same title have been asked multiple times. I have looked at multiple answers and none of them fix my error.</p>
  
  <p>This is my code:</p>
  
  <p><strong>head tag</strong></p>
  
  <pre><code>&lt;script src='/javascripts/jQuery-1.11.3.min.js'&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!--&lt;script src='/javascripts/highCharts.js'&gt;&lt;/script&gt;--&gt;
  &lt;script src='http://code.highcharts.com/highcharts.js'&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have attempted CDNing and also from my domain (code in <code>highCharts.js</code> taken straight from <a href="http://code.highcharts.com/highcharts.js" rel="nofollow">http://code.highcharts.com/highcharts.js</a>)</p>
  
  <p>My plugin is also <strong>after</strong> I've loaded in my jQuery so that's not the error.</p>
  
  <p><strong>When DOM is loaded</strong></p>
  
  <pre><code>$(function() {                                           
      buildHighcharts();
  });
  
  function buildHighcharts() {
      $('#graph_bar_month').highcharts({
          ....
      });
  
      $('#graph_line_year').highcharts({
          ...
      });
  
      $('#graph_bar_teamPercent').highcharts({
          ...
      });
  
      $('#graph_bar_teamActual').highcharts({
          ...          
      });
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="tab-pane maxHeight" id="show_graph"&gt;
      &lt;div class="row maxHeight maxWide"&gt;
          &lt;div id="graph_bar_month" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;&lt;/div&gt;
          &lt;div id="graph_line_year" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;&lt;/div&gt;
          &lt;div id="graph_bar_teamActual" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;&lt;/div&gt;
          &lt;div id="graph_bar_teamPercent" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried cutting it down to only <strong>one</strong> highchart, as thought multiple might be causing the error, but no luck.</p>
  
  <p>Have tried adding <code>series</code> data to the chart to try and force it to display but no luck</p>
  
  <p>This is my <strong>entire</strong> head (I cannot see the error being anywhere else than here):</p>
  
  <pre><code>&lt;head&gt;
    &lt;link rel='stylesheet' href='/stylesheets/css/style.css' /&gt;
    &lt;link rel='stylesheet' href='/stylesheets/css/tables.css' /&gt;
    &lt;link rel='stylesheet' href='/stylesheets/css/jquery.mCustomScrollbar.css' /&gt;
    &lt;link rel='stylesheet' href='/stylesheets/css/wrappers.css' /&gt;
    &lt;link rel='stylesheet' href='/stylesheets/css/queries.css' /&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
    &lt;script src="/javascripts/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src='/javascripts/jquery.mCustomScrollbar.concat.min.js'&gt;&lt;/script&gt;
    &lt;script src='/javascripts/clock.js'&gt;&lt;/script&gt;
    &lt;script src='/javascripts/fixedHeader.js'&gt;&lt;/script&gt;
    &lt;!--&lt;script src='/javascripts/customLogin.js'&gt;&lt;/script&gt;--&gt;
    &lt;script src='/javascripts/customAlert.js'&gt;&lt;/script&gt;
    &lt;!--&lt;script src='/javascripts/highCharts.js'&gt;&lt;/script&gt;--&gt;
    &lt;script src='http://code.highcharts.com/highcharts.js'&gt;&lt;/script&gt;
    &lt;!--&lt;script src='/javascripts/displayCustomScroll.js'&gt;&lt;/script&gt;--&gt;
    &lt;!--&lt;script src='/javascripts/displayHighcharts.js'&gt;&lt;/script&gt;--&gt;
    &lt;script&gt;
        (function($) {
            $(window).load(function(){
                $(".bottomWrapperTable").mCustomScrollbar({
                    axis: "y",
                    theme: "dark",
                    scrollbarPosition: "outside",
                    callbacks: {
                        whileScrolling: function(){
                            setScroll(this.mcs.left);
                        },
                        onScroll: function() {
                            setStartEndScroll(this.mcs.leftPct);
                        }
                    }
                });
                setInterval('updateClock()', 1000);
            });
        })(jQuery);
  
        function buildHighcharts() {
            $('#graph_bar_month').highcharts({
                chart: {
                    renderTo: 'graph_bar_month',
                    type: 'bar'
                },
                title: {
                    text: '**Current Month**'
                },
                xAxis: {
                    categories: ['On Target', 'Below Target', 'Not Entered']
                },
                yAxis: {
                    title: {
                        text: '%'
                    },
                    categories: [0, 50, 100]
                }
            });
  
            $('#graph_line_year').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: '**Current Year**'
                },
                xAxis: {
                    categories: ['January', 'February', 'March']
                },
                yAxis: {
                    title: {
                        text: '%'
                    },
                    categories: [0, 50, 100]
                },
                series : [{
                    name: 'Total % On Target',
                    data: [1, 2, 3]
                }, {
                    name: 'Total % Below Target',
                    data: [1, 2, 3]
                }, {
                    name: 'Total % Not Entered',
                    data: [1, 2, 3]
                }]
            });
  
            $('#graph_bar_teamPercent').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Team % On Target'
                },
                xAxis: {
                    title: {
                        text: 'Team'
                    },
                    categories: ['Daimler', 'Mclaren', 'Comms Server']
                },
                yAxis: {
                    categories: [0, 50, 100],
                    title: {
                        text: '%'
                    }
                }
            });
  
            $('#graph_bar_teamActual').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Team % On Target'
                },
                xAxis: {
                    title: {
                        text: 'Team'
                    },
                    categories: ['Daimler', 'Mclaren', 'Comms Server']
                },
                yAxis: {
                    categories: [0, 50, 500]
                }
            });
        }
  
        $(function() {                                            //$(document).ready()
            var url = window.location.href;
            buildHighcharts();
            if (url.indexOf('?error') != -1) {
                Alert.render('Record no longer exists!\nPlease choose another', 'Oops!');
            }
  
            $('#createBtn').on('click', function() {
                $('#currProdID').val($('#projDrop').val());
                $('#currMetrics').submit();
            });
  
            $('#fixed-table-head').on('scroll', function(e, val) {
                if((-val &gt;= 0) &amp;&amp; (val &lt; 10000)) {
                    this.scrollLeft = -val;
                } else if (val === 10000) {
                    this.scrollLeft = (this.scrollWidth - this.clientWidth);
                }
            });
  
            if (document.getElementById('projDrop').value != "") {
                document.getElementById('createBtn').disabled = false;
            }
  
            $('#projDrop').on('change', function() {
                document.getElementById('createBtn').disabled = false;
            });
        });
    &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>[SOLVED]</strong></p>
  
  <p>My error was that I was calling <code>buildHighcharts</code> before it had been invoked.</p>
  
  <p>Solution: Called the function in <code>$(window).load()</code> whilst keeping the invoke outside it</p>