Trouble whem embedding charts from Google Trends

[Juan Campos]

Hi everyone,

I'm currently creating some dashboards on Confluence, but I'm having problems when embedding a chart.

I'm using Insert HTML macro. When I preview the chart, after copying and pasting the embed code, everything seems fine. However, when I preview/publish the page the charts are not working properly. (As you can see the images below)

1. Preview (working fine)

2. After publishing (only can see half of the chart)

Can you any help me with this issue?
Thanks

[kimkk]

I had similar problem when embedding the two pieces of javascripts.

My solution was merging two pieces of javascripts into one.

for example, when embedding the google tends such as

• https://trends.google.co.kr/trends/explore?date=all&q=electron%20js

The above page consists of several pieces of javascripts. 

I wanted to embedding first two javascript for TimeSeries and Geomap as followings:

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

<script type="text/javascript">

trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"electron js","geo":"","time":"2004-01-01 2021-04-22"}],"category":0,"property":""}, {"exploreQuery":"date=all&q=electron%20js","guestPath":"https://trends.google.co.kr:443/trends/embed/"});

</script>

and

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

</script> <script type="text/javascript"> trends.embed.renderExploreWidget("GEO_MAP", {"comparisonItem":[{"keyword":"electron js","geo":"","time":"2004-01-01 2021-04-22"}],"category":0,"property":""}, {"exploreQuery":"date=all&q=electron%20js","guestPath":"https://trends.google.co.kr:443/trends/embed/"});

</script>

First try was use separate HTML macro per javascript. i.e. two HTML macros, The it rendered first one correctly but second one is not fully visible. 

Hence I tried to merge two piece of javascript codes into one as follows:

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




<script type="text/javascript">

trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"electron js","geo":"","time":"2004-01-01 2021-04-22"}],"category":0,"property":""}, {"exploreQuery":"date=all&q=electron%20js","guestPath":"https://trends.google.co.kr:443/trends/embed/"});




trends.embed.renderExploreWidget("GEO_MAP", {"comparisonItem":[{"keyword":"electron js","geo":"","time":"2004-01-01 2021-04-22"}],"category":0,"property":""}, {"exploreQuery":"date=all&q=electron%20js","guestPath":"https://trends.google.co.kr:443/trends/embed/"});

</script>

and put it into one HTML macro. Then, finally the rendering displays both of two correctly.

May this trick help you.

Cheers.

[Roman Majbrodski]

I love you!