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

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 以便用户可以 select 两个日期 （开始和结束日期） 并显示 selected/giving 日期之间的数据？

更新： 我已经创建了 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

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

Chartkick Datepicker/Range Selector - Possibility to choose dates to show data

ruby

datepicker

highcharts

ruby-on-rails-4

chartkick