在同一页面上添加多个Google Analytics（分析）图表

Question

I have a dashboard in which I need to incorporate Google Analytics charts. Each chart is a different widget and can be removed from or added to the dashboard. The charts display properly when there is only ONE added to the dashboard. When I add two, they don't display anything anymore. Could the fact that I call the same Embed API library in each widget cause this?

An example of the code I am using for each widget:

 <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')); </script> <div id="embed-api-auth-container-1"></div> <div id="chart-container-1"></div> <div id="view-selector-container-1"></div> <script> gapi.analytics.ready(function() { gapi.analytics.auth.authorize({ container: 'embed-api-auth-container-1', clientid: '***' }); var viewSelector = new gapi.analytics.ViewSelector({ container: 'view-selector-container-1' }); 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-1', type: 'LINE', options: { width: '100%' } } }); viewSelector.on('change', function(ids) { dataChart.set({query: {ids: ids}}).execute(); }); }); </script> 

Answer 1

Managed to temporarily fix this by calling the Embed API library ONLY in the first widget that appears on the page. Not ideal, but it works for now. If anybody figures out the right solution, I'd like to know.