Incorporating Google Analytics charts into my dashboard has been a challenge. Each chart is displayed as a widget that can be added or removed from the dashboard at will. The issue arises when I try to add more than one chart - they no longer display properly. Could this be due to calling the same Embed API library in each widget?
Here is an example of the code snippet used 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>