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-2018. 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 <SciChart/SciChart.h>
#import "HeatmapChartView.h"
#import "DataManager.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;
    SCIGenericType * data;
}

- (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 {
    self.surface.leftAxisAreaForcedSize = 0.0;
    self.surface.topAxisAreaForcedSize = 0.0;
    
    id<SCIAxis2DProtocol> xAxis = [SCINumericAxis new];
    id<SCIAxis2DProtocol> yAxis = [SCINumericAxis new];
    
    _dataSeries = [[SCIUniformHeatmapDataSeries alloc] initWithTypeX:SCIDataType_Int32 Y:SCIDataType_Int32 Z:SCIDataType_Double SizeX:WIDTH Y:HEIGHT StartX:SCIGeneric(0.0) StepX:SCIGeneric(1.0) StartY:SCIGeneric(0.0) StepY:SCIGeneric(1.0)];
    
    float gradientCoord[] = {0.f, 0.2f, 0.4f, 0.6f, 0.8f, 1.f};
    uint gradientColor[] = {0xFF00008B, 0xFF6495ED, 0xFF006400, 0xFF7FFF00, 0xFFFFFF00, 0xFFFF0000};
    
    SCIFastUniformHeatmapRenderableSeries * heatmapRenderableSeries = [SCIFastUniformHeatmapRenderableSeries new];
    heatmapRenderableSeries.minimum = 0;
    heatmapRenderableSeries.maximum = 200;
    heatmapRenderableSeries.colorMap = [[SCITextureOpenGL alloc] initWithGradientCoords:gradientCoord Colors:gradientColor Count:6];
    heatmapRenderableSeries.dataSeries = _dataSeries;
    
    [self createData];
    
    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 = [[SCIChartModifierCollection alloc] initWithChildModifiers:@[[SCIPinchZoomModifier new], [SCIZoomExtentsModifier new], [SCICursorModifier new]]];
}

- (void)createData {
    data = malloc(sizeof(SCIGenericType) * 60);
    
    for (int i = 0; i < SERIES_PER_PERIOD ; i++) {
        double angle = M_PI * 2.0 * i / SERIES_PER_PERIOD;
        double * zValues = malloc(sizeof(double) * WIDTH * HEIGHT);
        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);
                
                zValues[x * HEIGHT + y] = v * exp + arc4random_uniform(50);
            }
        }
        data[i] = SCIGeneric(zValues);
    }
    [_dataSeries updateZValues:data[0] Size:WIDTH*HEIGHT];
}

- (void)updateHeatmapData:(NSTimer *)timer {
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        [_dataSeries updateZValues:data[_timerIndex % SERIES_PER_PERIOD] Size:WIDTH * HEIGHT];
        
        _timerIndex++;
    }];
}

@end

// HeatmapChartLayout.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="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="375" height="812"/>
            <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="44" width="375" height="734"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="0H6-mE-MmH" customClass="SCIChartHeatmapColourMap">
                    <rect key="frame" x="10" y="54" width="100" height="684"/>
                    <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="vUN-kp-3ea" secondAttribute="leading" constant="10" id="HES-Rf-kCJ"/>
                <constraint firstItem="vUN-kp-3ea" firstAttribute="bottom" secondItem="0H6-mE-MmH" secondAttribute="bottom" constant="40" 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="10" 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-2018. 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 {
    
    let height: Int32 = 200
    let width: Int32 = 300
    let seriesPerPeriod = 30
    let timeInterval = 0.04
    
    var _dataSeries : SCIUniformHeatmapDataSeries!
    var _timerIndex: Int = 0
    var timer: Timer!
    var _running: Bool = false
    var data = [SCIGenericType]()
    
    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() {
        surface.leftAxisAreaForcedSize = 0.0;
        surface.topAxisAreaForcedSize = 0.0;
        
        let xAxis = SCINumericAxis()
        let yAxis = SCINumericAxis()
        
        _dataSeries = SCIUniformHeatmapDataSeries(typeX: .int32, y: .int32, z: .double, sizeX: width, y: height, startX: SCIGeneric(0.0), stepX: SCIGeneric(1.0), startY: SCIGeneric(0.0), stepY: SCIGeneric(1.0))

        let countColors = 6
        let gradientCoord = UnsafeMutablePointer<Float>.allocate(capacity: countColors)
        gradientCoord[0] = 0.0
        gradientCoord[1] = 0.2
        gradientCoord[2] = 0.4
        gradientCoord[3] = 0.6
        gradientCoord[4] = 0.8
        gradientCoord[5] = 1.0
        
        let gradientColor = UnsafeMutablePointer<uint>.allocate(capacity: 6)
        gradientColor[0] = 0xFF00008B;
        gradientColor[1] = 0xFF6495ED;
        gradientColor[2] = 0xFF006400;
        gradientColor[3] = 0xFF7FFF00;
        gradientColor[4] = 0xFFFFFF00;
        gradientColor[5] = 0xFFFF0000;
        
        let heatmapRenderableSeries = SCIFastUniformHeatmapRenderableSeries()
        heatmapRenderableSeries.minimum = 0.0
        heatmapRenderableSeries.maximum = 200.0
        heatmapRenderableSeries.colorMap = SCITextureOpenGL(gradientCoords: gradientCoord, colors: gradientColor, count: 6)
        heatmapRenderableSeries.dataSeries = _dataSeries
        
        createData()
        
        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 = SCIChartModifierCollection(childModifiers: [SCIPinchZoomModifier(), SCIZoomExtentsModifier(), SCICursorModifier()])
    }
    
    
    fileprivate func createData() {
        for i in 0..<seriesPerPeriod {
            let angle = .pi * 2.0 * Double(i) / Double(seriesPerPeriod)
            let zValues = UnsafeMutablePointer<Double>.allocate(capacity: Int(width * height))
            let cx = 150.0
            let cy = 100.0
            
            for x in 0..<width {
                for y in 0..<height {
                    let v = (1 + sin(Double(x) * 0.04 + angle)) * 50 + (1 + sin(Double(y) * 0 + 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)
            
                    zValues[Int(x * height + y)] = v * exp + Double(arc4random_uniform(50))
                }
            }
            data.append(SCIGeneric(zValues))
        }
        _dataSeries.updateZValues(data[0], size: Int32(height * width))
    }
    
    @objc func updateHeatmapData() {
        SCIUpdateSuspender.usingWithSuspendable(surface, with: {
            self._dataSeries.updateZValues(self.data[self._timerIndex % self.seriesPerPeriod], size: Int32(self.height * self.width))
            
            self._timerIndex += 1
        })
    }
  
}

< BACK TO ALL IOS CHART CHART EXAMPLES