I have a page which gets data from a users YouTube channel (views) using the Google API and then I am trying to display this data on a chart using Highcharts (line chart). The user can also use a date picker and be able to change the time period for the data that is shown (Example: Last 30 Days, Last week, Last Month, etc.) and I would like to have the chart automatically update once a new time period is selected. I’m guessing the best way for this is through ReactiveVars but I’m not having much luck making it work. My API call seems to be working fine, so now I need to have the output display on my chart.
Here is an example screenshot of my console.log for what my api result looks like (in the rows, each array is a day, 0 is the date and 1 is the corresponding view count):
I would like to have the date data appear along the bottom xAxis of the chart, and then have the view count along the yAxis. Here is an example of what my chart is looking like with the code below (with random example data):
Here is my code for the chart/date picker/api call:
Template.apps.onCreated(function() {
var self = this;
apiStartDate = new ReactiveVar(moment().subtract(29, 'days').format('YYYY-MM-DD'));
apiEndDate = new ReactiveVar(moment().format('YYYY-MM-DD'));
this.autorun(function(){
// View API Call
GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': apiEndDate.get(), metrics: "views", ids: "channel==MINE", 'start-date': apiStartDate.get(), metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
console.log(result);
});
});
});
// Views Chart
Template.apps.helpers({
viewsChart: function() {
return {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
marginBottom: 50,
spacingBottom: 40
},
title: {
text: this.username + "'s views"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Views'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center',
y:40
},
series: [{
name: 'Channel Name',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
};
},
});
// Date Picker
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) {
// Start/End date - reactive vars to set 'start-date' & 'end-date' API Call params.
apiStartDate.set(start.format('YYYY-MM-DD'));
apiEndDate.set(end.format('YYYY-MM-DD'));
});
};
I’ve been trying to create Reactive Vars for this but everything I seem to try isn’t working, anyone know how I can set this up? Fairly new to Meteor but learning lots and would greatly appreciate any help.