How to make a trading view widget in lwc from an external site?

313    Asked by dipesh_9001 in Salesforce , Asked on May 11, 2023

I have a problem making a widget in  from an external site. My code from external site is:


<html>
  
 
    
 
     
    [removed][removed] 
    [removed] 
      new TradingView.widget( 
        { 
        //"autosize": true, 
        "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"
        } 
      ); 
    [removed]
  

</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.

Answered by Ella Clarkson


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.

Your Answer

Interviews

Parent Categories