Ever wondered how those fancy trading charts are created?
Even if you never watched The Wolf Of Wall Street, surely everyone has come across a fancy looking trading chart or dashboard once in their life.
Depending on the case there can be several indicators on a trading chart — in some applications possibly up to tens of different lines, markers, highlighters, you name it.
If you ever wondered where these “indicators” come from — or you’re just curious — this might be an interesting read for you.
The basis of all trading charts is the “OHLC chart”, which is typically depicted with so-called “candlesticks”.
Each candlestick presents 4 values over a period of time — for example, a day in the stock-office. These values are:
- Opening price
- Highest price during the period
- Lowest price during the period
- Closing price
Now, since the stock markets are virtually open to anyone, one can make their own trading charts with real world data. This can be done very easily by relying on a trading-data broker. For this example, we’ll look how to get stock data from worldtradingdata.com in a JavaScript application.
In a world of web-services, getting your hands on the stock prices of real companies can be as simple as making a single GET-request.
fetch( https://www.worldtradingdata.com/api/v1/history?date_from=2018-09-05&symbol=AAPL&sort=asc&api_token=api-token )AAPL = Apple Inc.
An API token can be received for free from worldtradingdata.com.
The response for a valid request is a JavaScript object with Date, Open, High, Low, Close-values, as well as an additional “Volume”-value.
These can already be used to draw a trading chart at its simplest, showing the stock prices per day, as well as the price fluctuation each day. To add on this, let’s add an additional trading indicator on top of the OHLC.
Simple Moving Average (SMA) is a very traditional trading indicator, which helps define the direction of prices. SMA is calculated from the OHLC values, by averaging out the Close-values over an averaging frame. The formula for SMA is:
From the formula, we can see that to calculate the SMA of a given period, we must have previous values from up to n (length of averaging frame). This results in the fact that SMA lags behind the OHLC values.
As the last step, let’s look at how these two — OHLC and SMA — look when put into the same chart. Below is a visualization of the Apple Inc. stock data fetched as in the above example, using one of the many available web-charting-libraries.
Note, how the SMA line only starts after a couple of candlesticks, and how it clearly lags behind the OHLC values.
To recap what was done:
- Fetched trading data of real companies using a broker web-service.
- Calculated SMA indicator from the OHLC data.
- Visualized OHLC and SMA in the same chart using a charting library
Now, this is all very generic, as there are endless amounts of ways to achieve each of these steps, each with their own benefits. The point here was to dig into the truth behind the classical trading charts that traders still use to this very day.
If you want to learn about trading indicators, the most profound way surely is to create them yourself from scratch.
The writer is an employee at Arction Ltd., the provider for the charting library used in the example visualization.
