Chartkick Datepicker/Range Selector - 可以选择日期来显示数据

Question

我使用ahoy gem 来跟踪访问次数，并使用chartkick gem 向用户显示数据。

在用户仪表板页面中，我有大约 3-4 个图表，每个图表向用户显示不同的数据。

截至今天，我的图表仅显示最近 7 天，我通过 group_by_day(:started_at, last: 7) 完成。

= area_chart Visit.where(user: current_user).group_by_day(:started_at, last: 7).sum(:price), label: '$'

如何添加datepicker 以便用户可以选择两个日期（开始和结束日期）并显示所选/给出日期之间的数据？

更新： 我创建了charts_controller.rb 并从controller 和routes 获取图表。

例如：

class ChartsController < ApplicationController
  def visits
    result = Visit.where(user: current_user).group_by_day(:started_at, last: 7).count
    render json: [{name: 'Visits', data: result}]
  end

我的routes.rb：

resources :charts, only: [] do
    collection do
      get 'visits'
    end
  end

我的看法：

= area_chart visits_charts_path

Answer 1

您可以创建一个datepicker 并在其上添加一个 onchange 侦听器，然后使用 ajax 将开始和结束日期发送到呈现图表的控制器：

$(".end_at").change(function(e){
    end_at = $(e.target).val(); 
    start_at = $(".start_at").val();     

      $.ajax({
        type: "POST",
        url: "/charts",
        data: {
          start_at: start_at,
          end_at: end_at,
        },
        success: function (data) {
          $(".chart-container").html(data);
        },
      });    
});

在您的控制器中：

class ChartsController < ApplicationController
  def visits
    start_at = params[:start_at].to_date
    end_at = params[:end_at].to_date
    render :inline => "<%= area_chart Visit.where(user: current_user).group_by_day(:started_at, range: start_at..end_at).sum(:price), label: '$' %>"
  end
end