Getting data from Postgres in JSON format in ROR into a Highcharts javascript

I am learning ROR (5+ months currently) and am trying to get data from a Postgres database into Highcharts. The Postgres table has columns for :id, :name, and :pc1 - which is one-year percent change - (among others). There are five time-series [:id] in the database.

Here's the db schema:

create_table "series", force: true do |t|
    t.string   "acronym"
    t.string   "name"
    t.string   "current"
    t.string   "previous"
    t.string   "pc1"
    t.datetime "created_at"
    t.datetime "updated_at"
end

Here's a portion of the series controller:

class SeriesController < ApplicationController
before_action :set_series, only: [:show, :edit, :update, :destroy]

# GET /series
# GET /series.json
def index
  @series = Series.all
end

def percent
  @series.each do |series|
    series.name
    series.pc1
  end
  render :json  
end

I'm defining a method - "percent" - because I want to create several different charts, e.g., one for year-over-year percent change (this one) as well as previous vs. current.

Here's the view with the Highcharts script:

More or less following Highcharts' instructions (here: http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database ), I pulled the "data" request out of the Highcharts function. The original Highcharts demonstration code - using an embedded "hard-coded" array - is here: http://www.highcharts.com/docs/getting-started/your-first-chart I assume I'm supposed to remove the series if I'm declaring it as a variable before calling the function. I'm ignoring the php in the example because I should be rendering the series in json from the controller.

<div>
<script>
  var chart = new Highcharts.Chart({
    chart: {
       renderTo: 'container'
    },
    series: [{

// I pulled local host out of here because Stackoverflow doesn't like it

      var url =  "";
      $.getJSON(url,  function(resp) {
        options.series[0].name = name;
        options.series[0].pc1 = pc1;
        var chart = new Highcharts.Chart(options);
        });

      pointStart: 0,
      pointInterval
    }]
});

  $(function () { 

      $('#container').highcharts({
          chart: {
              type: 'bar'
          },
          title: {
              text: 'Fruit Consumption'
          },
          xAxis: {
              categories: ['Apples', 'Bananas', 'Oranges']
          },
          yAxis: {
              title: {
                  text: 'Fruit eaten'
              }
          },          
      });

  });
  </script>
</div>

Here's the model:

class Series < ActiveRecord::Base
    has_many :series
end

I think I have multiple issues: 1. Am I correctly rendering json in the controller? 2. Should I be calling a url in the script or a file (since I'm using a localhost server)? 3. I suspect there are others, e.g., should the percent method be in the before action in the controller?

The error in the console is this line: var url = "h t t p:// local host (since I can't use that word):3000/series"; I've tried a number of variations including /series and the file path.

My environment is set-up (using an Apple Mac with Mavericks). I use the Terminal app with rails server running, Postgres running in a separate tab, Sublime Text version 2, and Chrome.

Thank you in advance for your help. This is my first question / post to Stackoverflow. What a great resource!