Meteor: Display API result data on highcharts

Question

I have a page which gets data (daily view count) from a users YouTube channel 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 result 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 and would greatly appreciate any help.

Checkout this article. I think point #3 should be the case you are looking for, at least as good starting point. — Paweł Fus
– Paweł Fus, Commented Feb 16, 2016 at 9:44

Darpan Kakadia · Accepted Answer · 2016-02-21 20:20:58Z

Do it this way:

Template.apps.onCreated(function() {
  var self = this, startDate, endDate;
  self.apiStartDate = new ReactiveVar(moment().subtract(29, 'days').format('YYYY-MM-DD'));
  self.apiEndDate = new ReactiveVar(moment().format('YYYY-MM-DD'));
    self.autorun(function(){
    // View API Call
       startDate = self.apiStartDate.get();
       endDate = self.apiEndDate.get();
       GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': endDate, metrics: "views", ids: "channel==MINE", 'start-date': startDate, metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
         console.log(result);
       });
  });
});

Same way in rendered:

var self = this;
var startDate = self.apiStartDate.get();
self.apiStartDate.set(new Date());

Suggestion:

Start using reactiveDict instead of reactiveVar.

Collectives™ on Stack Overflow

Meteor: Display API result data on highcharts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related