SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Please note! These examples are new to SciChart iOS v4 release! SciChart’s OpenGL ES and Metal iOS and Metal macOS Chart library ships with hundred of Objective-C and Swift iOS&macOS Chart Examples which you can browse, play with and view the source-code. All of this is possible with the new and improved SciChart iOS Examples Suite and demo application for Mac, which ships as part of the SciChart SDK.
This example demonstrates how to create an iOS line chart with four series and multiple top / bottom X-Axis and left / right Y-Axis. SciChart iOS supports unlimited, multiple top or bottom X-Axes and unlimited, multiple left and right Y-Axes. This example shows in a simple way how to register a line series on each axis.
To add multiple axis to an iOS Chart, add SCIAxisBase divided types to the SCIChartSurface.xAxes and SCIChartSurface.yAxes properties.
You can set the alignment of any axis to Left, Right, Top, Bottom using the SCIAxisAlignment enumeration.
Finally, RenderableSeries can be registered on an axis using the xAxisId, yAxisId properties.
The Swift and Objective-C source code for the iOS and macOS Multiple Axis Demo example is included below (Scroll down!).
Did you know that we have the source code for all our example available for free on Github?
Clone the SciChart.iOS.Examples from Github.
Also the SciChart iOS and Scichart macOS Trials contain the full source for the examples (link below).
//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// MultipleAxesChartView.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 "MultipleAxesChartView.h"
#import "SCDRandomUtil.h"
static NSString * const TopAxisId = @"xTopAxis";
static NSString * const BottomAxisId = @"xBottomAxis";
static NSString * const LeftAxisId = @"yLeftAxis";
static NSString * const RightAxisId = @"yRightAxis";
@implementation MultipleAxesChartView
- (Class)associatedType { return SCIChartSurface.class; }
- (BOOL)showDefaultModifiersInToolbar { return NO; }
- (void)initExample {
id<ISCIAxis> xTopAxis = [SCINumericAxis new];
xTopAxis.axisId = TopAxisId;
xTopAxis.axisAlignment = SCIAxisAlignment_Top;
xTopAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFF279B27];
xTopAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFF279B27];
id<ISCIAxis> xBottomAxis = [SCINumericAxis new];
xBottomAxis.axisId = BottomAxisId;
xBottomAxis.axisAlignment = SCIAxisAlignment_Bottom;
xBottomAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFFFF1919];
xBottomAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFFFF1919];
id<ISCIAxis> yLeftAxis = [SCINumericAxis new];
yLeftAxis.axisId = LeftAxisId;
yLeftAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
yLeftAxis.axisAlignment = SCIAxisAlignment_Left;
yLeftAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFFFC9C29];
yLeftAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFFFC9C29];
id<ISCIAxis> yRightAxis = [SCINumericAxis new];
yRightAxis.axisId = RightAxisId;
yRightAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
yRightAxis.axisAlignment = SCIAxisAlignment_Right;
yRightAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFF4083B7];
yRightAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFF4083B7];
SCIModifierGroup *modifierGroup = SCDExampleBaseViewController.createDefaultModifiers;
[modifierGroup.childModifiers addAll:[SCILegendModifier new], [SCIXAxisDragModifier new], [SCIYAxisDragModifier new], nil];
[SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
[self.surface.xAxes add:xTopAxis];
[self.surface.xAxes add:xBottomAxis];
[self.surface.yAxes add:yLeftAxis];
[self.surface.yAxes add:yRightAxis];
[self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:BottomAxisId yAxisId:LeftAxisId seriesName:@"Red line" color:0xFFFF1919]];
[self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:BottomAxisId yAxisId:LeftAxisId seriesName:@"Green line" color:0xFF279B27]];
[self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:TopAxisId yAxisId:RightAxisId seriesName:@"Orange line" color:0xFFFC9C29]];
[self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:TopAxisId yAxisId:RightAxisId seriesName:@"Blue line" color:0xFF4083B7]];
[self.surface.chartModifiers add:modifierGroup];
}];
}
- (SCIFastLineRenderableSeries *)getRenderableSeriesWithXAxisId:(NSString *)xAxisId yAxisId:(NSString *)yAxisId seriesName:(NSString *)seriesName color:(uint)color {
SCIXyDataSeries *dataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
dataSeries.seriesName = seriesName;
double randomWalk = 10;
for (int i = 0; i < 150; i++) {
randomWalk += [SCDRandomUtil nextDouble] - 0.498;
[dataSeries appendX:@(i) y:@(randomWalk)];
}
SCIFastLineRenderableSeries *rSeries = [SCIFastLineRenderableSeries new];
rSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:color thickness: 1.0];
rSeries.xAxisId = xAxisId;
rSeries.yAxisId = yAxisId;
rSeries.dataSeries = dataSeries;
[SCIAnimations sweepSeries:rSeries duration:3.0 andEasingFunction:[SCICubicEase new]];
return rSeries;
}
@end
//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// MultipleAxesChartView.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 MultipleAxesChartView: SCDSingleChartViewController<SCIChartSurface> {
let TopAxisId = "xTop"
let BottomAxisId = "xBottom"
let LeftAxisId = "yLeft"
let RightAxisId = "yRight"
override var associatedType: AnyClass { return SCIChartSurface.self }
override var showDefaultModifiersInToolbar: Bool { return false }
override func initExample() {
let xTopAxis = SCINumericAxis()
xTopAxis.axisId = TopAxisId
xTopAxis.axisAlignment = .top
xTopAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFF279B27)
xTopAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFF279B27)
let xBottomAxis = SCINumericAxis()
xBottomAxis.axisId = BottomAxisId
xBottomAxis.axisAlignment = .bottom
xBottomAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFFFF1919)
xBottomAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFFFF1919)
let yLeftAxis = SCINumericAxis()
yLeftAxis.axisId = LeftAxisId
yLeftAxis.growBy = SCIDoubleRange.init(min: 0.1, max: 0.1)
yLeftAxis.axisAlignment = .left
yLeftAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFFFC9C29)
yLeftAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFFFC9C29)
let yRightAxis = SCINumericAxis()
yRightAxis.axisId = RightAxisId
yRightAxis.growBy = SCIDoubleRange.init(min: 0.1, max: 0.1)
yRightAxis.axisAlignment = .right
yRightAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFF4083B7)
yRightAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFF4083B7)
let modifierGroup = SCDExampleBaseViewController.createDefaultModifiers()
modifierGroup.childModifiers.add(items: SCILegendModifier(), SCIXAxisDragModifier(), SCIYAxisDragModifier())
SCIUpdateSuspender.usingWith(surface) {
self.surface.xAxes.add(xTopAxis)
self.surface.xAxes.add(xBottomAxis)
self.surface.yAxes.add(yLeftAxis)
self.surface.yAxes.add(yRightAxis)
self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.BottomAxisId, yAxisId: self.LeftAxisId, seriesName: "Red Line", colorCode: 0xFFFF1919))
self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.BottomAxisId, yAxisId: self.LeftAxisId, seriesName: "Green Line", colorCode: 0xFF279B27))
self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.TopAxisId, yAxisId: self.RightAxisId, seriesName: "Orange Line", colorCode: 0xFFFC9C29))
self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.TopAxisId, yAxisId: self.RightAxisId, seriesName: "Blue Line", colorCode: 0xFF4083B7))
self.surface.chartModifiers.add(modifierGroup)
}
}
fileprivate func getRenderableSeriesWith(xAxisId: String, yAxisId: String, seriesName: String, colorCode: UInt32) -> SCIFastLineRenderableSeries {
let dataSeries = SCIXyDataSeries.init(xType: .double, yType: .double)
dataSeries.seriesName = seriesName
var randomWalk = 10.0
for i in 0 ..< 150 {
randomWalk += SCDRandomUtil.nextDouble() - 0.498;
dataSeries.append(x: i, y: randomWalk);
}
let rSeries = SCIFastLineRenderableSeries();
rSeries.strokeStyle = SCISolidPenStyle(color: colorCode, thickness: 1.0)
rSeries.xAxisId = xAxisId
rSeries.yAxisId = yAxisId
rSeries.dataSeries = dataSeries
SCIAnimations.sweep(rSeries, duration: 3.0, easingFunction: SCICubicEase())
return rSeries
}
}