Tradingview widget not working

Resolved gasa888
(@gasa888)

5 years, 4 months ago

I am trying to insert a tradingview widget into a wordpress.org website. When I paste the code into a html block the block preview shows it ok but when published or page previewed, the chart doesn’t show. Just shows a link. Is there a way to get this working?

Viewing 7 replies - 1 through 7 (of 7 total)

George Appiah
(@gappiah)

5 years, 4 months ago

Can you give the link to the page where you have the widget?

I tested one of the widgets on a temporary sandbox site and it works:

https://s-qq9sjk2mgng7.eu1.wpsandbox.org/tradingview/
Thread Starter gasa888
(@gasa888)

5 years, 4 months ago
The page is https://goldandsilverassets.com/chart-draws/
I have tried 2 widgets. The html for the first is below. The page just shows links rather than embedding the charts.
```

<div class="tradingview-widget-container">
  <div id="tradingview_6cad2"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/GOLD/" rel="noopener" target="_blank"><span class="blue-text">GOLD 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(
  {
  "width": 600,
  "height": 400,
  "symbol": "GOLD",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "container_id": "tradingview_6cad2"
}
  );
  </script>
</div>

```
- This reply was modified 5 years, 4 months ago by bcworkz. Reason: code fixed
Moderator bcworkz
(@bcworkz)

5 years, 4 months ago

Your posted widget embed code works on my site as well. It’s a local test site, you’ll have to take my word for it. That said, placing script into the WP editor is unreliable. It can easily be corrupted without you being aware. Either place the embed code directly onto a custom page template, or create a custom shortcode to output the embed code.
https://codex.wordpress.org/Shortcode_API
Thread Starter gasa888
(@gasa888)

5 years, 4 months ago
I tried the custom shortcode but it still shows as a link when published.
https://goldandsilverassets.com/chart-draws/

I added the following to the functions php
```
/* function that just displays the script */
function insert_tradingview_chart_shortcode() { ?>

<div class="tradingview-widget-container">
  <div id="tradingview_6ed04"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/TVC-GOLD/" rel="noopener" target="_blank"><span class="blue-text">GOLD 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(
  {
  "width": 600,
  "height": 400,
  "symbol": "TVC:GOLD",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "container_id": "tradingview_6ed04"
}
  );
  </script>
</div>

<?php
}
/* create a shortcode called tradingview_chart that will run the function */
add_shortcode('tradingview_chart', 'insert_tradingview_chart_shortcode');
```
I then added [tradingview_heatmap] to a shortcode block on the page editor.
- This reply was modified 5 years, 4 months ago by bcworkz. Reason: code fixed
Moderator bcworkz
(@bcworkz)

5 years, 4 months ago

Well, you’ve produced shortcode output incorrectly, but that’s not really the issue. But for the record, all output needs to be collected into a variable which is returned for WP to echo out at the right time. You could use output buffering or a series of $output .= 'line of page content'; type of code.

I tested your shortcode on my site and it produces the chart without issue. Your site has some added code that’s altering the usual output in some manner. Try switching to twentytwenty theme, temporarily adding your shortcode definition to its functions.php. Then deactivate all plugins. Your shortcode and its embedded script ought to work correctly. Restore the plugins, one at a time. When the chart fails to appear, the last activated plugin is the cause. If the chart works with all plugins, the cause is your normal theme.

BTW, when you post code in these forums, please use the code button or demarcate with backticks. When you don’t, your code gets corrupted and it’s difficult for others to test your code for themselves. I fixed the code in your replies here for you, but that’s not going to keep happening 😉

Thread Starter gasa888
(@gasa888)

5 years, 4 months ago

Thanks for your help. Im a newbie so thanks for forgiving my slip ups 🙂

Thread Starter gasa888
(@gasa888)

5 years, 4 months ago

Thanks, it turns out it was the AMP plugin causing the problem.