The moving average is a calculation to analyze data by creating a series of averages (from subsets ) of it.

Especially in finance, the moving average is used a lot to give buy or sell signals for stocks.

Let's take a look at it and implement it in JavaScript!

The Moving Average (MA)

As you've already read, the moving average is a method to analyze data.

It is, more specifically, usually used to identify trends, especially in finance, but you can also apply it to house prices, or else.

The moving average is calculated over a specific time-span which is customizable to your liking. You can calculate it for 10 days, 20 days, etc.

Common intervals are

- 10
- 20
- 50
- 100
- 200

with a variable unit (minutes, hours, days, etc.).

There are also multiple types of moving averages:

- Simple Moving Average (SMA)
- Exponential Moving Average (EMA)
- Smoothed Moving Average (SMMA)
- Linear Weighted Moving Average (LWMA)

that, starting from only calculating an average over a specific time-span ...

... also count in a weight, to pay more attention to recent prices, or chart movements.

All methods have one thing in common:
They are used to cut out noise from a time-series (prices, for example). Because many movements of the data points are often shortly negated after.

An MA basically flattens the curve a little and puts the focus on the overall trend, instead of individual movements.

We'll cover the simple and exponential moving average here.

Example Scenario and Setup

I'll use Excel to first show you the math and to explain the method to you in more detail before we'll go into the implementation.

Our scenario includes a look at the closing prices of company ABC.

That closing price is the price ...

... that a stock has when the exchange closes for the day. It's often used in finance, as it basically is the result of all trade that went on that day.

But you could also work with the daily highs or lows, as you like, MA doesn't care about which value you use, ...

... as long as you use it persistently.

It doesn't make much sense to use the closing price for day one, but then the daily high, and then the closing price again, etc. This could lead to some very wrong signals in your analysis!

The Simple Moving Average (SMA)

As this name already suggests, the SMA is a simple form of an MA. To be precise, it is the simplest form of an MA that you can calculate.

You can see the formula for it below.

The first thing to do is to choose a window, e.g. 5 days.

You then start with the latest price, choose the n-1 (4 in this case) prior prices, and calculate an average for them.
Then, you go back one day and do the same again, basically creating an MA for every day.

Do this over and over again, until you have at least a few values.

There is, however, one thing you keep in mind:

If you have a window of w, you won't be able to calculate the SMA for the first w - 1 values, as there are not enough values in the history, already (see the image below).

E.g.: For 5 days, the first 4 days won't have an SMA.

When you're done, the SMAs can be interpreted. Either by some automatism or by you, looking at a chart, like the one you see below.

The blue line shows the closing prices of company ABC's stock. The red line shows the moving average.

Although the window is pretty short here, you can already see that some noise was filtered out. You could, by looking at the prices, tell that the trend went up, but the moving average makes this more clear.

If you calculate a 20-Day SMA, you can see that this one ...

... filters out even more noise and shows you the slight upward trend of the stock and even nearly negates the slight drop in the middle of the series.

The SMA is, however, not without issues.

There is one important rule in finance: History is often a bad forecaster.

And what this means is: Looking at the history of stock can usually state nothing about the future. Today's prices are only partially affected ...

... by yesterday's.

This doesn't mean that finance can't learn from history, but for stock prices, it's a different and difficult story.

As the SMA takes into account a lot of "older" prices, it mustn't be mistaken for a good forecast method.

Gladly, the younger the prices, the more we can trust them. And this is where the Exponential Moving Average (EMA) comes into the game.

The Exponential Moving Average (EMA)

The EMA gives more weight to recent prices. As that rule, you read above states: History is often a bad forecaster.

The more up-to-date a price is, the better it reflects the reality.

You can see the formula for it below.

You always need the EMA of the previous day which leads to a small problem. For the first day where you could calculate the EMA, you don't have one for the previous day.

This is why you calculate the SMA for the first day, and for the next, you calculate ...

... the EMA using the SMA of the previous day as EMAy.

With this knowledge at hand, you can calculate the EMAs for all days, except the first one where you use the SMA.

And all that can be plotted so you can analyze the stock of company ABC.

The difference between the 5-day SMA and EMA may not seem that much in this case, but still, the EMA reacts quicker to recent price changes and thus can also send you signals quicker to which you can react.

Implementing The SMA In JavaScript

Let's start with the simple moving average.

What we need is a function that takes an array of prices, and the window/period the moving average shall be calculated for. In the end, it should return an array containing the SMAs.

Calculating an SMA makes no sense when there is not enough or no data available at all, so a guard statement makes sense.

You then want to loop over the input array, calculating the SMA for window values each. The loop should start at the first index where that calculation is possible and take all previous values necessary.

E.g., If your window is 5, you want to calculate an avg from index 0 to 4.

And to make this function complete: Within that loop, calculate the average for the previous index - window elements.

Finally, push the result to an array and return this in the end.

Implementing The EMA In JavaScript

As you need the SMA as the first EMAy, it makes sense to make a small change to the function that calculates it first.

You can introduce a parameter that states how many values should be calculated, and that stops the loop when exceeded.

Like you already implemented for the SMA, it makes sense to implement a guard statement first, so you don't have to do unnecessary work when users pass in unfitting data.

The next part is the same as it already was for the SMA calculation. You need a loop to go over all values within the price array.

Now you can use the adjusted function for the SMA to get your first EMA value.

This is the first result, and also a value that you need to access within the loop for the very first calculation of the actual EMA.

To access the previous EMA on each iteration, you can make use of the result array that already contains everything you need. And by keeping a separate index that tracks the number of EMAs calculated, you can access the previous result within that array.

And that's it. That's the whole formula, you learned earlier in this thread, implemented in this function.

Call this function and you'll get an array containing the EMAs for the time series you pass in.

This can then be the base to plot a graph from, for further analysis.

The Code

You can find the full code of what was implemented here:

https://gist.github.com/excelbrium/596d3d56bf305f20de3f4d8d912aab89

Conclusion

A Moving Average is a good way to get a feeling about a trend for prices. It's relatively easy to calculate but still widely used, especially in finance.

It is, of course, not the only tool you should use, but one of the first ones, as it has such an impact.

Many (more professional) stock charts usually give you an option to show some form of MA to visually present trends to you and to help you to decide whether to buy, hold, or sell.

And especially for that last decision, there are some methods that include the MA, ...

... but we will talk about that in another thread.

I hope you enjoyed this read and learned a thing or two, and I'd be really happy if you gained something from it.

Thank you for reading, and don't hesitate to comment if you wish to!