Hi I am a beginner to JQuery and Highcharts and running into problems I can't solve spending over 3-4 hours on it while following Highcharts documentation to create the first chart in Visual Studio 2013.
I create a barebone ASP MVC 5 application and add the following code to Index.cshtml body:
<script src=".js"></script>
<div id="container1" style="width:100%; height:400px;"></div>
Then I add the following code to _Layout.cshtml:
<script src=".8.2/jquery.min.js"></script>
<script src=".js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
It output html code that immediate crash the IE browser launching from with Visual Studio, giving me error message: JavaScript runtime error: Object doesn't support property or method 'highcharts' in Visual Studio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src=".8.2/jquery.min.js"></script>
<script src=".js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/Register" id="registerLink">Register</a></li>
<li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h2>Index</h2>
<div id="container1" style="width:100%; height:400px;"></div>
<p>
<a href="/BatteryLog/Create">Create New</a>
</p>
<table class="table">
<tr>
<th>
Voltage
</th>
<th>
Current
</th>
<th></th>
</tr>
<tr>
<td>
3.12
</td>
<td>
3.18
</td>
<td>
<a href="/BatteryLog/Edit/21">Edit</a> |
<a href="/BatteryLog/Details/21">Details</a> |
<a href="/BatteryLog/Delete/21">Delete</a>
</td>
</tr>
<tr>
<td>
3.124
</td>
<td>
6.28
</td>
<td>
<a href="/BatteryLog/Edit/22">Edit</a> |
<a href="/BatteryLog/Details/22">Details</a> |
<a href="/BatteryLog/Delete/22">Delete</a>
</td>
</tr>
</table>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
//<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"bab8eaa5834742c0a90d4a2266b8953c"}
</script>
<script type="text/javascript" src="http://localhost:19978/19d3f54454e64aa2aeab6fa68d1e8a88/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
However, if I copy and paste this into an static html file and open browser to view it offline from my desktop, then the charts works.
Please help! I spent hours already trying out different things to solve this! Thank you!
Hi I am a beginner to JQuery and Highcharts and running into problems I can't solve spending over 3-4 hours on it while following Highcharts documentation to create the first chart in Visual Studio 2013.
I create a barebone ASP MVC 5 application and add the following code to Index.cshtml body:
<script src="http://code.highcharts./highcharts.js"></script>
<div id="container1" style="width:100%; height:400px;"></div>
Then I add the following code to _Layout.cshtml:
<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts./highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
It output html code that immediate crash the IE browser launching from with Visual Studio, giving me error message: JavaScript runtime error: Object doesn't support property or method 'highcharts' in Visual Studio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts./highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/Register" id="registerLink">Register</a></li>
<li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h2>Index</h2>
<div id="container1" style="width:100%; height:400px;"></div>
<p>
<a href="/BatteryLog/Create">Create New</a>
</p>
<table class="table">
<tr>
<th>
Voltage
</th>
<th>
Current
</th>
<th></th>
</tr>
<tr>
<td>
3.12
</td>
<td>
3.18
</td>
<td>
<a href="/BatteryLog/Edit/21">Edit</a> |
<a href="/BatteryLog/Details/21">Details</a> |
<a href="/BatteryLog/Delete/21">Delete</a>
</td>
</tr>
<tr>
<td>
3.124
</td>
<td>
6.28
</td>
<td>
<a href="/BatteryLog/Edit/22">Edit</a> |
<a href="/BatteryLog/Details/22">Details</a> |
<a href="/BatteryLog/Delete/22">Delete</a>
</td>
</tr>
</table>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
//<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"bab8eaa5834742c0a90d4a2266b8953c"}
</script>
<script type="text/javascript" src="http://localhost:19978/19d3f54454e64aa2aeab6fa68d1e8a88/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
However, if I copy and paste this into an static html file and open browser to view it offline from my desktop, then the charts works.
Please help! I spent hours already trying out different things to solve this! Thank you!
Share Improve this question edited Jan 28, 2014 at 8:25 user2952473 asked Jan 28, 2014 at 8:10 user2952473user2952473 991 gold badge3 silver badges10 bronze badges2 Answers
Reset to default 4You are including jQuery twice. In the header:
<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and at the bottom of the page:
<script src="/Scripts/jquery-1.10.2.js"></script>
This second inclusion will overwrite the first one, where Highcharts was attached to. I.e. inside the document ready callback, $ refers to jquery-1.10.2.js, which doesn't have Highcharts added to it.
You are actually including both libraries, jQuery and Highcharts twice. Don't do that.
Just in case this helps anyone, this was happening for me when I was using AngularJS and mistakenly, a self closing ng-view tag. Angular ended up loading twice so if relevant ensure your ng-view tag is
<ng-view></ng-view>
instead of
<ng-view/>
Took a while to figure out, hopefully it will save somebody else time.