SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components
iOS Chart Oscilloscope Demo
// iOS Chart Examples
SciChart’s OpenGLES iOS Chart library ships with ~60 Objective-C and Swift 4 iOS Chart Examples which you can browse, play with, view the source-code and even export each iOS Objective-C / Swift Chart Example to a stand-alone XCode project. All of this is possible with the new and improved SciChart iOS Examples Suite, which ships as part of the SciChart iOS SDK.
Demonstrates the speed and power of SciChart iOS for drawing real-time scientific waveforms in this iOS Oscilloscope Demo App.
The SCIFastLineRenderableSeries can be used to render a high performance iOS Line Chart in either Swift or Objective C. SciChart iOS supports millions of points out of the box, and is suitable for use in real-time scientific, medical and trading applications.
// Source Code
The Swift 4 and Objective-C source code for the iOS Chart Oscilloscope Demo example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
- Clone the SciChart.iOS.Examples from Github.
- Or, view source and export each example to an XCode project from the Obj-C version of the SciChart iOS Examples app.
- Also the SciChart iOS Trial contains the full source for the examples (link below).
// OscilloscopeLayout.xib
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
<device id="retina5_9" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="OscilloscopeLayout">
<connections>
<outlet property="surface" destination="6r1-xc-i5L" id="5pm-d1-4Sy"/>
</connections>
</placeholder>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="2d5-Kn-Y7c">
<rect key="frame" x="100" y="52" width="38" height="38"/>
<constraints>
<constraint firstAttribute="width" constant="38" id="G06-6d-4Lr"/>
<constraint firstAttribute="height" constant="38" id="VFZ-ju-ncl"/>
</constraints>
<state key="normal" title="rotate" image="Rotate">
<color key="titleColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</state>
<connections>
<action selector="rotate:" destination="-1" eventType="touchUpInside" id="YBX-fB-cPe"/>
</connections>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="d63-VW-MSc">
<rect key="frame" x="54" y="52" width="38" height="38"/>
<constraints>
<constraint firstAttribute="width" constant="38" id="ECo-xw-ZaW"/>
<constraint firstAttribute="height" constant="38" id="uSL-6G-wpc"/>
</constraints>
<state key="normal" title="flipY" image="FlipVertically">
<color key="titleColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</state>
<connections>
<action selector="flipVertically:" destination="-1" eventType="touchUpInside" id="2Tn-Ou-fLE"/>
</connections>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="dSK-PA-229">
<rect key="frame" x="8" y="52" width="38" height="38"/>
<color key="backgroundColor" red="0.10980392156862745" green="0.10980392156862745" blue="0.10980392156862745" alpha="0.0" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="38" id="2kZ-gO-X3l"/>
<constraint firstAttribute="height" constant="38" id="fT1-pS-fyc"/>
</constraints>
<state key="normal" title="flipX" image="FlipHorizontally">
<color key="titleColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</state>
<connections>
<action selector="flipHorizontally:" destination="-1" eventType="touchUpInside" id="UeL-B4-ndd"/>
</connections>
</button>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="6r1-xc-i5L" customClass="SCIChartSurface">
<rect key="frame" x="0.0" y="98" width="375" height="680"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</view>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="uGi-Vk-rGb">
<rect key="frame" x="146" y="62" width="104" height="18"/>
<state key="normal" title=" change series " backgroundImage="I">
<color key="titleColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<integer key="value" value="5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
<connections>
<action selector="changeSeries:" destination="-1" eventType="touchUpInside" id="jM8-qt-llg"/>
</connections>
</button>
</subviews>
<color key="backgroundColor" red="0.10980392156862745" green="0.10980392156862745" blue="0.10980392156862745" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="6r1-xc-i5L" firstAttribute="bottom" secondItem="vUN-kp-3ea" secondAttribute="bottom" id="9c2-Vb-sxW"/>
<constraint firstItem="2d5-Kn-Y7c" firstAttribute="leading" secondItem="d63-VW-MSc" secondAttribute="trailing" constant="8" id="S7n-lI-oR3"/>
<constraint firstItem="6r1-xc-i5L" firstAttribute="top" secondItem="dSK-PA-229" secondAttribute="bottom" constant="8" id="T2l-VJ-dvY"/>
<constraint firstItem="dSK-PA-229" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" constant="8" id="X0E-27-FuG"/>
<constraint firstItem="dSK-PA-229" firstAttribute="leading" secondItem="vUN-kp-3ea" secondAttribute="leading" constant="8" id="g2h-bh-YIi"/>
<constraint firstItem="uGi-Vk-rGb" firstAttribute="centerY" secondItem="2d5-Kn-Y7c" secondAttribute="centerY" id="hIJ-SI-jHC"/>
<constraint firstItem="d63-VW-MSc" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" constant="8" id="hre-Zx-rCA"/>
<constraint firstItem="uGi-Vk-rGb" firstAttribute="leading" secondItem="2d5-Kn-Y7c" secondAttribute="trailing" constant="8" id="iLl-lI-SHI"/>
<constraint firstItem="6r1-xc-i5L" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="lQE-SU-ZlW"/>
<constraint firstItem="2d5-Kn-Y7c" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" constant="8" id="o0I-8t-F42"/>
<constraint firstItem="6r1-xc-i5L" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="tIK-J0-bhI"/>
<constraint firstItem="d63-VW-MSc" firstAttribute="leading" secondItem="dSK-PA-229" secondAttribute="trailing" constant="8" id="zA3-NM-ZKe"/>
</constraints>
<viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
</view>
</objects>
<resources>
<image name="FlipHorizontally" width="138" height="108"/>
<image name="FlipVertically" width="125" height="141"/>
<image name="I" width="16" height="16"/>
<image name="Rotate" width="162" height="167"/>
</resources>
</document>
// OscilloscopeChartView.m
//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2018. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// OscilloscopeChartView.m is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************
#import "OscilloscopeChartView.h"
#include "DataManager.h"
@implementation OscilloscopeChartView {
DataSourceEnum _selectedSource;
BOOL _isDigitalLine;
SCIXyDataSeries * _dataSeries1;
SCIXyDataSeries * _dataSeries2;
SCIFastLineRenderableSeries * _rSeries;
NSTimeInterval _lastTimeDraw;
CADisplayLink * _displayLink;
double _phase0;
double _phase1;
double _phaseIncrement;
id<SCIAxis2DProtocol> _xAxis;
id<SCIAxis2DProtocol> _yAxis;
}
- (void)commonInit {
__weak typeof(self) wSelf = self;
self.seriesTypeTouched = ^{ [wSelf changeSeriesType]; };
self.rotateTouched = ^{ [wSelf rotateChart]; };
self.flippedVerticallyTouched = ^{ [wSelf flipChartVertically]; };
self.flippedHorizontallyTouched = ^{ [wSelf flipChartHorizontally]; };
}
- (void)initExample {
_phaseIncrement = M_PI * 0.1;
_xAxis = [SCINumericAxis new];
_xAxis.autoRange = SCIAutoRange_Never;
_xAxis.axisTitle = @"Time (ms)";
_xAxis.visibleRange = [[SCIDoubleRange alloc] initWithMin:SCIGeneric(2.5) Max:SCIGeneric(4.5)];
_yAxis = [SCINumericAxis new];
_yAxis.autoRange = SCIAutoRange_Never;
_yAxis.axisTitle = @"Voltage (mV)";
_yAxis.visibleRange = [[SCIDoubleRange alloc] initWithMin:SCIGeneric(-12.5) Max:SCIGeneric(12.5)];
_dataSeries1 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double YType:SCIDataType_Double];
_dataSeries1.acceptUnsortedData = YES;
_dataSeries2 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double YType:SCIDataType_Double];
_dataSeries2.acceptUnsortedData = YES;
_rSeries = [SCIFastLineRenderableSeries new];
_rSeries.isDigitalLine = _isDigitalLine;
[self.surface.xAxes add:_xAxis];
[self.surface.yAxes add:_yAxis];
[self.surface.renderableSeries add:_rSeries];
[SCIThemeManager applyDefaultThemeToThemeable:self.surface];
}
- (void)updateOscilloscopeData:(CADisplayLink*)displayLink {
_lastTimeDraw = _displayLink.timestamp;
DoubleSeries * doubleSeries = [DoubleSeries new];
if (_selectedSource == Lissajous) {
[DataManager setLissajousCurve:doubleSeries alpha:0.12 beta:_phase1 delta:_phase0 count:2500];
[_dataSeries1 clear];
[_dataSeries1 appendRangeX:doubleSeries.xValues Y:doubleSeries.yValues Count:doubleSeries.size];
_rSeries.dataSeries = _dataSeries1;
} else {
[DataManager setFourierSeries:doubleSeries amplitude:2.0 phaseShift:_phase0 count:1000];
[_dataSeries2 clear];
[_dataSeries2 appendRangeX:doubleSeries.xValues Y:doubleSeries.yValues Count:doubleSeries.size];
_rSeries.dataSeries = _dataSeries2;
}
_phase0 += _phaseIncrement;
_phase1 += _phaseIncrement * 0.005;
}
- (void)changeSeriesType {
UIAlertController * alertController = [UIAlertController alertControllerWithTitle:@"Data Source" message:@"Select data source or make the line Digital" preferredStyle:UIAlertControllerStyleActionSheet];
UIAlertAction * action = [UIAlertAction actionWithTitle:@"Fourier" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) {
_selectedSource = FourierSeries;
[self.surface.xAxes itemAt:0].visibleRange = [[SCIDoubleRange alloc]initWithMin:SCIGeneric(2.5) Max:SCIGeneric(4.5)];
[self.surface.yAxes itemAt:0].visibleRange = [[SCIDoubleRange alloc]initWithMin:SCIGeneric(-12.5) Max:SCIGeneric(12.5)];
}];
[alertController addAction:action];
action = [UIAlertAction actionWithTitle:@"Lisajous" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) {
_selectedSource = Lissajous;
[self.surface.xAxes itemAt:0].visibleRange = [[SCIDoubleRange alloc]initWithMin:SCIGeneric(-1.2) Max:SCIGeneric(1.2)];
[self.surface.yAxes itemAt:0].visibleRange = [[SCIDoubleRange alloc]initWithMin:SCIGeneric(-1.2) Max:SCIGeneric(1.2)];
}];
[alertController addAction:action];
action = [UIAlertAction actionWithTitle:@"Make line Digital" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) {
_isDigitalLine = !_isDigitalLine;
_rSeries.isDigitalLine = _isDigitalLine;
}];
[alertController addAction:action];
UIViewController * topVC = UIApplication.sharedApplication.delegate.window.rootViewController;
while (topVC.presentedViewController) {
topVC = topVC.presentedViewController;
}
[topVC presentViewController:alertController animated:YES completion:nil];
}
- (void)rotateChart {
int xAlignment = self.surface.xAxes[0].axisAlignment;
if (++xAlignment > 4) {
xAlignment = 1;
}
self.surface.xAxes[0].axisAlignment = (SCIAxisAlignment)xAlignment;
int yAlignment = self.surface.yAxes[0].axisAlignment;
if (++yAlignment > 4) {
yAlignment = 1;
}
self.surface.yAxes[0].axisAlignment = (SCIAxisAlignment)yAlignment;
}
- (void)flipChartVertically {
BOOL flip = self.surface.yAxes[0].flipCoordinates;
self.surface.yAxes[0].flipCoordinates = !flip;
}
- (void)flipChartHorizontally {
BOOL flip = self.surface.xAxes[0].flipCoordinates;
self.surface.xAxes[0].flipCoordinates = !flip;
}
- (void)willMoveToWindow:(UIWindow *)newWindow {
[super willMoveToWindow: newWindow];
if(_displayLink == nil) {
_lastTimeDraw = 0.0;
_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateOscilloscopeData:)];
[_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
} else {
[_displayLink invalidate];
_displayLink = nil;
}
}
@end
// OscilloscopeChartView.swift
//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2018. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// OscilloscopeChartView.swift is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************
enum DataSource {
case Fourier
case Lisajous
}
class OscilloscopeChartView: OscilloscopeLayout {
var _selectedSource: DataSource = .Fourier
var _isDigitalLine = false
let _dataSeries1 = SCIXyDataSeries(xType: .double, yType: .double)
let _dataSeries2 = SCIXyDataSeries(xType: .double, yType: .double)
let _rSeries = SCIFastLineRenderableSeries()
var _lastTimeDraw: TimeInterval = 0
var _displayLink: CADisplayLink!
var _phase0 = 0.0
var _phase1 = 0.0
var _phaseIncrement = .pi * 0.1
var _xAxis: SCINumericAxis!
var _yAxis: SCINumericAxis!
override func commonInit() {
weak var wSelf = self;
self.seriesTypeTouched = { wSelf?.changeSeriesType() }
self.rotateTouched = { wSelf?.rotateChart() }
self.flippedVerticallyTouched = { wSelf?.flipChartVertically() }
self.flippedHorizontallyTouched = { wSelf?.flipChartHorizontally() }
}
override func initExample() {
_xAxis = SCINumericAxis()
_yAxis = SCINumericAxis()
_xAxis.autoRange = .never
_xAxis.axisTitle = "Time (ms)"
_xAxis.visibleRange = SCIDoubleRange(min: SCIGeneric(2.5), max: SCIGeneric(4.5))
_yAxis.autoRange = .never
_yAxis.axisTitle = "Voltage (mV)"
_yAxis.visibleRange = SCIDoubleRange(min: SCIGeneric(-12.5), max: SCIGeneric(12.5))
_dataSeries1.acceptUnsortedData = true
_dataSeries2.acceptUnsortedData = true
_rSeries.isDigitalLine = _isDigitalLine
surface.xAxes.add(_xAxis)
surface.yAxes.add(_yAxis)
surface.renderableSeries.add(_rSeries)
SCIThemeManager.applyDefaultTheme(toThemeable: surface)
}
@objc fileprivate func updateOscilloscopeData(_ displayLink: CADisplayLink) {
_lastTimeDraw = _displayLink.timestamp
let doubleSeries = DoubleSeries()
if (_selectedSource == .Lisajous) {
DataManager.setLissajousCurve(doubleSeries, alpha: 0.12, beta: _phase1, delta: _phase0, count: 2500)
_dataSeries1.clear()
_dataSeries1.appendRangeX(doubleSeries.xValues, y: doubleSeries.yValues, count: doubleSeries.size)
_rSeries.dataSeries = _dataSeries1
} else {
DataManager.setFourierSeries(doubleSeries, amplitude: 2.0, phaseShift: _phase0, count: 1000)
_dataSeries2.clear()
_dataSeries2.appendRangeX(doubleSeries.xValues, y: doubleSeries.yValues, count: doubleSeries.size)
_rSeries.dataSeries = _dataSeries2
}
_phase0 += _phaseIncrement
_phase1 += _phaseIncrement * 0.005
}
fileprivate func changeSeriesType() {
let alertController = UIAlertController(title: "Data Source", message: "Select data source or make the line Digital", preferredStyle: .actionSheet)
alertController.addAction(UIAlertAction(title: "Fourier", style: .default, handler: {[unowned self] (action: UIAlertAction) -> Void in
self._selectedSource = .Fourier
self.surface.xAxes[0].visibleRange = SCIDoubleRange(min: SCIGeneric(2.5), max: SCIGeneric(4.5))
self.surface.yAxes[0].visibleRange = SCIDoubleRange(min: SCIGeneric(-12.5), max: SCIGeneric(12.5))
}))
alertController.addAction(UIAlertAction(title: "Lisajous", style: .default, handler: {[unowned self] (action: UIAlertAction) -> Void in
self._selectedSource = .Lisajous
self.surface.xAxes[0].visibleRange = SCIDoubleRange(min: SCIGeneric(-1.2), max: SCIGeneric(1.2))
self.surface.yAxes[0].visibleRange = SCIDoubleRange(min: SCIGeneric(-1.2), max: SCIGeneric(1.2))
}))
alertController.addAction(UIAlertAction(title: "Make line Digital", style: .default, handler: {[unowned self] (action: UIAlertAction) -> Void in
self._isDigitalLine = !self._isDigitalLine
self._rSeries.isDigitalLine = self._isDigitalLine
}))
var topVC = UIApplication.shared.delegate?.window??.rootViewController
while ((topVC?.presentedViewController) != nil) {
topVC = topVC?.presentedViewController
}
topVC?.present(alertController, animated: true, completion: nil)
}
fileprivate func rotateChart() {
var xAlignment: Int = Int(surface.xAxes[0].axisAlignment.rawValue)
xAlignment += 1
if (xAlignment > 4) {
xAlignment = 1;
}
surface.xAxes[0].axisAlignment = SCIAxisAlignment(rawValue: Int32(xAlignment))!
var yAlignment: Int = Int(surface.yAxes[0].axisAlignment.rawValue)
yAlignment += 1
if (yAlignment > 4) {
yAlignment = 1;
}
surface.yAxes[0].axisAlignment = SCIAxisAlignment(rawValue: Int32(yAlignment))!
}
func flipChartVertically() {
let flip = surface.yAxes[0].flipCoordinates
surface.yAxes[0].flipCoordinates = !flip
}
func flipChartHorizontally() {
let flip = surface.xAxes[0].flipCoordinates
surface.xAxes[0].flipCoordinates = !flip
}
override func willMove(toWindow newWindow: UIWindow?) {
super.willMove(toWindow: newWindow)
if(_displayLink == nil) {
_lastTimeDraw = 0.0
_displayLink = CADisplayLink.init(target: self, selector: #selector(updateOscilloscopeData))
_displayLink.add(to: RunLoop.main, forMode: .defaultRunLoopMode)
} else {
_displayLink.invalidate()
_displayLink = nil;
}
}
}