Building a Seismograph App with CoreMotion, Swift and Telerik UI for iOS

Data visualizations are important, especially on small screen areas, where Excel files or other tables are difficult to read and comprehend. Visualizations are even more important when you add the various sensors that an iPhone device offers, not to mention the different certified third-party devices. Today, I will show you how you can set up the Telerik Chart for iOS to live-stream the data coming from the accelerometer sensor using the CoreMotion API.


The Chart will visualize the changes in phone acceleration in all three directions (X, Y or Z), depending on which direction the user has chosen. We will be gentle with the iPhone, I promise, so throwing the phone from the sixth floor to the ground is out of the question. We will also be able to start, stop or reset the Chart indications. All this we will do in both Swift and Objective-C.

Getting Acceleration Data Using Core Motion

Let’s start with utilizing what Core Motion gives us. To do that, we create an instance of the CMMotionManager and let it send its data to an NSOperationQueue. The time interval by which the manager will send data to the queue will be 0.2 seconds. From there, we get the measured data, and depending on the currently selected direction, we pass the appropriate value to the chart.

Note we are multiplying the measured data by some coefficient, in this case 1,000, so that we have nicely plotted data even for some serious shaking gestures.

Setting Up the Chart

This is an example of a chart with data that's dynamically added and changed. First, I should mention that for performance optimization purposes, the chart does not refresh its UI automatically when the data is changed. We should take care about that. Therefore, the code that you see below is executed on every occurrence of a new data point added to the Chart.

Now, let’s analyze the implementation of the buildChartWithPoint method in detail:

1. First, for the reasons I mentioned above, we should remove all data and annotations from the chart:
   
2. Further, we should create a new data point for the new value measure by the accelerometer. A Chart with too many points may be difficult to read, so we will stick with up to 25 points in the chart.
   
3. Now, we’ll create the YAxis. For the numeric values that we measure, the YAxis will be of type TKChartNumericAxis. And, because we want a nice, symmetrical Chart (symmetrical around the line where iPhone is in peace), we are going to place the XAxis in the middle of the Chart by setting the offset and baseline properties:
   
4. Let’s now set the series that will visualize the measured data. This series will be a line series of type TKChartLineSeries:
   
5. Based and the data-points we add, the Chart is smart enough to create a TKChartDateTimeAxis for us and set it as an XAxis. We are not really interested in the exact moment of time a measurement is shown, so let’s hide the ticks and the labels. For better visibility, the XAxis are black:
   
   
6. To beautify the chart and outline the critical vs. normal deviations from the still iPhone state, let’s add several line and band annotations. The band annotations are green, yellow and red, and the line annotations are set with a dash pattern:
   
   
7. Finally, let’s add the needle. It’s actually a custom annotation and it’s an example of the flexibility you can achieve with the annotations in TKChart. Note that we are adding the needle when there are more than one point. This is needed by TKChart to create appropriate data range, so that the needle can be displayed at the desired place:
   
   
   Here is the NeedleAnnotation implementation:
   
   

This is all you need to achieve a nice looking seismograph app. Of course, using the simulator will not allow you to simulate the device movement, so you will end up with a blank screen. The image at the beginning of this article was made with the help of a real device, and the new Mac OS X Yosemite’s QuickTime feature that allows you to cast your phone screen.

Feel free to get the Seismograph project from GitHub. Note that the project will require UI for iOS to be installed. Download UI for iOS here if you have not done so already.

Happy coding!