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.

score 2 · Answer 1 · edited May 23 '17 at 11:52

2

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.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 09 '15 at 18:26

Ankit Vadehra

157
1
11

score 0 · Answer 2 · answered Jan 28 '15 at 07:37

0

You need to include the trend result in an iframe.

<iframe scrolling="no" style="border:none;" width="640" height="330" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=/m/07wc_c,+/m/0gtszpv,+/m/09zx_p,+/m/03lt2r &cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=640&h=330"></iframe>

See this fiddle

answered Jan 28 '15 at 07:37

Vikash

1,109
1
12
19

1

They added `SAMEORIGIN` on their header request, we can't call that through iFrame! – Mohammed AlBanna Dec 14 '16 at 22:29
@Mohammad I don't see any error in the mentioned [fiddle](http://jsfiddle.net/qvw57ygd/). Can you clarify? – Vikash Dec 15 '16 at 04:32
Yeah, I got this error message in the console with my app, check this [screenshot](http://screencast.com/t/v5jFxTAhMlIA). Sometimes it works fine, refresh many times you'll get this error. From other point, check [this](http://screencast.com/t/lAXWyyyoD). – Mohammed AlBanna Dec 15 '16 at 16:30

score 0 · Answer 3 · answered Aug 04 '21 at 10:25

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/'
}); }

Can't embed google trends graph in HTML page

3 Answers3