0

Once page load google tends graph is getting load under trendsBlock class. In below code once after calling next_fun() complete html code getting render with graph. I need to render inside of trendsBlock.

<html>
<body>

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

<div class="trendsBlock">
    <script type="text/javascript"> 
        trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"IN","time":"2016-10-02 2017-11-02"},{"keyword":"citi bank","geo":"IN","time":"2016-10-02 2017-11-02"}],"category":0,"property":""}, {"exploreQuery":"date=2016-10-02 2017-11-02,2016-10-02 2017-11-02&geo=IN&q=dbs%20bank,citi%20bank","guestPath":"https://trends.google.com:443/trends/embed/"}); 
    </script> 

</div>


<button onclick="next_fun()">Click to next trends</button>  

<script type="text/javascript">

    function next_fun(){

        //innerHTML in to class trendsBlock

        //?

    }

</script>
</body>
</html>
Priy Ranjan
  • 119
  • 1
  • 8

1 Answers1

4

The renderExploreWidgetTo method allows one to embed the charts to any HTML element.

You can look at the below sample code to understand.

function next_fun(){

var divElem = document.getElementById('sampDiv');

trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
  
}
 
    <html>
    <body>

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

    <div id='sampDiv'>
    </div>


    <button onclick="next_fun()">Click to next trends</button>  
    </body>
    </html>

P.S: when I am running the above code in StackOverflow's internal compiler/browser it throws an error. Error img!!

But works fine otherwise.

Saddam Jalal
  • 41
  • 2