Demonstrates how to create a real-time iOS Heatmap using SciChart. See Documentation on how to use this type here: The iOS Heatmap Chart Documentation.

iOS Heatmap Charts can be used to visualise a variety of scientific and statistical data. Display a real-time spectrogram (Fourier Transform plus Time) of audio data. To overlay areas of heat on a background image such as a map or image, or to quickly bring to life 2-dimensional data and show the relative intensities via the heat color.

The SCIFastUniformHeatmapRenderableSeries expects a 2D Array of data in the form of a SCIUniformHeatmapDataSeries and has a user-defined colour map which can be displayed as a legend over the chart.

In this example you can tap and drag on the chart to see the animated-zoom performance while the heatmap is updating.

// HeatmapChartView.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// HeatmapChartView.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 "HeatmapChartView.h"
#import "SCDDataManager.h"

const int HEIGHT = 200;
const int WIDTH = 300;
const int SERIES_PER_PERIOD = 30;
const float TIME_INTERVAL = 0.04;

@implementation HeatmapChartView {
    SCIUniformHeatmapDataSeries *_dataSeries;
    int _timerIndex;
    NSTimer * timer;
    BOOL _running;
    NSMutableArray<SCIDoubleValues *> *_valuesArray;
}

- (void)willMoveToWindow:(UIWindow *)newWindow {
    [super willMoveToWindow: newWindow];
    if(timer == nil) {
        timer = [NSTimer scheduledTimerWithTimeInterval:TIME_INTERVAL target:self selector:@selector(updateHeatmapData:) userInfo:nil repeats:YES];
    } else {
        [timer invalidate];
        timer = nil;
    }
}

- (void)initExample {
    id<ISCIAxis> xAxis = [SCINumericAxis new];
    id<ISCIAxis> yAxis = [SCINumericAxis new];
    
    _dataSeries = [[SCIUniformHeatmapDataSeries alloc] initWithXType:SCIDataType_Int yType:SCIDataType_Int zType:SCIDataType_Double xSize:WIDTH ySize:HEIGHT];
    
    NSArray<UIColor *> *colors = @[[UIColor fromARGBColorCode:0xFF00008B], [UIColor fromARGBColorCode:0xFF6495ED], [UIColor fromARGBColorCode:0xFF006400], [UIColor fromARGBColorCode:0xFF7FFF00], UIColor.yellowColor, UIColor.redColor];
    
    SCIFastUniformHeatmapRenderableSeries *heatmapRenderableSeries = [SCIFastUniformHeatmapRenderableSeries new];
    heatmapRenderableSeries.dataSeries = _dataSeries;
    heatmapRenderableSeries.minimum = 0;
    heatmapRenderableSeries.maximum = 200;
    heatmapRenderableSeries.colorMap = [[SCIColorMap alloc] initWithColors:colors andStops:@[@0.0, @0.2, @0.4, @0.6, @0.8, @1.0]];
    
    _valuesArray = [NSMutableArray<SCIDoubleValues *> new];
    for (int i = 0; i < SERIES_PER_PERIOD; i++) {
        [_valuesArray addObject:[self createValues:i]];
    }
    
    self.heatmapColourMap.minimum = heatmapRenderableSeries.minimum;
    self.heatmapColourMap.maximum = heatmapRenderableSeries.maximum;
    self.heatmapColourMap.colourMap = heatmapRenderableSeries.colorMap;
    
    [self.surface.xAxes add:xAxis];
    [self.surface.yAxes add:yAxis];
    [self.surface.renderableSeries add:heatmapRenderableSeries];
    [self.surface.chartModifiers add:ExampleViewBase.createDefaultModifiers];
    [self.surface.chartModifiers add:[SCICursorModifier new]];
}

- (SCIDoubleValues *)createValues:(int)index {
    SCIDoubleValues *values = [[SCIDoubleValues alloc] initWithCapacity:WIDTH * HEIGHT];
    
    double angle = M_PI * 2.0 * index / SERIES_PER_PERIOD;
    double cx = 150;
    double cy = 100;
    for (int x = 0; x < WIDTH; x++) {
        for (int y = 0; y < HEIGHT; y++) {
            double v = (1 + sin(x * 0.04 + angle)) * 50 + (1 + sin(y * 0.1 + angle)) * 50 * (1 + sin(angle * 2));
            double r = sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
            double exp = MAX(0, 1 - r * 0.008);
            
            [values add:v * exp + arc4random_uniform(50)];
        }
    }
    
    return values;
}

- (void)updateHeatmapData:(NSTimer *)timer {
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        SCIDoubleValues *values = _valuesArray[_timerIndex % SERIES_PER_PERIOD];
        [_dataSeries updateZValues:values];
        
        _timerIndex++;
    }];
}

@end

// HeatmapChartLayout.xib

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14868" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina5_9" orientation="landscape" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14824"/>
        <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="HeatmapChartLayout">
            <connections>
                <outlet property="heatmapColourMap" destination="0H6-mE-MmH" id="T53-Nd-cYE"/>
                <outlet property="surface" destination="w1P-AI-jrE" id="Cba-Ae-BjW"/>
            </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="812" height="375"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <view contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="w1P-AI-jrE" userLabel="Chart Surface" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="0.0" width="812" height="354"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0H6-mE-MmH" customClass="SCIChartHeatmapColourMap">
                    <rect key="frame" x="8" y="8" width="100" height="318"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                    <constraints>
                        <constraint firstAttribute="width" constant="100" id="wqU-ur-Y2R"/>
                    </constraints>
                </view>
            </subviews>
            <color key="backgroundColor" red="0.10980392156862745" green="0.10980392156862745" blue="0.10980392156862745" alpha="1" colorSpace="calibratedRGB"/>
            <constraints>
                <constraint firstItem="w1P-AI-jrE" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="22t-eN-0Qp"/>
                <constraint firstItem="0H6-mE-MmH" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="8" id="HES-Rf-kCJ"/>
                <constraint firstItem="0H6-mE-MmH" firstAttribute="bottom" secondItem="vUN-kp-3ea" secondAttribute="bottom" constant="-28" id="WRT-1I-Hn9"/>
                <constraint firstItem="w1P-AI-jrE" firstAttribute="bottom" secondItem="vUN-kp-3ea" secondAttribute="bottom" id="b50-g4-mmW"/>
                <constraint firstItem="w1P-AI-jrE" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="bR4-7k-rhV"/>
                <constraint firstItem="w1P-AI-jrE" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" id="fSk-Sj-uC4"/>
                <constraint firstItem="0H6-mE-MmH" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" constant="8" id="qzi-vv-eyU"/>
            </constraints>
            <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
            <point key="canvasLocation" x="-67" y="127"/>
        </view>
    </objects>
</document>

// HeatmapChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// HeatmapChartView.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.
//******************************************************************************

class HeatmapChartView: HeatmapChartLayout {
    
    static let height: Int = 200
    static let width: Int = 300
    let seriesPerPeriod = 30
    let timeInterval = 0.04
    
    var _dataSeries = SCIUniformHeatmapDataSeries(xType: .int, yType: .int, zType: .double, xSize: width, ySize: height)
    var _timerIndex: Int = 0
    var timer: Timer!
    var _running: Bool = false
    var _valuesArray = [SCIDoubleValues]()
    
    override func willMove(toSuperview newSuperview: UIView?) {
        super.willMove(toSuperview: newSuperview)
        if timer == nil {
            timer = Timer.scheduledTimer(timeInterval: timeInterval, target: self, selector: #selector(updateHeatmapData), userInfo: nil, repeats: true)
        }
    }
    
    override func removeFromSuperview() {
        super.removeFromSuperview()
        if timer != nil {
            timer.invalidate()
            timer = nil
        }
    }
    
    override func initExample() {
        let xAxis = SCINumericAxis()
        let yAxis = SCINumericAxis()

        let colors = [UIColor.fromARGBColorCode(0xFF00008B)!, UIColor.fromARGBColorCode(0xFF6495ED)!, UIColor.fromARGBColorCode(0xFF006400)!, UIColor.fromARGBColorCode(0xFF7FFF00)!, UIColor.yellow, UIColor.red]
        
        let heatmapRenderableSeries = SCIFastUniformHeatmapRenderableSeries()
        heatmapRenderableSeries.dataSeries = _dataSeries
        heatmapRenderableSeries.minimum = 0.0
        heatmapRenderableSeries.maximum = 200.0
        heatmapRenderableSeries.colorMap = SCIColorMap(colors: colors, andStops: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0])
        
        for i in 0..<seriesPerPeriod {
            _valuesArray.append(createValues(index: i))
        }
        
        heatmapColourMap.minimum = heatmapRenderableSeries.minimum
        heatmapColourMap.maximum = heatmapRenderableSeries.maximum
        heatmapColourMap.colourMap = heatmapRenderableSeries.colorMap
        
        surface.xAxes.add(xAxis)
        surface.yAxes.add(yAxis)
        surface.renderableSeries.add(heatmapRenderableSeries)
        surface.chartModifiers.add(ExampleViewBase.createDefaultModifiers())
        surface.chartModifiers.add(SCICursorModifier())
    }
    
    fileprivate func createValues(index: Int) -> SCIDoubleValues! {
        let values = SCIDoubleValues(capacity: HeatmapChartView.width * HeatmapChartView.height)
        
        let angle = .pi * 2.0 * Double(index) / Double(seriesPerPeriod)
        let cx = 150.0
        let cy = 100.0
        
        for x in 0..<HeatmapChartView.width {
            for y in 0..<HeatmapChartView.height {
                let v = (1 + sin(Double(x) * 0.04 + angle)) * 50 + (1 + sin(Double(y) * 0.1 + angle)) * 50 * (1 + sin(angle * 2))
                let r = sqrt((Double(x) - cx) * (Double(x) - cx) + (Double(y) - cy) * (Double(y) - cy))
                let exp = max(0, 1 - r * 0.008)
                
                values.add(v * exp + Double(arc4random_uniform(50)))
            }
        }
        
        return values;
    }
    
    @objc func updateHeatmapData() {
        SCIUpdateSuspender.usingWith(surface) {
            let values = self._valuesArray[self._timerIndex % self.seriesPerPeriod]
            self._dataSeries.update(z: values)
            self._timerIndex += 1
        }
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES