Can't embed google trends graph in HTML page

Question

I'm trying to embed this Google Trends chart on my HTML page but it just don't show up.

https://www.google.com/trends/explore#q=%2Fm%2F07wc_c%2C%20%2Fm%2F0gtszpv%2C%20%2Fm%2F09zx_p%2C%20%2Fm%2F03lt2r&cmpt=q&tz=

Code:

<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=/m/07wc_c,+/m/0gtszpv,+/m/09zx_p,+/m/03lt2r&cmpt=q&tz&tz&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330"></script>

Any ideas? Thanks.

Answer 1

Repeat. You might wanna check this out: How to embed google trend chart in html?

The main problem is that o think you are trying to run it directly through your system and hence the 'source' is interpreted wrong. Try throwing the html file on some web server. Try google site or something.

Answer 2

I think I'm super late for this answer, but I hope it works for someone with the same problem: The problem lies in the following: With angular you can execute tags in the index file, however using those tags in components is much more complex since there is angular code on top of it. So what we are going to do is avoid launching the script without the tag.

1.In the index.html file (in the body) paste the embed_loader:

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2578_RC02/embed_loader.js"></script>

2.Now we go to the component where you want to show the graph. Create a div that will contain the graph:

<div id="googleTrendsGraph"></div>

3.In the ngOnInit we save the HTML component that we have created:

const wrapper = document.getElementById('googleTrendsGraph');

4.Instead of using renderExploreWidget we are going to use its brother renderExploreWidgetTo which does the same but we indicate where we put the graph, and in this way we avoid using the script tag

 ngOnInit(): void {
const wrapper = document.getElementById('googleTrendsGraph');
trends.embed.renderExploreWidgetTo(wrapper, 'TIMESERIES', {
  'comparisonItem': [{
    'keyword': 'cloud tourism',
    'geo': 'KR',
    'time': 'today 5-y'
  }, {'keyword': 'computing innovations', 'geo': 'KR', 'time': 'today 5-y'}, {
    'keyword': 'computing containers',
    'geo': 'KR',
    'time': 'today 5-y'
  }, {'keyword': 'cloud services', 'geo': 'KR', 'time': 'today 5-y'}, {'keyword': 'computing ksu', 'geo': 'KR', 'time': 'today 5-y'}],
  'category': 0,
  'property': ''
}, {
  'exploreQuery': 'date=today%205-y&geo=KR&q=cloud%20tourism,computing%20innovations,computing%20containers,cloud%20services,computing%20ksu',
  'guestPath': 'https://trends.google.com:443/trends/embed/'
}); }