I have data being pulled from the Google API which I am then trying to display on charts. Part of the params required for the API call are “start-date” and “end-date”. For this, I would like to use this bootstrap date range picker for users to be able to select these dates and then have it adjust the API call accordingly. To make the API call I am using this package: percolate:google-api.
Here is an example of the API call:
GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': "2015-10-31", metrics: "views", ids: "channel==MINE", 'start-date': "2015-10-01", metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
});
Here is my example for the date range selector:
Template.apps.rendered = function(){
$('#reportrange span').html(moment().subtract(29, 'days').format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
$('#reportrange').daterangepicker({
format: 'YYYY-MM-DD',
startDate: moment().subtract(29, 'days'),
endDate: moment(),
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'left',
drops: 'down',
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-primary',
cancelClass: 'btn-default',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
}, function(start, end, label) {
console.log(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'), label);
$('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
});
};
I can see in my console the proper output/format I need if I add the following to my date range selector example above:
console.log(start.format('YYYY-MM-DD'));
console.log(end.format('YYYY-MM-DD'));
So both my date picker and API call seem to be working fine, but now I would like to make them work together. I would like to have it so when the user first visits the page it is automatically set at “Last 30 Days”, but then if they would like to choose a different date they can do so and have my API call update automatically. So I basically need to grab the output of those two console.logs above and have them update in my API call for: 'end-date': "xxxx-xx-xx" 'start-date': "xxxx-xx-xx"
Something like this: 'end-date': endDate 'start-date': startDate
To do this I will be using reactive vars. I have been trying to create a reactive variable for a few days to make this work but nothing I do seems to work out. I’ve read the Meteor docs on this package, as well as tried to find other examples, but just can’t seem to figure this out.
If anyone has worked with reactive vars, or has some understanding on this and is willing to share any code examples based on what I have above, it would be extremely appreciated and help me out a ton as I’m fairly new to Meteor and really trying to figure this out.
Thanks!