charts.html.erb

<script>
  $(document).ready(function(){
    var start = moment().startOf('year');
    var end   = moment().endOf('year');

    $('#group_by').change(function(e){
      var val = $(this).val();

      var string = Chartkick.charts["chart-1"].dataSource;
      string = paramReplace("group_by", val, string);
      redrawChart(string);
    });

    $('input[name="daterange"]').daterangepicker({
      opens: 'left',
      startDate: start,
      endDate: end,
      ranges: {
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Past 6 Months': [moment().subtract(6, 'month').startOf('month'), moment().endOf('month')],
        'This Year': [moment().startOf('year'), moment().endOf('year')],
        'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
        'All Time': [moment('20140101'), moment().endOf('month')],
      }
    });

    $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
      var start = picker.startDate.format('YYYY-MM-DD');
      var end   = picker.endDate.format('YYYY-MM-DD');

      var string = Chartkick.charts["chart-1"].dataSource;
      string = paramReplace("start", start, string);
      string = paramReplace("end", end, string);

      redrawChart(string);
    });
  });

  function paramReplace(name, value, string) {
    var re = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        delimeter = re.exec(string)[0].charAt(0),
        newString = string.replace(re, delimeter + name + "=" + value);

    return newString;
  }

  function redrawChart(url) {
    new Chartkick.ColumnChart(
          "chart-1",
          url,
          {stacked: true}
        )
  };
</script>

<div style="display:block;height:50px;">
  <div class="pull-right col-md-3">
    <input name="daterange" class="form-control" />
  </div>
  <div class="pull-right col-md-1">
    <select id="group_by" class="form-control">
      <option value="year">Year</option>
      <option value="month" selected>Month</option>
      <option value="week">Week</option>
    </select>
  </div>
</div>
<div>
  <%= column_chart chart_stats_path(
      group_by: "month",
      metric: "amount",
      start: Time.now.beginning_of_year,
      end: Time.now.end_of_month),
      stacked: true
  %>
</div>