Blog

Back to Blog

Advanced Charting for iOS – Part 2 Smoothing

Posted on 31 May 2016 Written by Stuart Grey

Introduction

The shinobicharts Advanced Charting Kit is designed to supplement our native iOS & Android charts performance with a broader feature set, extending the inherent functionality. In this series, we’ll examine the features on offer and the benefits they can bring to your apps.

The Advanced Charting Kit is included in the trial download and also available for download in the customer portal.

In Part 2, smoothing is the focus and we’ll see how it can help with extracting trends from data sets. Following on from Part 1 Sampling, we’ll be continuing our process of extracting meaningful data from large data sets.

The data set

Previously (in part 1), we used sampling to reduce our dataset of 33,000 heart rate datapoints into a representative subset.

advanced-charting-sampling-nth-point-overlay

We’ll now take this representative subset as a base for further analysis. We want to extract trends that may be useful to a runner analysing their effort.

Following trends

A great way to highlight trends is to consider how we interpolate (guess!) about those datapoints that are between the known datapoints. In it’s most basic form, a line series makes a straight line transition from known datapoint to known datapoint, a very naive approach. The smoothing algorithms, provided by the Advanced Charting Kit, interpolate between points using different functions. They can take into account more than just the immediate datapoints to build up a better picture of the way the data is transitioning.

It’s very easy to configure a smoother on a series. The single line of code is shown below each image and in our example here. In the charts below, we show the relevant smoother applied with a range of settings where index is simply the series index.

advanced-charting-smoothing-midpoint

lineSeries.dataSmoother = ACKMidPointSmoother(numberOfPasses: index+1)

advanced-charting-smoothing-bezier

lineSeries.dataSmoother = ACKCatmullRomSplineSmoother(numberOfSegments: index+1)

Which smoothing algorithm to use?

As you can see from the images, the algorithms produce very different results.

The midpoint smoother takes into account previous points to make sure it isn’t overreacting to high frequency changes. It’s happy to miss out passing exactly through a known datapoint if it believes it is too far from the trend.

In contrast, the spline algorithm will treat each known datapoint as absolute and always pass through it. A curved approach is engineered to do this.

For our heartrate data, we’re interested in the trend over time and our datapoints are not necessarily absolute. They are valid readings, but due to the fluctuations that can occur, we’re interested in the trend over many points not one single item.

For this reason we’ll choose to add a midpoint smoother to our sampled data. Some trial and error shows us that using two passes provides us with a good balance between removing clutter and keeping key artefacts.

Conclusion

advanced-charting-smoothing-midpoint-overlay

As a runner, the key trends are now becoming very clear. Why couldn’t I keep my heart rate up midrun? Was I tired? Had I eaten enough? This level of analysis was our aim for this particular chart, and adding sampling has furthered our progress towards this goal. It’s important to note that there are many potential uses for one data set and different processing may best suit those applications.

Just as with sampling, our smoother was configured using a single line of code. It’s a powerful feature to have and highly configurable – it’s also looks pretty snazzy too!

Hopefully, you can see how this might help improve the in-app experience of your users – here is a link to the sampled code. Next we’ll look at the power styling has to convey additional and important contextual information

Back to Blog