Google Charts Embed API is not working

Question

I'm using Embed API to include GA charts on my site from ServiceAccount. The site is a Single Page application with AngularJS. I've created several directives for every chart type and a controller, name it GAController, shared between them. In this controller i use gapi.analytics.ready(..) to wait until analytics object is fully loaded.

The problem is that when GAController is called for first time after page refresh, then gapi.analytics.ready(..) is called with callback function and then authentication and other logic executes. Hovewer, if i go to this page for the second time f.e. from other page via ui-router, then callback is added to ready but not executed. At all.

at the template page bottom, there's gapi script:

  (function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};}
(window,document,'script'));

my code is the following:

gapi.analytics.ready(function () {
  // this is not called the second time
  if (!gapi.analytics.auth.isAuthorized()) {
    gapi.analytics.auth.authorize({
      serverAuth: $scope.$parent.getAccessToken()
    });
  }
  // do some other logic
});

but all the times gapi.analytics object is in the same state { q: [], ready: function()...}.

Can somebody help me to understand what's going on. Thanks for any help

Answer 1

I found the answer. You can try this, alternate the "gapi script"

                    (function (w, d, s, g, js, fs) {
                    if ($('#googleCache').length > 0) return;
                    g = w.gapi || (w.gapi = {}); g.analytics = { q: [], ready: function (f) { this.q.push(f); } };
                    js = d.createElement(s); fs = d.getElementsByTagName(s)[0];
                    js.src = 'https://apis.google.com/js/platform.js';
                    js.id = "googleCache";
                    fs.parentNode.insertBefore(js, fs); js.onload = function () { g.load('analytics'); };
                }(window, document, 'script'));