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?

Answer 1

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