Google Analytic Embed API chart isn't rendered

Question

I am trying to create a chart using the Google Analytic Embed API (https://developers.google.com/analytics/devguides/reporting/embed/v1/component-reference#datachart). Authentication works fine, yet the chart isn't rendered.

This is my code:

<html>
...
<body>


<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'));
</script>

<script>
gapi.analytics.ready(function() {


  var CLIENT_ID = '[client id, which I removed for this purpose]';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });


var chart = new gapi.analytics.googleCharts.DataChart({
  query: {
    'ids': 'ga: [profile id, removed]',
    'metrics': 'ga:sessions',
    'dimensions': 'ga:date',
   'start-date': '30daysAgo',
      'end-date': 'yesterday',

  },
  chart: {
    'type': 'LINE',
    'container': 'line-chart',
    'options': {
      'title': 'Test report',
      }
  }
});

chart.on('success', function(response) {
   response.chart

});

chart.execute();

});

</script>
                    <div id="auth-button"></div>
                    <div id="line-chart" style='width:100%;height:300px;'></div>

</body>
</html>

I would be very grateful, if somebody could take a look at the code and help me.

Thanks in advance

Chris

Philip Walton Philip Walton · Accepted Answer · 2015-02-27T00:51:53

Your exact code works just fine for me when I use my client ID and view ID.

That leads me to believe you didn't set up your client ID correctly, in which case you should be getting JavaScript errors in the developer console. Did you look there? The most likely problem is you didn't set the correct origins.

Google Analytic Embed API chart isn't rendered

1 Answers