Calculating and showing stock indicators with Spark & AngularJS

Summary

In a previous post, I showed how simple is to calculate a SMA (Simple Moving Average) indicator from your list of stock quotations. Today, let´s see how can we modify the code to calculate multiple indicators at once (for the moment, I could not implement it using several different sliding windows at once).

Also, let´s introduce a quick prototype coded in AngularJS in order to show the different indicators in a chart with the possibility of switching stocks and windows sizes live. This is just a debug feature as our aim is to use the indicators in our future home-made analysis algorithm.

Note: If you don´t know what SMAs are, you should read this before.

Live example?

This is much easier to understand if you see an actual example running, but unfortunately I'm having problems injecting an iframe here that shows the content properly. Instead, you can clone the repository and run the application with the test files included in it:

git clone https://github.com/victor-ferrer/sparkker

Note: The application requires a Java 8 JRE installed in your machine. Also, the JAR file is rather heavy as Spring Boot adds an embedded Tomcat Server and all the Spark dependencies...

Here is a screenshot of the application that will be accessible at http://localhost:8988/#/indicators

Chart showing the upward trend followed by one stock.
The different lines are the indicators calculated on a 200 days window.

Changes in the Spark code

Basically the "main" program remains almost the same:


But, now instead of passing a Function that calculates the Simple Moving Average, I pass a function that calculates all the indicators and stores them in a map of class extending the StockQuotation class.
Therefore, I can just return those objects as result of the analysis (the original value + the indicators)


And we are ready to go with the client that consumes the results!

Client side with AngularJS and Angular Chart

On the client side, we will just have a single screen AngularJS application that uses AngularJS Chart as library for rendering charts. I won´t go too deep in details, but basically we have three components here:

• An AngularJS Controller

• An extremely simple HTML view

• The fields requested to build the chart (labels,series and data) are encapsulated in a POJO object being returned from the REST call done to the back end service. These objects are later automatically serialized to JSON.

What valuable information can we get about these indicators?

The real value does not, in my opinion, lays in showing them in graphs. Instead, each one of them are like "opinions" about where could the price of a stock go and, those opinions are the best input for an automatic stock analysis system.
Let´s examine this chart with some well known indicators:

What would be the consensus here? Buy or sell?

What any analysis system should do is sum up all those "opinions" and assess whether it would make sense to buy/sell certain stock.

If you check the graph, there are certain points in time we these basic recommendations would have guided us in the right directions. For instance, at the right of the chart, the "new lows" signal would have spared us a lot of pain (in case we were holding such stock in our portfolio).

After losing the SMA200 and making a new low, the price greatly decreased (see right part)

On the other hand, following the opposite strategy, would have given to us rather poor results (see the green "buy" arrows"), so the really difficult part here, is to determine which rules work for what stocks in what conditions. Really, really difficult.

However, from the software point of view, I think that this is an amazing topic to use for learning purposes!

So, what´s next? Let´s store this indicators and start building a rule engine that suggest actions on these indicators and a back-testing system that analyzes these suggestions on historical data.

Resources

• Chart JS configuration docs
• AngularJS Chart project page
• Sparkker source code on GitHub

Related articles

• How to calculate Simple Moving Averages with Spark MLLib