0

I have a problem to make a widget in lwc from external site. My code from external site is:

<html>
  <div class="tradingview-widget-container"> 
    <div id="tradingview_04149"></div> 
    <div class="tradingview-widget-copyright">
      <a href="https://pl.tradingview.com/symbols/NYMEX-TTF1!/" rel="noopener" target="_blank"><span class="blue-text">TTF1! wykres</span></a> od TradingView
    </div> 
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> 
    <script type="text/javascript"> 
      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"
        } 
      ); 
    </script>
  </div>
</html>

I download the script tv.js and took it to the static resources as myLib. I make a new lwc component tradeGaz. My html file is:

<template>
    <div lwc:dom="manual"></div>
    <div id="tradingview_04149"></div> 
    <div class="tradingview-widget-copyright" >
      <a href="https://pl.tradingview.com/symbols/NYMEX-TTF1!/" rel="noopener" target="_blank"><span class="blue-text">TTF1! wykres</span></a> od TradingView
    </div> 
</template>

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.

Improve this question

2 Answers 2

Reset to default
0 
<div lwc:dom="manual"></div>
<div id="tradingview_04149"></div>

Should be:

<div data-container lwc:dom="manual" id="tradingview_04149"></div>

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.

Improve this answer
0

Ok. Thanks. The demo is working fine, but when I put this lwc component on record page I get an error: enter image description here

Could you help me with this problem. Thanks.

My gasTrade.js-meta.xml file is:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
Improve this answer
2
  • Please use the Post answer button only for actual answers. You should modify your original question to add additional information.
    – identigral
    Commented Aug 7, 2022 at 16:43
  • Ok. I will be remember that.
    – Marek Oleksik
    Commented Aug 7, 2022 at 17:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .