Plot TradingView Charts with Own Data - YouTube

Few months ago, I made a video on how we can programmatically open tradingview chart and

in that video, i showcased how we can embed tradingviewcharts in your projects and one

of the comment that I received on that video is if it’s possible to plot tradingview

charts with your own data and it's it's possible but it's not possible with the approach that

I discussed in that video.

so, In today’s session, we are going to see how we can plot tradingview charts with

your own data.

Tradingview offers three different charting libraries that allow you to plot charts with

your own data.

The first one is a lightweight chart which is quite easy to use and it's quite easily

accessible.

You just have to include the cdn file in your HTML document and you can start using it and

it's free and open source and it also has quite a bit of features, quite a few it also

loaded with a lot of features.

so, and it’s also quite easy to use.

The only downside is that it doesn't have the capability of adding the tooltip or drawing

something on the charts or being able to include indicators, but other than that it is very

capable.

tradingview also offers couple of other libraries, but these are a bit difficult to get your

hands on.

You have to fill in a form and submit some details and then request for access.

so, it's not as easily accessible as the lightweight chart.

so, I'm not going to cover the other two in this video and if you scroll down you can

see comparison between all the three libraries and you can see that, the candlestick charts

available in all the three libraries.

You can also plot area and line charts and the main difference is the capability to add

technical indicators.

we can see that the indicators option is only available for the second and third libraries.

so, if indicators is your requirement, then what I'm going to discuss in today's session

may not be may not suffice your requirement but if you just want to plot the charts with

your own data without the need to reinvent the wheel then you may follow along.

This is where you can find the documentation for the light weight chart.

If you scroll down you can see all the different features.

so, it supports both Static and live charts which is great and it’s also quite lightweight

and it’s open source which is nice and it also gives you all the interactive features

like zooming and panning and scrolling around and all the stuff and if you scroll down,

you can see they also provide so many examples and if you click on this icon, you can get

the code for each example.

So, I'll leave a link for this site in the description box.

You can check it out and explore if you want to know further.

In today's video, we’re going to cover three different examples: the first one is the static

chart, where we’re going to download the candlestick data for a particular coin from

binance and just plot it as is using the lightweight charting library, and second we’re going

to create a live chat where I am go to use a socket API to get the real-time candlestick

data for a particular coin and then plug it to this library and we’re going to plot

it.

It’s going to be a live chart and third we’re going to combine the above two examples

and create a live chart with some history.

To follow along you need to have a basic understanding of the following concepts so you need to have

basic knowledge of HTML, JavaScript and if you know how to use which API and sockets

API it does come in handy but even if you don't know these two then it's fine.

I am going to show you how to do it.

it's very simple we can do it in like 5 or 6 lines of code.

Alright!

I have created a folder called tradingview custom data and I already have two other folders

which I want to talk about later.

so, first i am going to create a new folder for static charts.

I’m going to call it static charts.

Ok. and inside that folder i’m going to create index.html file and then i’m going

to create index.js file.

Let’s initiate initialise the HTML file.

I’m going to set the title to Static chart and then i’m going to put a header.

I’m just going to say binance.

BTCUSDT chart.ok. and then i’m going to create a container to hold the chart and i’m

going to call it TVchart.

I'm not going to set the dimensions here.

we are going to pass it in the code and finally let’s include the javascript file

and we also need to include the tradingview chart in the library.

So, let’s go to the documentation and here is where we can find the cdn file.

Just copy that and paste it here.

that’s it.

Let’s move on to the JavaScript file.

Before we start writing the code, I want to first go through the pseudo code so that you

understand the whole process.

so, first we are going to define the chart properties where we’re going to set the

width and height of the chart & some other properties.

Then we are going to create the chart with the defined properties and bind it to the

DOM element which is the <div> element that we just created and then we’re going to

add the candlestick series and then set the data to that candlestick series and render.

Let’s write the code.

First, I'm going to create reference to the console log.

Then, i’m going to create a variable called chart properties.

You set the width to 1500 pixels and then the height to 600 pixels and we also need

to pass the time scale and in a Time Scale we say time visible is equal to true and seconds

visibleis equal to false.

So, when you need to pass time visible and second visible because we need to send timestamp

in milliseconds and i got to know these fields then the field names by looking at the documentation.

Ok.

So, first step is done.

now, let's move on to the second step.so, first I’m going tocreate a reference to

the TV chart <div> element.

So, i say domElement = document.getelement.id.

Then, we’re going to create a chart.

Const chart is equal to.

Because we included the library we can use this function directly.

so lightweight chart.create chart.

this takes in two parameters.

The first one is Dom element and the second one is chart properties.

Next let’s move on to the step 3 which is creating the candlestick series.

Alright!

Step 3 is finished.

Now let’s get to the final step which is getting the data and rendering the charts.

So, we’re going to use BTCUSDT candlestick data from binance and use that to render the

chart.

So. this is the API to get the candlestick information.

You can see that the response is in the form of an array and each element in the array

is also another array which contains information for each candlestick.

As I mentioned earlier, i’m going to use fetch API to get the data.

So, let’s write the code.

i’m going to copy paste this link.

I need to invoke this function to convert the data in the appropriate format and it's

also an asynchronous function so it returns the promise.

So, then so, this is where we have the data.

now keep in mind that in order to set the data to the candlestick series we need to

create an Array in ascending order and ascending order from from a timeframestandpoint.

so the oldest candles come first and the newer ones come at the end and each element in the

array is a JSONwith the following fields: time open high low close.

So’ let’s create that mapping.

i’m going to use a map function to do that and return

time is equal to zero and let’s let’s first write down all the fields.

Ok.

Now timestamp should be passed in seconds.

ok. and the timestamp that you see here is the first element in the array and its provided

in milliseconds so we have to convert that to seconds by dividing by 1000.

So, we’ll say d[0] divided by 1000.

Ok . and the next value is the open price.

But you can see that it is in a string format.

Let me zoom it.

You can see that it's in the string format so we have to convert that into a number.

so we are going to say parsefloat (d[1] ) ok and I am going to copy this and paste it here

d[2] because the next one is high and the next element is low and the last one is closed.

That’s it.

That returns the data in the appropriate format.

Now we have to do the final step which is set the data to the chart.

So, to do we say candlestickSeries.set data and we pass the candlestick data.

Finally to catch any errors we can write the catch module.

That's it.

Now, let's open the file in the browser and let's see if it works or not.

It’s going to fail because of CORS issue but let's try to do it first.

If you press f2, you can see that I made a small mistake guys.

It should be ID instead of class.

so that’s the reason when we get the element by ID it failed.

So, let’s refresh now.

Alright you can see that the request to the binance API got blocked because of because

of the CRS policy so I covered about this several times in the past.

I’m not going to repeat it, but I am go to use a proxy to be able to make this call

and use that proxy in the code and I am going to share this is the proxy that I have in

the folder so when we started writing the code you might have noticed that there were

two other folders.

So, one of them is rest API proxy.

So, let’s start the proxy 1st node restproxy.

Alright the proxy is activated.

All you have to do is append your URL to this URL and it should work.

:Let’s go back to the code and I’m going to add it here and let's restart the page,

refresh the page and see if it works.

awesome!

So, you can see that the chart got displayed and you can see that i can zoom in, I can

Pan around & i can zoom in zoom out and you can do everything that I would normally do

with trading with chart and you can see that the timestamp is displayed on the bottom.

So, it works right and I can do this with any chart.

so I can change it to let say instead of BTCUSDT, i can change it to ethereum and I can change

the interval to one day and ya it should be small d and let’s refresh the page.

yup. you can see the ethereum chart now.

You can see the prices 144 so it works so this is you display a static chart now let’s

move on to the real time chart.

now lot of the code is quite similar to what we did it with static charts.

So, i'm going to duplicate this folder and reuse it for dynamic charts.

Now in order to create a live chart we need to have a socket that provides the data feed

for the live chart.

This is why I had another folder created initially which is the socket that provides the data

feed for the candlesticks.

So, you can see that if you open the code you can see that it provides the light chart

for BTCUSDT 1 minute time frame and it is a straightforward code so I'm not going to

go through this code in this video but going to share this in the repository as well.

You can check it out and I am going to initiate this WebSocket from here.

That’s it.

The socket is initiated.

Now let's write the code.

Let’s close this and go back to our dynamic chart’s folder and in the index file, so,

here we’re going to add another step which is step 5.

Plug the socket to the chart.

Ok. that’s it.

Now I’m going to comment out this code because we are just going to display the live chart

and here we’re going to initiate initiate the socket from the client-side.

Now to do this to initiate a socket we need to have the socket related library included

in our code.

so go to the, so, go to this website and you can download this the latest version of the

library.

So, I'm going to copy this socket.io cdn and let's include that.

Perfect.

Now let’s write the code.

1st I’m going to create a variable called socket and we’re going to connect to the

socket that we just initiated which is the local host 127.0.0.1: it’s running on 4000

port.

That’s it and then the data is streamed on Kline message.

So, we have to listen to that message.

So, socket.on Kline then we pass a function.

We’re going to say PL, for now, let’s just log this data on this console and see

how the response is.

so, Let’s save this and let’s open this page.

If you go to the console, you can see that, let’s clear everything, you can see that

the data is getting streamed like every second.

So, the data is in the format that we want.

All we need to do is just plugin it to the chart.

So’ let’s do that.

So I'm going to comment out this code and in order to connect the data feed to the chart,

we can do it in one single step which is candlestick series candle series.

We need to invoke a function called update.

Ok. and just pass in the payload as it is.

That’s it.

Now, if I restart the page, the chart should work.

Just going to close this.

Ok. it doesn't have any history yet.

But you can see that the candle works perfectly fine.

I’m just going to let it run for a few minutes and I'm going to fast forward the video.

So that you can see the new candles popping up.

Alright, you can see that the if we just let it run for a while, the new candles keep getting

plotted.

Alright.

In the final example, we’re going to combine the first two examples.

So’ We’ll have the historical data as well as the live data.

So, let’s do that.

I’m going to clone the dynamics charts folder because it’s going to be pretty similar’

I’ll call it with history.

All I need to do is just un-comment this code and just restart it.

That’s it.

So, here We’re going to set the historical data and here We’re going to pass the live

data.

So, both of them work in tandem.

So, let’s open the file in the browser and see how it looks.

It looks good but we have to make a small correction because you can see that the historical

data that we are getting is for Eth USDT. so, let’s change it to BTC because the live

feed is for BTC.

So, we have to make sure that the historical data also belongs to BTC and the candlestick

time frame is one minute.

So’ let’s refreshthe page now.

And ya so it works perfectly fine and if I just zoom in to the most recent candles and

just let’s just let it run.

You can see that it’s live, it keeps getting updated, and I’m going to change the titles

to static chart, dynamic chart and dynamic chart with history before I deploy the code

onto the GitHub.

That’s it for this video guys.

I hope you find it useful and the only downside is that you cannot have indicators but other

than that it’s pretty useful and the charts are just as good as trading view charts.

You don’t have to do any configuration.

You can see that we have just a few lines of code.

You can render the charts with your own data.

So.

ya.

Just leave your thoughts in the comment section.

Talk to you in the next video.