Trying to do a really basic highchart, but I keep getting the error: "JavaScript critical error at line 42, column 12. SCRIPT1014: Invalid character. I have included jQuery in the header so I'm not sure what I'm doing wrong. Testing with IE.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<title></title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
$(function () {
$('#container').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>
</body>
</html>
I got a special character '?' when I copy your code just after the last semicolon.
Try to copy your code in a text editor (notepad++ for me), remove this character and copy again your page.
It has worked for me.
I took out the very last ";" in the jQuery block of code and it worked. Weird...
In the future I advice to use jslint which check your syntax.
Related
I'm trying to set up a basic HighCharts example using a SharePoint 2010 Content Editor Web Part, but I get the error message "Object doesn't support property or method 'highcharts'". I'm using the example content directly from the highcharts download. For some reason, the script at the top of the code is not being loaded or I'm not able to access it. I'm guessing that it has something to do with the way sharepoint loads other scripts, but I'm not sure.
<script src="https://teamOne.com/sites/sandbox/mmg/christo/Shared%20Documents/HiChartsApp/js/jquery-1.11.3.min.js"></script>
<script src="https://teamOne.com/sites/sandbox/mmg/christo/Shared%20Documents/HiChartsApp/js/highcharts.src.js"></script>
<div id="charts_holder">
<h2>HiCharts Test Page</h2>
<p>This is where the charts live</p>
</div>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#container').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>
I haven't had much luck with Sharepoint loading other JS files from a content editor web part, but I'm hoping someone will have a good suggestion. Thanks in advance!
I am following the highcharts get started tutorial here: http://www.highcharts.com/docs/getting-started/your-first-chart
For some reason the code works in a separate HTML file, but not when it's part of my Yeoman built web application
I've fallen at the first hurdle and get the following error:
TypeError: $(...).highcharts is not a function
My code is below and here is the full error:
TypeError: $(...).highcharts is not a function
at HTMLDocument.eval (eval at (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5),
:2:21)
at fire (http://localhost:9000/bower_components/jquery/dist/jquery.js:3099:30)
at Object.self.add [as done] (http://localhost:9000/bower_components/jquery/dist/jquery.js:3145:7)
at jQuery.fn.ready (http://localhost:9000/bower_components/jquery/dist/jquery.js:3378:25)
at jQuery.fn.init (http://localhost:9000/bower_components/jquery/dist/jquery.js:2821:16)
at jQuery (http://localhost:9000/bower_components/jquery/dist/jquery.js:76:10)
at eval (eval at (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5),
:1:1)
at eval (native)
at Function.jQuery.extend.globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5)
at jQuery.fn.extend.domManip (http://localhost:9000/bower_components/jquery/dist/jquery.js:5435:16)
There are multiple other posts about this - however none of the solutions have worked for me, can't see what I'm doing wrong here, all I've done is copy the tutorial.
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container').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 id="container" style="width:100%; height:400px;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container').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 id="container" style="width:100%; height:400px;"></div>
</body>
</html>
works fine. Just removed the double closing brackets from closing html tag.
we have some graphics using
highcharts 2.5.1 back in 2011 bundled with Jquery 1.4.2
and everything works OK but we save some other javascript plugins and they we need to upgrade them as well latest releases have some bug fixed and we want to take advantage of them and they also need Jquery upgrade as well but when i upgrade to latest jquery version
jquery-1.11.1.min then highcharts seems not longer works??
what can i do to make it works as using JQuery 1.4.2
sample code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
generates the right output
if i change the JQuery version like this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
generates something like.
i see something like
also tested con JQuery 1.10
Check the compatibility page of highcharts
jQuery
1.4.3 - 1.10.x for all browsers.
2.0.x for modern browsers.
Try using 1.10.x if you can. If you still see the issue, I would suggest create a jsFiddle demonstration of the issue & report here. SO Experts or Highcharts support team can assist you while you are using an officially supported version of jQuery.
EDIT
Your code works well, check out # http://jsfiddle.net/jugal/9g3679zk/
You may also need to upgrade the Highcharts js
EDIT 2
Using Highcharts 2.1.5 # http://jsfiddle.net/jugal/9g3679zk/1/ The charts don't load as you have showed, on resizing window it does redraw and chart comes up.
Upgrading to 2.2 seems to fix it # http://jsfiddle.net/jugal/9g3679zk/2/ You most likely should be at be able to upgrade from 2.1 to 2.2 with your existing license.
so I've created a database to store scientific research data and i wanted to created graphs out of this data. i want to use Highcharts but i can't even get the example code form the Highcharts website to work. i am new to web development so i'm not really sure where i'm going wrong.
<!DOCTYPE html>
<html>
<head>
<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 () {
$('#container').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 id="container" style="width:100%; height:400px;"></div>
<h2>Hey now brown cow</h2>
</body>
</html>
also the "hey now brown cow" is just in there so i know the html file works.
Hi i am following standard tutorial on highcharts site .http://docs.highcharts.com/#your-first-chart
i have followed same instruction, and wrote this code. i am not getting any output on screen. please check, what wrong i have done.
initially i tried to load j-query from net, it didnt worked, now i have downloaded it locally.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type= "text/javascript" src="/home/bhavuk/Documents/code/django/jquery/jquery.js"></script>
<script type= "text/javascript" src="/home/bhavuk/Documents/code/django/Highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="/js/themes/gray.js"></script>
<script type="text/javascript">
$(function () {
$('#container').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>
<title> high charts </title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<p> hey i am learning high charts</p>
</body>
</html>
In the example on highcharts there is a class defined in the div, while in the code there is an id referenced.
Changing #container to .container fixed it.
The firefox error console showed a #13 error which gave the clue to the mystery.
BTW, had to load jquery and highcharts before the highchart example script.
May be something is messing with jquery standard variable. Try to add $ = jQuery.noConflict() in the beginning of the script. And give more specific information, like; browser, jsfiddle, error if any