unable to get highcharts working in Rails

Question

I'm trying to get Highcharts working in a Rails4 app.

I have included

gem 'highcharts-rails', '~> 3.0.0'

In my application.js file I have:

//= require highcharts
//= require highcharts/highcharts-more # to get the new features in 2.3.0

in my Gemfile, and have copied highcharts.js and highcharts-more.js to vendor/assets/javascripts. At the top of one of my .html.erb files I have put (copied and pasted from the highcharts documentation):

<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>
<div id="container" style="width:100%;height:400px;"></div>
$(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]
        }]
    });
});

When I view the page I get an error "wrong number of arguments (9 for 1)" on the line in my application.js file that says

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

I'm not sure where that line comes from, but if I comment out

//= require highcharts/highcharts-more # to get the new features in 2.3.0

from application.js the error goes away but the graph doesn't render, it just shows the javascript as text.

What am I missing?

I should add that I am a Rails novice and I know no javascript whatsoever.

Edit: Sample code for entire project is on Dropbox.

Edit2: Sample code corrected so the Javascript is in a element. Now I don't see the Javascript, but I don't see anything else either.

Answer 1

The problem is that (most probably) you are using 2.x version, while constructor with jQuery was introduced in 3.x version. Change from:

$('#container').highcharts( options );

To:

new Highcharts.Chart( options );

Note: In second constructor you need to add chart.renderTo to set container for Highcharts.

Answer 2

With gem added to the Gemfile and you have run the bundle install command.

Add this to your application.js file

//= require jquery-1.8.2.min
//= require jquery-ui-1.8.1.custom.min
//= require scripts 
//= require_directory.

//= require scripts // if you have javascripts or jQuery functions in script.js file

Add the highcharts.js under the app/assets/javascripts directory where all your jQuery are present.

Now just use the javascript include tag in your layout file as

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

now you are all set.

your html markup as it is

<div id="container" style="width:100%;height:400px;"></div>

your script as it is

$(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]
        }]
    });
});

OUTPUT

It worked for me.