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

Question

I am using ahoy gem to track visits & chartkick gem to show the data to users.
In users dashboard page, I have around 3-4 charts and each of them show different data to user.
As of today, my charts only displays last 7 days & I do it by group_by_day(:started_at, last: 7).
= area_chart Visit.where(user: current_user).group_by_day(:started_at, last: 7).sum(:price), label: '$'
How can I add datepicker so users can select two dates (start & end date) and display data between selected/giving dates?
UPDATE:
I have created charts_controller.rb and get the charts from this controller & routes.
For instance:
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
My routes.rb:
resources :charts, only: [] do
collection do
get 'visits'
end
end
My view:
= area_chart visits_charts_path

Answer 1

You can create a datepicker and add an onchange listenner on it, then you send the start and end date using ajax to a controller that renders your chart:
$(".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);
},
});
});
In your controller :
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