TradingView widget replacing entire HTML body

Question

Trying to add TradingView widget into my website. This widget must load when user select an option from a dropdown.

Issue: The widget loads, but it replaces everything in the body and thereby the dropdown disappear.

Example:

HTML Code:

<select name="fx" class="fx">
    <option value="EURUSD">EURUSD</option>
    <option value="EURJPY">EURJPY</option>
</select>

JS:

function changeFX(fx){
  var fxWidget = new TradingView.widget({
      "width": 500,
      "height": 400,
      "symbol": "FX:"+fx,
      "interval": "1",
      "timezone": "Etc/UTC",
      "theme": "White",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "hide_top_toolbar": true,
      "save_image": false,
      "hideideas": true
    }); 
  return themeWidget;
}

$(document).on('change','.fx',function(){
   var widget = changeFX(this.value);
   // do something with widget.

});

http://jsfiddle.net/livewirerules/3e9jaLku/5 (select dropdown option, and see widget loads but dropdown disappears)

Any advice how to make the dropdown doesn't disappear and still TradingView widget load?

Questions referring to jdfiddle and showing no code are not accepted on SO. You should perform a major edit. — mkluwe, Jan 14 '17 at 13:30
@Zeigeist have a look at the answer posted by me. Dont forget to upvote and accept if it solves your problem. :) — Manish, Jan 14 '17 at 17:14
@Manish: thanks for detailed answer, it worked like a charm. — Zeigeist, Jan 14 '17 at 19:48

score 9 · Answer 1 · answered Sep 18 '17 at 15:55

9

It's certainly too late, but you can use the argument "container_id" to choose where to place the graph.

source : https://github.com/mmmy/css3demos/wiki/Widget-Constructor

answered Sep 18 '17 at 15:55

gg0512

91
1
4

Just to clarify. The container div's id must be the same as the widget's container_id attribute for it to work without errors. – Jeffrey Mar 30 '18 at 04:55

score 6 · Accepted Answer · edited May 23 '17 at 12:01

So what i can make out from the widgets website. Whatever is happening is how it works. So for this to behave the way you want. You will have to use a iframe. in your index.html and create a separate file say chart.html and give the src of the iframe as chart.html. And on change even change the src of the frame with a query parameter and read that query parameter in your chart.html and create the chart. Below is the code for your reference.

index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-git1.min.js"></script>
     <script>
      $(document).on('change','.fx',function(){
       //var widget = changeFX(this.value);
        document.getElementById('content').src = "chart.html?value="+this.value;
        document.getElementById('content').style.display = "block";
       });
</script>
<style>
  iframe{
    height:400px;
    width:600px;
    display:none;
  }
</style> 
  </head>
  <body>
   <select name="fx" class="fx">
              <option value="EURUSD">EURUSD</option>
              <option value="EURJPY">EURJPY</option>
</select>
<iframe src="chart.html" id="content" >

</iframe>
  </body>
</html>

chart.html

<html>
  <head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script>
    function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var fx = getParameterByName('value');
      var fxWidget = new TradingView.widget({
      "width": 500,
      "height": 400,
      "symbol": "FX:"+fx,
      "interval": "1",
      "timezone": "Etc/UTC",
      "theme": "White",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "hide_top_toolbar": true,
      "save_image": false,
      "hideideas": true
    }); 
    </script>
  </head>
  <body>
  </body>
</html>

Here is a plunker Demo i have created.

The link that i used for the code to get queryparameters.

How can I get query string values in JavaScript?

Hoe it helps :)

Nice answer. A better would be to change the tradingview chart without reloading it. Dunno if it is possible though — Murat Şanlısavaş, Oct 15 '22 at 10:35

score 4 · Answer 3 · edited Sep 04 '19 at 10:39

This work for me:

My html code:

<div class="dropdown no-arrow">
  <select id="my_stocks" class="form-control">
    <option value=" ">Select Stock</option>
    <option value="AAPL">AAPL</option>
    <option value="TSLA">TSLA</option>
  </select>
</div>
<div class="card-body">
  <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container tech_analysis">
  <div id="tradingview_3418f"></div>
  <div class="tradingview-widget-copyright">
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%", 
"height" : 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_3418f"
});
</script>
</div>
<!-- TradingView Widget END -->
</div>

My Jquery:

<script>
$(document).on('change','#my_stocks',function(){
  var stock_selected = $(this).val();
  var fxWidget = new TradingView.widget({
    "width": "100%", 
    "height" : 610,
    "symbol": "NASDAQ:"+stock_selected,
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "Light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_3418f"
  }); 
});
</script>

TradingView widget replacing entire HTML body

3 Answers3

Linked