Skip to content

Instantly share code, notes, and snippets.

@taylorbrooks
Created November 22, 2016 19:12
Show Gist options
  • Save taylorbrooks/cf76f42446133ae21e6317df6a899338 to your computer and use it in GitHub Desktop.
Save taylorbrooks/cf76f42446133ae21e6317df6a899338 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment