Google Trends widget - Related queries - change view from Top to Rising via automatic click (ng-click)

Question

Google Trends allows to embed widgets of search trends data on any HTML page. The widget "Related queries" presents data of Top and Rising search queries. By default when the embedded widget loads it shows the Top queries.

I would like to show by default the Rising queries view instead of Top queries view. It can be switched manually from the widget menu. I am looking for a way to automate the process by showing only rising queries view in 1 or more widgets on a HTML page.

Example Related queries widget for "Stack Overflow" keyword: https://jsfiddle.net/Lox8heyt/

Image: https://i.stack.imgur.com/Wnqxa.png

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("RELATED_QUERIES", {"comparisonItem":[{"keyword":"Stack Overflow","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=Stack%20Overflow&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script> 

Google Trends API: I did not find the option to change the view in the widget code.

Is it possible to click automatically on the widget button via JS to change the view from Top to Rising? For example using the XPath or JS path?

Ng-Click:

ng-click="ctrl.setViewField('risingBullets')
ng-click="ctrl.setViewField('bullets')"

XPath:

//*[@id="menu_container_0"]/md-menu-content/md-menu-item[1]/button

JS Path:

document.querySelector("#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button")

Selector:

#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button

Answer 1

This isn't an answer per se but I hope it helps a little

looking at the google trends widget its clearly written in angular,

ordinarily, you could call an angular method from jquery like so:

angular.element($(".md-menu-item-text")).triggerHandler('click');
//angular.element('#someElemnt').scope().AngularFunction();

there are lots of examples on SO of how to do this:

Call Angular Function with Jquery

How to call angular scope function from javascript?

To name but a few....HOWEVER, from my tests this only seems to work after you click on the google trends widget, I think that's because the widget creates an iframe that seems to require user interaction before the parent page can see angular and because it is a dynamically rendered iframe you can't seam to force its activation or hook into it in any meaningful way. You could try using the npm version that has the call-back function

googleTrends.interestOverTime({keyword: ['Women\'s march', 'Trump Inauguration']})
.then(function(results){
  console.log('These results are awesome', results);
  //call some function here 
})
.catch(function(err){
  console.error('Oh no there was an error', err);
});

In the "then" method, you should have access to angular to find the element to call its event because at this point you know angular is loaded and accessible, but that's just a theory I haven't tested,

I notticed when using the jquery document on load function, angular was undefined (again because it's in an iframe it seems) but as soon as you interact with the widget in any way, then it seems you are able to access the elements within and can call angular and can call the click event of the button in question using the example code above

You could look at actually using angular to implement the google trends, that seems to be what google use in their example page: https://trends.google.com/trends/explore

which it seems has set the rising as the default option on some of their examples, meaning it must be possible

I hope this helps