Loading TradingView Chart Widget with Dynamic Data (Dmx.parse)

Wappler General How To
#1

How’s it going, guys?

I need some help implementing a “dynamic” TradingView widget.
I can’t for the life of me figure out how to pass in dynamic values as “symbol” for the widget below.

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_3ee77"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/WETHVEGA/?exchange=SUSHISWAP" rel="noopener" target="_blank"><span class="blue-text">WETHVEGA 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": "100%",
  "height": 450,
  "symbol": "SUSHISWAP:WETHVEGA",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_side_toolbar": false,
  "container_id": "tradingview_3ee77"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

I’ve tried “dmx.parse” to retrieve data from a variable (pair), but it comes up as “undefined.” I understand that it has something to do with the widget loading before the value in the variable, but I’m not quite sure how to go about it in this situation.

Thanks everyone.

#2

Hi.
Wrap your widget initialization code in a function. Then, in success of server action which gets the data, call this function.

I am assuming here the data is in server connect.
If the data is staticly set in a variable, you can try wrapping your code in a setTimeout of a 500/1000ms.

2 Likes
#3

Thanks sid.
“setTimeout” did the trick, as the data in the variable is dynamic.

Thanks again, sid.

#4

In general cases… You don’t really need the setTimeout wrapping.
If you could explain a bit about how the variable value is set, maybe I can think of a better solution.

#5

Sure thing!

The value for the variable comes from a server action.
It’s actually from a list within the data returned.

I’ve used a variable “A” to keep track of the key/index of the selected item from the list (displayed in a dropdown), and the value of variable “B,” (the data required by the chart (the “symbol”)), changes based on the value of “A.”

So my current flow is: On server action success - Populate repeat (dropdown) - On value change (A) - Run page flow ( Update value of “B” using “A” - Run chart function).

As you rightly pointed out, the problem was that the widget was initialized before the variables were assigned values. setTimeout took care of it.

What do you think?

#6

You can use change event of dropdown itself to run page flow. Don’t need to save the selected value in a variable.
And use page flow to call the JS function.

This would work on change of dropdown.
For first page load, dropdown event will probably not trigger… So, you need to call the same function on success of Server Action, using inline flow runjs step.

I might be missing something, but I hope you understand the flow I am proposing. If it does not fit, maybe you can use this somewhere else. :grin:

#7

Haha! It does make sense.
The reason I haven’t done that is because I need the variable value to populate some other elements on the page simultaneously. Maybe if I wrapped it all in a page-flow though… :thinking: (I should use more page flows).

Anyway, I’ll try it out.
Thanks bud.

1 Like