Highchart / ROR - извлечение данных из таблицы базы данных

Question

У меня есть приложение rails, в котором реализованы highcharts.Сейчас я пытаюсь расширить его, чтобы он перечислял количество часов, потраченных на конкретный проект.Я создал пример JSfiddle того, чего я пытаюсь достичь. JSfiddle Что я изначально пытаюсь сделать, это следующее:

• Текущий вошедший в систему пользователь идет к своему расписанию, выбирает проект или несколько проектов, вводит их часы
• Введенное количество часов и выбранные проекты заносятся в таблицу ProjectsHours.
• Текущий пользователь может затем посетить страницу часов проекта, которая будет извлекать данные из таблицы ProjectsHours и отображать их, как пример JSfiddle, который я предоставил.

Я провел некоторое исследование покак я думаю, что это может быть сделано.На сайте highcharts я увидел, что вы можете запросить данные, настроив запрос Ajax.

Я пишу этот вопрос, потому что я все еще новичок в ror и javascript.

Я также реализовал функцию автозаполнения, которая использует запрос ajax и использует JSON для извлечения данных.Я настроил свою функцию автозаполнения следующим образом, это немного нерелевантно, однако я опубликовал следующий код javascript для моего автозаполнения, потому что.Я лично думаю, что то, что я пытаюсь сделать, будет немного похоже на то, что я пытаюсь сделать.Я могу ошибатьсяЕсли кто-то может исправить меня, спасибо.

Автозаполнение

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);

                }
            });
        }
    });  

Answer 1

При использовании AJAX с старшими диаграммами я обычно делаю что-то вроде:

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

JSON для вышеупомянутого выглядит следующим образом, однако это для круговой диаграммы, для столбчатой ​​диаграммы данные могут быть незначительнымиразные:

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

Надеюсь, это поможет.