Programmatically open Trading View Charts [tv – widgets] Part 2

In the last video, I showed you how you can
dynamically open trading you chart using a concept offered by trading view (TW) known
as TV Widgets. We created an input field and populated it
with all the symbols from binance, and then we have linked the Chart so that we can dynamically
open any chart that we want. Okay. In today’s session will optimize, sorry
not optimize but enhance the tool by adding a bit more functionality. So instead of just one input field will add
two input fields, one for all the exchanges and the other one with the symbols corresponding
to that exchange. So that way we can select any exchange and
any symbol that we want. Okay, let’s get started! I’ve created a new folder trading “TVWidget
Part2” and I just copied the files that we used in previous session. So we’ve used the “exchangeInfo.js”
file to populate all the input fields. We don’t need this anymore. So I’ll delete this. I am also taking it away from the code. First I’m going to create a new input field. I’m going to call it “exchanges”. We don’t need any onChange function right
now so I’ll just delete it. We’ll add it later. Then, here is where we populated all the symbols. So let me delete the previous code. Let me refresh the page and show you how it
looks like. So we have two input fields and nothing is
populated right now so you see them empty and by default it loads binance, some random
chart. In order to populate input fields, we’re going
to use an API offered by cryptowatch which is “” . So this API
gives us all the exchanges and all the symbols corresponding to that exchange. So let’s call this API and download all symbols
and exchanges. First I’m going to need a function to simplify
my API calls. Let me just copy that and be right back. Okay, this is the function that I’m going
to use to make API calls so first request the first parameter is the API type, the method,
It’s a GET api, sorry, in caps, and then we have to pass the URL, let make copy the
URL. So if I call this API as it is m it is going
to cause CORS issue, and I’ve talked about CORS issue in the past, so I’m not going to
repeat it. I’ve talked about some chrome extensions
that we can use to overcome CORS issue, but what I’ve noticed recently is that a lot
of the Chrome extensions are not working anymore. They don’t resolve the issue. So I’ve created my own REST Proxy, I’ll
share this proxy as well, so I can just start this proxy and use it to make all my API CALLS. All I have to do it just append this URL at
the beginning to any API that I want, and It’ll magically call the API for us and give
us a response back. So you don’t have to worry about how this
works because if this happens behind the scenes and it’s not truly relevant to our session
today so all I need to do is just append this endpoint to this proxy url. Once we get the response we want to capture
all the exchanges and the symbols in a variable. I’m going to use two arrays, the first one
to store all the exchanges and the second one to store all the exchanges and the corresponding
pair. The reason am storing this in an array is
so that I don’t have to call the API every single time I change the exchange. so this happens I can store the information
so that I can reuse it again and again. Once I load the symbols I need to sort it
in alphabetical order then I want to load these exchanges and the pairs in the input
field so by default I want to select the first exchanges binance and the first list of pairs
will be all the symbols corresponding to binance so let’s do that Once I populate the input fields I want to
load the chats so let’s do that one last thing that we have to do is we don’t need to run
this load charts here, because we want to run it only after we get all input fields
and get the symbols and popular the input fields and we also have to update the “LoadCharts”
function with another variable called “exchange” and we have to pass it here. That’s it. Let’s restart this and see if it works or
not. Before I do that, ok the proxy is running
fine, let me restart and see let me restart this page and see if it works or not. Awesome! so the page load up properly so this
is great and you see the default exchange is binance and you see all the symbols from
binance and if even if you select this and look at all the exchanges, they are sorted
in alphabetical order, this is great, even the symbols are started in alphabetical order
so this is great the only thing that’s left is whenever I change, when I change the symbol
the chart gets updated automatically because if you look at the code, the “pair” symbol
is already linked to “LoadCharts”. But whenever we change the change the exchange
we need all the symbols from that exchange to be populated here so let’s write the function
for that i’m going to call this function “refreshPairs”. First let’s get the exchange, then let’s
iterate through EP array and populate all the pairs from that particular exchange. That’s it! One last thing to do is link this function
to this input field “refreshPairs” That’s it! Now let’s change the exchange and see if it
works or not. Let me refresh the page. By default it loads Binance and the symbol
and the chart loads properly, Now if I change the exchange to, let’s say, “Bitfinex”,
yeah, when I click “Bitfinex” the symbols got automatically updated. And even the chart got updated automatically. The reason it’s not opening because of because
it said invalid symbols so it’s quite possible that some of the symbols are no longer active
or no longer being traded on the exchange and sometimes even the notation might be completely
wrong so it works in most cases but some they might be some exceptions. So it I select AGIETH, this should open up. Yeah, it opens up fine. So, there you go! This is a small video just to show you how
you can enhance what we created in the last video to add even more functionality. I’ll also share this REST Proxy, so if you
have been using the Chrome extension that I shared in my other videos to resolve the
CORS issue and if it doesn’t work you can start using this proxy internally to overcome
this CORS issue.

2 thoughts on “Programmatically open Trading View Charts [tv – widgets] Part 2”

Leave a Reply

Your email address will not be published. Required fields are marked *