Highchart/ROR - Extract data from database table

I have a rails application that I has highcharts implemented. I am now trying to extend it so that it list the amount of hours spent on a particular project. I have set up a JSfiddle example of what I am trying to achieve. JSfiddle What I am intially trying to do is the following:

• Current logged in user goes to their timesheet, selects a project or multiple projects, enters their hours
• The entered amount of hours and selected project(s) are recorded into a ProjectsHours table.
• The Current user can then visit the project hours page which will extract the data from the ProjectsHours table and display it like the JSfiddle example I supplied.

I have done some research on how I think it maybe be done. I saw on the highcharts website that you can r开发者_如何学Goequest the data by setting up an Ajax request.

I am writing this question because I am still a beginner in ror and javascript.

I have also implemented a autocomplete function which uses an ajax request and uses JSON to retrieve the data. I set my autocomplete function up as the following, this is slightly irreleveant however I posted the following javascript code for my autocomplete because. I personally think that what I am trying to do will be slightly similar to what I am trying to do. I may be wrong. If someone can correct me thank you.

Autocomplete

Application.js

function log(message) {
        $( "<div/>" ).text( message ).prependTo("#log");
    }

    $("#tags1").autocomplete({
        minLength: 2,
        source: function(request, response) {
            $.ajax({
                url: "/positionlist",
                dataType: "json",
                data: {
                    style: "full",
                    maxRows: 12,
                    term: request.term
                },
                success: function(data) {
                    var results = [];
                    $.each(data, function(i, item) {
                        var itemToAdd = {
                            value: item,
                            label: item
                        };
                        results.push(itemToAdd);
                    });
                    return response(results);

                }
            });
        }
    });  

When using AJAX with highcharts, I usually do something like:

 setInterval(function(){
  $.getJSON('traffic_sources.json', null, function(data) {
      pie_chart("traffic_sources_graph", data.traffic_sources);
  });
 }, 3000);

function pie_chart(div, data)
{
   new Highcharts.Chart({
      chart: {
         renderTo: div,
         backgroundColor: '#dddddd'
      },
      title: false,
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: false
            },
            showInLegend: true
         }
      },
      legend: {
         layout: 'vertical',
         align: 'right',
         floating: false,
         labelFormatter: function() {
            return this.name + "(" + this.y + ")";
         }
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: data
      }]
   });
}

The JSON for the above looks like this, however this is for a pie chart, for a bar cahrt the data may be slighlty different:

{"traffic_sources":[["Direct",5465465],["Search Engines",345876],["Referring Sites",4578767]]}

Hope this helps.