Google Analytics Embed API not showing chart

Question

Google Analytics Embed API chart not rendered while integrating in my site dashboard.

Done this...

<script>
(function(w,d,s,g,js,fs){
  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';
  fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));


gapi.analytics.ready(function() {

  gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
     clientid: 'MY_CLIENT_ID.apps.googleusercontent.com'
   });

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector-container'
  });


  viewSelector.execute();

  var dataChart = new gapi.analytics.googleCharts.DataChart({
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:date',
      'start-date': '30daysAgo',
      'end-date': 'yesterday'
    },
    chart: {
      container: 'chart-container',
      type: 'LINE',
      options: {
        width: '100%'
      }
    }
  });

  viewSelector.on('change', function(ids) {
    dataChart.set({query: {ids: ids}}).execute();
  });

});
</script>

Created the **HTML** tags...

<div class="panel-body">
    <div class="col-md-12">
        <div id="embed-api-auth-container"></div>
        <div id="chart-container"></div>
        <div id="view-selector-container"></div>
    </div>
</div>

But it is showing a button

While allowing permission, it is showing...

You are logged in as: [email protected]

But not showing the chart

Is something I am missing ? There is no Javascript error.

For your information, I enabled the Analytics API, created oAuth Client ID and I am using Bootstrap framework for my site dashboard.

Do you have an Analytics account (with data) associated with the email your are logged in with, and are you a selecting a View from the view selector for which you have read access? (note the demo account cannot be used with the API). Check the networking tab to ensure the API is being called. — Matt
@Matt Thanks for your reply. For your information, (1) Yes, I have Analytics account associated with the email. (2) I do not see any view selector. — Raja

Justin Michaux Justin Michaux · Accepted Answer · 2018-09-05T09:05:28

I just do it recently,

Sometimes I need to reload (cause of Angular based) to see content of

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

But It's working great, I see data after logging. I saw you haven't view-selector If there isn't a error log you are logged in.

If you are using a query who need a ga (google analytics) 'view' , don't forget to get key from google analytics admin properties and then paste it in your code

Google Analytics Embed API not showing chart

2 Answers