Trouble whem embedding charts from Google Trends
Asked by 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)**

<br />

![prev1.png](https://community.atlassian.com/t5/image/serverpage/image-id/105917iA7BC6A0DD85C97C2/image-dimensions/332x174?v=v2 "prev1.png")

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

![prev2.png](https://community.atlassian.com/t5/image/serverpage/image-id/105918iC1462DF003C77D86/image-dimensions/865x149?v=v2 "prev2.png")

Can you any help me with this issue?  
Thanks


Answers:
author: kimkk
body: 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](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.

comments: author: Roman Majbrodski
body: I love you!