javascript - Embed API Custom Components :Uncaught TypeError: Cannot read property 'ViewSelector2' of undefined -


i try creating own analytics dashboard following link below embed api https://ga-dev-tools.appspot.com/embed-api/custom-components/

i error @ line var viewselector = new gapi.analytics.ext.viewselector2

where can find right version of following files
1. active-users.js
2. date-range-selector.js
3. view-selector2.js

please help.

the code given below

gapi.analytics.ready(function() {    gapi.analytics.auth.authorize({     container: 'embed-api-auth-container',     clientid: 'xxxxxxxxxxx.apps.googleusercontent.com'   });      var commonconfig = {     query: {       metrics: 'ga:sessions',       dimensions: 'ga:date'     },     chart: {       type: 'line',       options: {         width: '100%'       }     }   };     var daterange1 = {     'start-date': '14daysago',     'end-date': '8daysago'   };   /   var daterange2 = {     'start-date': '7daysago',     'end-date': 'yesterday'   };      var viewselector = new gapi.analytics.ext.viewselector2({     container: 'view-selector-container',   }).execute();        var daterangeselector1 = new gapi.analytics.ext.daterangeselector({     container: 'date-range-selector-1-container'   })   .set(daterange1)   .execute();     var daterangeselector2 = new gapi.analytics.ext.daterangeselector({     container: 'date-range-selector-2-container'   })   .set(daterange2)   .execute();    var datachart1 = new gapi.analytics.googlecharts.datachart(commonconfig)       .set({query: daterange1})       .set({chart: {container: 'data-chart-1-container'}});    var datachart2 = new gapi.analytics.googlecharts.datachart(commonconfig)       .set({query: daterange2})       .set({chart: {container: 'data-chart-2-container'}});    viewselector.on('viewchange', function(data) {     datachart1.set({query: {ids: data.ids}}).execute();     datachart2.set({query: {ids: data.ids}}).execute();      var title = document.getelementbyid('view-name');     title.innerhtml = data.property.name + ' (' + data.view.name + ')';   });    daterangeselector1.on('change', function(data) {     datachart1.set({query: data}).execute();      // update "from" dates text.     var datefield = document.getelementbyid('from-dates');     datefield.innerhtml = data['start-date'] + '—' + data['end-date'];   });      daterangeselector2.on('change', function(data) {     datachart2.set({query: data}).execute();       var datefield = document.getelementbyid('to-dates');     datefield.innerhtml = data['start-date'] + '—' + data['end-date'];   });   }); 

the source files located in /build/javascript/embed-api/components directory in github project. here's link:
https://github.com/googleanalytics/ga-dev-tools/tree/master/build/javascript/embed-api/components

all have download files , add them page.

if @ source of demo referenced, you'll notice contains following lines:

<!-- include viewselector2 component script. --> <script src="/public/javascript/embed-api/components/view-selector2.js"></script>  <!-- include daterangeselector component script. --> <script src="/public/javascript/embed-api/components/date-range-selector.js"></script> 

the location /public/javascript/embed-api/components/ they're being hosted on demo. can choose whatever file path want, must on page of you'll keep getting error.


Comments