Rails перезагружает график на основе ввода формы

Я использую chartkick в приложении для рельсов 4. В настоящее время я запускаю этот код:

<%= bar_chart groupArticles(metric, limit) %> (groupArticles() — это пользовательский метод для получения массива в диаграмме. Например, <%= bar_chart groupArticles("views", 5)%> дает мне пять лучших статей по показателю views.

Теперь вопрос заключается в следующем: я хочу иметь небольшую форму, в которой пользователь может выбрать другую метрику или предел для передачи (т.е. изменить его на топ-3 или с views на date или w/e).

Затем я хочу перезагрузить диаграмму (у меня есть параметры URL-адреса для получения других материалов на странице, поэтому я не могу использовать новые параметры URL-адреса для достижения этой цели (я думаю?).

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

Это возможно? Как построить эту форму?


ruby ruby-on-rails chartkick
person Killerpixler    schedule 11.03.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

На данный момент эта функция еще не реализована (см. https://github.com/ankane/chartkick/issues/74).

Чтобы показать новые данные на диаграмме, я перезагружаю страницу. Это позволяет повторно инициализировать график с новыми данными.

person skatset    schedule 04.04.2015

arrow_upward
0
arrow_downward

По состоянию на 4 декабря 2016 г. вы можете использовать комбинацию JQuery отправка формы и встроенная функция Chartkick для обновления диаграммы без перезагрузки страницы. Во-первых, укажите диаграмме пользовательскую конечную точку:

<%= bar_chart charts_group_articles_path %>

Где charts_group_articles_path что-то вроде

class ChartsController < ApplicationController
  def group_articles_chart
    groupArticles(params[:metric], params[:limit])
  end
end

Затем в app/assets/javascripts/ создайте небольшой файл:

$(document).ready(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    data = $(this).serialize();

    Chartkick.eachChart( function(chart) {
      chart.updateData(chart.getDataSource() + '?' + data);
    });

    return false;
  });
});

Надеюсь, это поможет будущим исследователям!

person kaimonster    schedule 26.06.2017