I'm pretty new to Javascript, Rails and JQuery all working together.
I'm going through this tutorial (http://www.highcharts.com/documentation/how-to-use#installation) on Highcharts and just trying to get a base graph to show. It's not happening.
In my home.html.erb file I have:
<div id="container" style="width: 100%; height: 400px"></div>
In app/views/layouts/application.html.erb
I have this in my head
tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/public/highcharts.js" type="text/javascript"></script>
And this is the code in /public/highcharts.js:
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
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]
}]
});
});
Nothing is showing up when I load the page and I have no idea why. I've done the tutorial 3 or 4 times and Googled around for the answer to no avail. Any help would be hugely appreciated.
Edit: I changed the path in the script tag from /public/highcharts.js
to /highcharts.js
. That gave me the following errors in my Console Debugger:
Uncaught ReferenceError: Highcharts is not defined highcharts.js:3
(anonymous function) highcharts.js:3
f.Callbacks.n jquery.min.js:2
f.Callbacks.o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B
As we discussed in chat, there were a few missing pieces.
So, in short, you needed this in your layout:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/js/highcharts.js" type="text/javascript"></script> <!--where you put the high charts library -->
<script src="/highcharts.js" type="text/javascript"></script> <!-- your script -->
Now going forward (assuming you are working w/ rails 3.1+), I'd suggest moving your javascripts to a more conventional location. In 3.1, rails likes to see it in app/assets/javascripts
but public/javascripts
is still fine, just not exactly conventional.
You will get a lot of milage by understanding the rails helpers to insert script tags and the Asset Pipeline.
Good luck!
The problem is in the first line of source that is var charts;
remove it and you are done.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With