Title: $(...).highcharts is not a function
Tags: javascript;jquery;highcharts
Question: 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.
This is my code:
head tag
<script src='/javascripts/jQuery-1.11.3.min.js'&gt;</script&gt;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;</script&gt;
<!--<script src='/javascripts/highCharts.js'&gt;</script&gt;--&gt;
<script src='http://code.highcharts.com/highcharts.js'&gt;</script&gt;
I have attempted CDNing and also from my domain (code in highCharts.js taken straight from http://code.highcharts.com/highcharts.js)
My plugin is also after I've loaded in my jQuery so that's not the error.
When DOM is loaded
$(function() {
buildHighcharts();
function buildHighcharts() {
$('#graph_bar_month').highcharts({
....
});
$('#graph_line_year').highcharts({
...
});
$('#graph_bar_teamPercent').highcharts({
...
});
$('#graph_bar_teamActual').highcharts({
...
});
<div class="tab-pane maxHeight" id="show_graph"&gt;
<div class="row maxHeight maxWide"&gt;
<div id="graph_bar_month" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
<div id="graph_line_year" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
<div id="graph_bar_teamActual" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
<div id="graph_bar_teamPercent" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
</div&gt;
</div&gt;
I have tried cutting it down to only one highchart, as thought multiple might be causing the error, but no luck.
Have tried adding series data to the chart to try and force it to display but no luck
This is my entire head (I cannot see the error being anywhere else than here):
<head&gt;
<link rel='stylesheet' href='/stylesheets/css/style.css' /&gt;
<link rel='stylesheet' href='/stylesheets/css/tables.css' /&gt;
<link rel='stylesheet' href='/stylesheets/css/jquery.mCustomScrollbar.css' /&gt;
<link rel='stylesheet' href='/stylesheets/css/wrappers.css' /&gt;
<link rel='stylesheet' href='/stylesheets/css/queries.css' /&gt;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
<script src="/javascripts/jquery-1.10.2.js"&gt;</script&gt;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;</script&gt;
<script src='/javascripts/jquery.mCustomScrollbar.concat.min.js'&gt;</script&gt;
<script src='/javascripts/clock.js'&gt;</script&gt;
<script src='/javascripts/fixedHeader.js'&gt;</script&gt;
<!--<script src='/javascripts/customLogin.js'&gt;</script&gt;--&gt;
<script src='/javascripts/customAlert.js'&gt;</script&gt;
<!--<script src='/javascripts/highCharts.js'&gt;</script&gt;--&gt;
<script src='http://code.highcharts.com/highcharts.js'&gt;</script&gt;
<!--<script src='/javascripts/displayCustomScroll.js'&gt;</script&gt;--&gt;
<!--<script src='/javascripts/displayHighcharts.js'&gt;</script&gt;--&gt;
<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 < 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;
});
});
</script&gt;
</head&gt;
[SOLVED]
My error was that I was calling buildHighcharts before it had been invoked.
Solution: Called the function in $(window).load() whilst keeping the invoke outside it
Comment: Please show the entire HTML document

Comment: So do you have a link to jQuery in the body??

Comment: Yes, all scripts are being loaded except highcharts

Comment: @Diego when I switch to the local version, the script loads but still getting the same error

Comment: @cdvv7788 have found a post that someone else has run into the same problem that does not seem to work with jQuery-1.11.x so will check that out and get back to you

Comment: @Diego I have reverted back to CDNing to the version of jQuery they use in their example (1.8.x) but no luck. I also tried 1.10.x but no luck. Looked at the compatibility from http://www.highcharts.com/documentation/compatibility. My highcharts version is 4.1.9

Comment: @Diego I have edited my entire head into the question

Comment: @Diego that log returns `undefined`

Comment: @epascarello I have edited my entire head into the question

Comment: No, my link to jQuery is the first `` in the head

Comment: Can you see the scripts being loaded in the network tab of the developer tools?

Comment: If highcharts script is not being loaded try using a local version

Comment: When the highcharts script loads, try typing in the console `$.fn.highcharts` and see what it returns

Comment: Also verify highcharts works with your jquery version

Here is the accepted answer: Based on best practices you should not use functions before define it.
Try to put in your script something like this:
$(document).ready(function() {
var buildHighcharts = function() {
$('#graph_bar_month').highcharts({
....
});
$('#graph_line_year').highcharts({
...
});
$('#graph_bar_teamPercent').highcharts({
...
});
$('#graph_bar_teamActual').highcharts({
...
});
}
buildHighcharts();
Please check this out ! It's working putting the function in the correct place...
<head&gt;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;</script&gt;
<script src='http://code.highcharts.com/highcharts.js'&gt;</script&gt;
<script&gt;
$(function () { //$(document).ready()
var buildHighcharts = function () {
$('#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]
}
});
console.log($.fn.highcharts)
buildHighcharts();
</script&gt;
</head&gt;
<body&gt;
<div class="tab-pane maxHeight" id="show_graph"&gt;
<div class="row maxHeight maxWide"&gt;
<div id="graph_bar_month" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
<div id="graph_line_year" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
<div id="graph_bar_teamActual" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
<div id="graph_bar_teamPercent" class="col-lg-6 col-md-6 col-sm-6 halfHeight"&gt;</div&gt;
</div&gt;
</div&gt;
</body&gt;
Comment for this answer: Do you realize `$(function(){})` is document ready? There is no need for all the code to live inside the ready.
Comment for this answer: @epascarello I do realise that yes and have followed highcharts documentation in creating this code
Comment for this answer: @epascarello I followed this documentation: http://www.highcharts.com/docs/getting-started/your-first-chart
Comment for this answer: @DavidVega yes, I tried that before and just have tried it again now. Makes no difference
Comment for this answer: Marked this as correct as it would have worked but decided to go a bit differently about it and is how I solved it in the long run. Thank you
Comment for this answer: This runs fine on my system.
Comment for this answer: But could be a scoped jquery variable problem (jquery is defined but not highcharts) if it's not defined correctly inside a $(document).ready function.
Comment for this answer: @epascarello Of course, but not the `buildHighcharts` function. This function will take `$` object before document ready.
Comment for this answer: @WillAshworth Did you fix it then ?
Comment for this answer: @WillAshworth But please try to add the function `buildHighcharts`inside your `$(function(){})`
Comment for this answer: @WillAshworth Please check the example and the code snippet. It's working !
Comment for this answer: @WillAshworth Nice to hear that !!
Comment for this answer: The error message is that `$(...).highcharts` is not a function, since that is inside the `buildHighcharts` function, the `buildHighcharts` function must be being called successfully, so the problem has nothing to do with it being somewhere it can't be called.

Here is another answer: use `var chart = new Highcharts.Chart({`
instead of `$('#container').highcharts({`
or possible solution would be order of jquery and highchart script
it should be
<script src="js/jquery-2.0.2.min.js"&gt;</script&gt;
<script src="js/highcharts.js"&gt;</script&gt;
<script src="js/drilldown.js"&gt;</script&gt;

Here is another answer: From their documentation:
http://www.highcharts.com/documentation/compatibility
jQuery
1.4.3 - 1.10.x for all browsers.
2.0.x for modern browsers.
MooTools  1.2.5 - 1.4.5
Prototype 1.7
You are not using a supported version of jQuery with highcharts. Is that your actual problem? I do not know. Switch to jQuery 1.10 and see if it loads. If it does, than we figured out your issue. If not, than you need to see why the JavaScript file is not being loaded correctly.
Now what would cause the file to not load?
Is the file path correct? Check network tab to see if it loads
Is a browser plug-in blocking the file? Check network tab to see if it loads
Did you include jQuery more than once on the page? You should only have it on the page once, that can cause issues with plugins
Comment for this answer: So now to figure out why the plugin file is not there. Do you only have one version of jQuery on the page being loaded? Is it possible to show all your html code?
Comment for this answer: As I have put in a previous comment, I reverted back to 1.10.x but still no luck

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 14, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:11/13/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><highcharts>', 'Title': '$(...).highcharts is not a function', 'ViewCount': 6545, 'id': 33693790, 'user_AboutMe': '<p>Full stack developer with a heavy focus on DevOps</p>\n', 'user_AccountId': 5544902.0, 'user_DisplayName': 'wmash', 'user_Reputation': 3742.0, 'user_Views': 304.0, 'user_id': 4400016.0}}