How to make a trading view widget in lwc from an external site?
I have a problem making a widget in from an external site. My code from external site is:
<html>
</html>
I downloaded the script tv.js and took it to the static resources as myLib. I make a new lwc component tradeGaz. My html file is:
My js file is:
import { LightningElement } from 'lwc';
import myLib from '@salesforce/resourceUrl/myLib';
import { loadScript } from 'lightning/platformResourceLoader';
export default class GasTrade extends LightningElement {
connectedCallback(){
loadScript(this, myLib).then(() => {
console.log('yes it is working');
new TradingView.widget({
"height": 423,
"width": 600,
"symbol": "NYMEX:TTF1!",
"timezone": "Europe/Warsaw",
"theme": "dark",
"style": "3",
"locale": "pl",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"withdateranges": true,
"range": "YTD",
"details": true,
"container_id":
"tradingview_04149" });
});
}
}
But the chart is not working. Please help me, what I have to do to fix this problem.
Should be:
Further, the LWC runtime modifies ID values, so you need to actually query for the ID first:
loadScript(this, myLib).then(() => {
const container = this.template.querySelector('[data-container]');
new TradingView.widget({
"height": 423,
"width": 600,
"symbol": "NYMEX:TTF1!",
"timezone": "Europe/Warsaw",
"theme": "dark",
"style": "3",
"locale": "pl",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"withdateranges": true,
"range": "YTD",
"details": true,
"container_id":
container.id });
});
Alternatively, you don't need to use it as a static resource. You can load it directly as an ES6 import with one small modification. Take the tv.js file, and add this to the end:
const TradingView = window.TradingView;
export { TradingView as default };
And then you can import it:
import TradingView from 'c/tv.js';
And use it as normal:
#initialized;
renderedCallback() {
if(this.#initialized) {
return;
}
this.#initialized = true;
const container = this.template.querySelector('[data-container]');
new TradingView.widget({
"height": 423,
"width": 600,
"symbol": "NYMEX:TTF1!",
"timezone": "Europe/Warsaw",
"theme": "dark",
"style": "3",
"locale": "pl",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"withdateranges": true,
"range": "YTD",
"details": true,
"container_id":
container.id
});
}
Demo.