Search code examples
csshtmlgoogle-trends

Google Trends Embed not displaying properly

I am attempting to build some html signage content that displays trend stats for specific keywords. The issue is that the embedded charts are only partially visible. The top 25% shows but it is cut off from there.

<div id="topleft">
<script type="text/javascript" src="embed.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("GEO_MAP", {"comparisonItem":[{"keyword":"digital signage","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=digital%20signage&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
</div>

#topleft {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 360px;
    width: 640px;
    background-color: green;
}
Solution

  • Your first script tag is wrong, try using 

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

    Or copy directly from trends.google.com/trends/explore?date=today%2012-m&q=digital%20signage