Generates an iOS bubble chart in code. See Documentation on how to use this type here: The iOS Bubble Chart Documentation.

iOS Bubble charts can be used to visualize multi-dimensional data on a 2D Chart, for example, using the Bubble size (Z property) and color can denote data of increasing importance or weight at an X-Y location.

The SCIFastBubbleRenderableSeries requires a SCIXyzDataSeries, which contains one Z-value per X-Y point. Bubble sizes can be scaled using the SCIBubbleSeriesStyle.zScaleFactor property.

// SyncMultipleChartsLayout.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="SyncMultipleChartsLayout">
            <connections>
                <outlet property="surface1" destination="nvq-Ns-OmJ" id="X5s-Jp-xTD"/>
                <outlet property="surface2" destination="mEt-Mg-5CN" id="8Iy-Kn-4eu"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="Ovw-Oq-BTf">
            <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" translatesAutoresizingMaskIntoConstraints="NO" id="iN0-l3-epB">
                    <rect key="frame" x="0.0" y="44" width="375" height="734"/>
                    <subviews>
                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="nvq-Ns-OmJ" customClass="SCIChartSurface">
                            <rect key="frame" x="0.0" y="0.0" width="375" height="367"/>
                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                        </view>
                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mEt-Mg-5CN" customClass="SCIChartSurface">
                            <rect key="frame" x="0.0" y="367" width="375" height="367"/>
                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                        </view>
                    </subviews>
                    <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                </stackView>
            </subviews>
            <color key="backgroundColor" red="0.10980392156862745" green="0.10980392156862745" blue="0.10980392156862745" alpha="1" colorSpace="calibratedRGB"/>
            <constraints>
                <constraint firstItem="iN0-l3-epB" firstAttribute="bottom" secondItem="PHR-FG-h5y" secondAttribute="bottom" id="MvV-eq-qFl"/>
                <constraint firstItem="iN0-l3-epB" firstAttribute="leading" secondItem="Ovw-Oq-BTf" secondAttribute="leading" id="YfK-w5-IqH"/>
                <constraint firstItem="iN0-l3-epB" firstAttribute="top" secondItem="PHR-FG-h5y" secondAttribute="top" id="p8l-xe-mqH"/>
                <constraint firstItem="iN0-l3-epB" firstAttribute="trailing" secondItem="Ovw-Oq-BTf" secondAttribute="trailing" id="uhT-d5-NgN"/>
            </constraints>
            <viewLayoutGuide key="safeArea" id="PHR-FG-h5y"/>
            <point key="canvasLocation" x="65" y="178"/>
        </view>
    </objects>
</document>

// SyncMultipleChartsView.m

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

static int const PointsCount = 500;

@implementation SyncMultipleChartsView {
    SCIDoubleRange *_sharedXRange;
    SCIDoubleRange *_sharedYRange;
}

- (void)initExample {
    _sharedXRange = [[SCIDoubleRange alloc] initWithMin:0 max:1];
    _sharedYRange = [[SCIDoubleRange alloc] initWithMin:0 max:1];
    
    [self initChart:self.surface1];
    [self initChart:self.surface2];
}

- (void)initChart:(SCIChartSurface *)surface {
    id<ISCIAxis> xAxis = [SCINumericAxis new];
    xAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    xAxis.visibleRange = _sharedXRange;
    
    id<ISCIAxis> yAxis = [SCINumericAxis new];
    yAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    yAxis.visibleRange = _sharedYRange;
    
    SCIXyDataSeries *dataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    for (int i = 0; i < PointsCount; i++) {
        [dataSeries appendX:@(i) y:@(PointsCount * sin(i * M_PI * 0.1) / i)];
    }
    
    SCIFastLineRenderableSeries *rSeries = [SCIFastLineRenderableSeries new];
    rSeries.dataSeries = dataSeries;
    rSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColor:UIColor.greenColor thickness:1.0];
    
    SCIRolloverModifier *rolloverModifier = [SCIRolloverModifier new];
    rolloverModifier.receiveHandledEvents = YES;

    SCIModifierGroup *modifierGroup = [SCIModifierGroup new];
    modifierGroup.eventGroup = @"SharedEventGroup";
    modifierGroup.receiveHandledEvents = YES;
    [modifierGroup.childModifiers addAll:[SCIZoomExtentsModifier new], [SCIPinchZoomModifier new], rolloverModifier, [SCIXAxisDragModifier new], [SCIYAxisDragModifier new], nil];
    
    [SCIUpdateSuspender usingWithSuspendable:surface withBlock:^{
        [surface.xAxes add:xAxis];
        [surface.yAxes add:yAxis];
        [surface.renderableSeries add:rSeries];
        [surface.chartModifiers add:modifierGroup];
        
        [surface zoomExtents];
        [SCIAnimations sweepSeries:rSeries duration:3.0 andEasingFunction:[SCICubicEase new]];
    }];
}

@end

// SyncMultipleChartsView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// SyncMultipleChartsView.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 SyncMultipleChartsView: SyncMultipleChartsLayout {
    
    let PointsCount = 500
    let SharedXRange = SCIDoubleRange(min: 0, max: 1)
    let SharedYRange = SCIDoubleRange(min: 0, max: 1)
    
    override func initExample() {
        initChart(surface: surface1)
        initChart(surface: surface2)
    }

    fileprivate func initChart(surface: SCIChartSurface) {
        let xAxis = SCINumericAxis()
        xAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1)
        xAxis.visibleRange = SharedXRange
        
        let yAxis = SCINumericAxis()
        yAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1)
        yAxis.visibleRange = SharedYRange
        
        let dataSeries = SCIXyDataSeries(xType: .double, yType: .double)
        for i in 0..<PointsCount {
            dataSeries.append(x: i, y: Double(PointsCount) * sin(Double(i) * .pi * 0.1) / Double(i))
        }
        
        let rSeries = SCIFastLineRenderableSeries()
        rSeries.dataSeries = dataSeries
        rSeries.strokeStyle = SCISolidPenStyle(color: UIColor.green, thickness: 1.0)

        let rolloverModifier = SCIRolloverModifier()
        rolloverModifier.receiveHandledEvents = true
        
        let modifierGroup = SCIModifierGroup()
        modifierGroup.eventGroup = "SharedEventGroup"
        modifierGroup.receiveHandledEvents = true
        modifierGroup.childModifiers.add(items: SCIZoomExtentsModifier(), SCIPinchZoomModifier(), rolloverModifier, SCIXAxisDragModifier(), SCIYAxisDragModifier())
        
        SCIUpdateSuspender.usingWith(surface) {
            surface.xAxes.add(xAxis)
            surface.yAxes.add(yAxis)
            surface.renderableSeries.add(rSeries)
            surface.chartModifiers.add(modifierGroup)
            
            surface.zoomExtents()
            SCIAnimations.sweep(rSeries, duration: 3.0, easingFunction: SCICubicEase())
        }
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES