124
rated 0 times
[
130]
[
6]
/ answers: 1 / hits: 19578
/ 11 Years ago, tue, january 28, 2014, 12:00:00
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.com/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.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>
<script src=http://code.highcharts.com/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.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>
<script src=http://code.highcharts.com/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!
More From » jquery
