How to add an HTML widget through Javascript?
Question
When you copy and paste the tradingview chart widget HTML code (listed below) in your html file, the chart widget appears, however I need to add this widget code through javascript because in my project I need the widget to change based on the asset clicked by the user. So I need to destroy the current widget and add a new one through javascript, and I am struggling to accomplish this, this is the tradingview widget HTML code:
<div class="tradingview-widget-container" style="height: 100%;">
<div id="tradingview_fb869" style="height: 100%;"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:ADABTC",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"save_image":false,
"container_id": "tradingview_fb869"
}
);
</script>
</div>
And I tried to add this widget programatically through javascript by changing the innerHTML of a div element to the widget code string, but with no success:
var widgetCode=`
<div class="tradingview-widget-container" style="height: 100%;">
<div id="tradingview_fb869" style="height: 100%;"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:ADABTC",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"save_image":false,
"container_id": "tradingview_fb869"
}
);
</script>
</div>
`;
document.getElementById("widgetDiv").innerHTML=widgetCode;
So I ask how do I create this widget with javascript?
1 answers
solution1
0 ACCPTED 2020-12-17 14:01:33
You should add a few more lines of code. I guess you forgot add id property in your chart div You can get a sample that works for you at this link.
<html>
<head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
var fxWidget = new TradingView.widget({
"autosize": true,
"symbol": "BINANCE:ADABTC",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"save_image":false,
"container_id": "tradingview_fb869"
});
document.getElementById("fxWidget").innerHTML=fxWidget;
</script>
</head>
<body>
<div id="fxWidget"></div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.