Blog

Back to Blog

Displaying stock prices and data in an iOS App

Posted on 10 Feb 2016 Written by Stuart Grey

Whether it’s the time of year or an indication of the rise of mobile charting in the finance sector, we’ve had a lot of enquiries recently about the capabilities of shinobicontrols for supporting app development in this area. We’ve put together a quick demo app that covers the most frequently asked questions and we’ll slowly be dissecting it over the coming weeks as we explain some of what’s possible. In this post we’ll demonstrate real-time data streaming, indicators & overlays, and multiple axes. We’ll also use the Apple Pencil to annotate.

Let’s get started with a non-technical, high-level overview of what features are on offer in this demo.

A basic stock chart

To help us demonstrate what can be achieved we’ve put together a very basic stock chart app that displays, you’ve guessed it, the AAPL stock on an iPad Pro. Below is what we ended up with.

Real time streaming

We’ve kept it basic for now, with just a few key features. Keep an eye out for the video that’s coming soon – it will show many of these features in action

Price

Perhaps the most obvious stock chart feature here! We wouldn’t get very far without it, but we’ve added some advanced per point styling to the candlesticks, modifying their behavior depending on the data of the previous point.

stock-chart-point-styling

As you can see, we have hollow and filled candlesticks on show, with the chart having full control over the border and fill colors for every point individually.

Real-time streaming of new data

As you can see, this is daily market data stolen from one of our shinobicharts sample apps. But that won’t stop us from demonstrating how to stream in new data points every second. We’ve loaded in around 2 years worth of historical data initially, and then we’re adding a new day to the end every second. Of course, it’s not just as simple as streaming in the price, we need to also perform the calculations of any additional indicators such as the moving averages – but we’ll come to those later.

In this app, we wanted to demonstrate both the auto-scaling capability of the axes and of being able to pan freely while the streaming happens in the background. Here is how the chart looks when it first loads up.

stock-chart-streaming

In the bottom right corner, you’ll notice we’ve added an “auto” button and it is initially selected. This means that the chart is configured to show the last 60 days of data, along with a small gap on the righthand side to leave room for newly arriving data. The y-axis is also automatically scaling to accommodate the full range of price/study data over those 60 days. As new points arrive, the whole chart moves along scrolling to keep those last 60 days in view.

When the user wants to take a different view of the chart data, they can simply begin panning and zooming using natural gestures. The data continues to stream in every second, however the axes will no longer automatically scale and the user can smoothly pan and zoom as they please.

stock-chart-zoomed

Tapping the autoscale button takes us back to the original 60 day view with autoscaled axes.

Indicators and overlays

Supplementing our pricing data are a number of studies that help us understand what is happening to our stock price. These are calculated from the price data and we can add as many as we feel are necessary. The view is quite clear with just these two averages and the Bollinger Band, but the screenshot below highlights that we can instantly hide any of the additional series with a tap of the button on the right hand edge of the chart. Below, we’ve hidden the two averages and just left the band in place.

stock-chart-averages-hidden

Another important factor, that isn’t immediately apparent in the image, is the order that the series are displayed in. We’ve engineered the datasource of the chart to be fully configurable and changing the order in which these series are displayed will take seconds. What we’d expect here is to further enhance this feature by making the list of indicators and overlays order-able with a gesture from the user.

Multiple Axes

The final series displayed on the chart is Volume. Since the values here are unrelated to the price, we have created a second y-axis on the right hand side of the chart to display the values in millions.

stock-chart-volume

We didn’t want the grey columns representing the volume to overwhelm the rest of the chart, they are there to provide some context to the price data. You can see that we’ve scaled the axis to limit the data to the bottom quarter of the chart and are only displaying the relevant labels on the axis.

Annotations

Interpretation is the key to extracting value from stock data. We’ve helped out here with some averages and Bollinger Bands, but everyone has a different opinion of what works. That’s why this chart supports custom annotations created by the user as “notes”.

stock-chart-draw-mode

Tapping the “Draw” button freezes the current view and allows the user to create freehand notes. In these screenshots we’ve made use of the Apple Pencil for extra fidelity when writing on the screen.

stock-chart-annotation-freehand

Once we’ve made our note, and exited Draw mode, the annotation is pinned in place and remains with our data as we pan and zoom. You can see it here towards the right hand edge of the chart.

stock-chart-annotation-zooming

 

Further resources

Hopefully, this brief example has given you some insight into the capabilities of shinobicharts to display stock data and be part of a powerful analysis tool within an iOS or Android App.

We’ll have more on this topic soon, but for more advice on mobile charting check out our latest white paper  – Charting in Mobile Apps; Style and Substance in mobile retail banking.

Download White Paper

Back to Blog