iOS & macOS charts - Examples
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.
SciChart iOS Charts supports an extremely flexible way to customize the chart.
Custom RenderableSeries should extend SCIRenderableSeriesBase if you want to provide some custom data, or one of predefined base classes if you want to display data from one of default ISCIDataSeries implementations.
In this example we demonstrate using the Custom Series API to create a Rounded Column chart. Using this extremely flexible and powerful API you can create all manner of new iOS Chart types using SciChart. Please read more about Custom RenderableSeries API in our iOS Documentation.
The Swift and Objective-C source code for the iOS and macOS Custom Series Rounded Column Example 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).
RoundedColumnsChart.m
View source code//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// RoundedColumnsChart.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 "RoundedColumnsChart.h"
#import "SCDRoundedColumnRenderableSeries.h"
@implementation RoundedColumnsChart
- (Class)associatedType { return SCIChartSurface.class; }
- (BOOL)showDefaultModifiersInToolbar { return NO; }
- (void)initExample {
id<ISCIAxis> xAxis = [SCINumericAxis new];
xAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
id<ISCIAxis> yAxis = [SCINumericAxis new];
yAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.2 max:0.2];
SCIXyDataSeries *dataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Int yType:SCIDataType_Int];
int yValues[] = {50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60};
for (unsigned long i = 0; i < sizeof(yValues)/sizeof(yValues[0]); i++) {
[dataSeries appendX:@(i) y:@(yValues[i])];
}
SCDRoundedColumnRenderableSeries *rSeries = [SCDRoundedColumnRenderableSeries new];
rSeries.dataSeries = dataSeries;
rSeries.fillBrushStyle = [[SCISolidBrushStyle alloc] initWithColorCode:0xff3cf3a6];
[SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
[self.surface.xAxes add:xAxis];
[self.surface.yAxes add:yAxis];
[self.surface.renderableSeries add:rSeries];
[self.surface.chartModifiers add:[SCDExampleBaseViewController createDefaultModifiers]];
[SCIAnimations scaleSeries:rSeries duration:3.0 andEasingFunction:[SCIElasticEase new]];
}];
}
@end
RoundedColumnsChart.swift
View source code//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// RoundedColumnsChart.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 RoundedColumnsChart: SCDSingleChartViewController<SCIChartSurface> {
override var associatedType: AnyClass { return SCIChartSurface.self }
override var showDefaultModifiersInToolbar: Bool { return false }
override func initExample() {
let xAxis = SCINumericAxis()
xAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1)
let yAxis = SCINumericAxis()
yAxis.growBy = SCIDoubleRange(min: 0.2, max: 0.2)
let dataSeries = SCIXyDataSeries(xType: .int, yType: .int)
let yValues = [50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60]
for i in 0 ..< yValues.count {
dataSeries.append(x: i, y: yValues[i])
}
let rSeries = SCDRoundedColumnRenderableSeries()
rSeries.fillBrushStyle = SCISolidBrushStyle(color: 0xff3cf3a6)
rSeries.dataSeries = dataSeries
SCIUpdateSuspender.usingWith(surface) {
self.surface.xAxes.add(xAxis)
self.surface.yAxes.add(yAxis)
self.surface.renderableSeries.add(rSeries)
self.surface.chartModifiers.add(SCDExampleBaseViewController.createDefaultModifiers())
SCIAnimations.scale(rSeries, duration: 3.0, andEasingFunction: SCIElasticEase())
}
}
}
SCDRoundedColumnRenderableSeries.m
View source code//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// SCDRoundedColumnRenderableSeries.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 "SCDRoundedColumnRenderableSeries.h"
#import <SciChart/SCIBaseColumnRenderableSeries+Protected.h>
@implementation SCDRoundedColumnRenderableSeries {
SCIFloatValues *_rectsBuffer;
SCIFloatValues *_topEllipseBuffer;
SCIFloatValues *_bottomEllipseBuffer;
}
- (instancetype)init {
id<ISCIHitProvider> hitProvider = [SCIColumnHitProvider new];
self = [super initWithRenderPassData:[SCIColumnRenderPassData new] hitProvider:hitProvider nearestPointProvider:[SCINearestColumnPointProvider new]];
if (self) {
_rectsBuffer = [SCIFloatValues new];
_topEllipseBuffer = [SCIFloatValues new];
_bottomEllipseBuffer = [SCIFloatValues new];
}
return self;
}
- (void)disposeCachedData {
[super disposeCachedData];
[_rectsBuffer dispose];
[_topEllipseBuffer dispose];
[_bottomEllipseBuffer dispose];
}
- (void)internalDrawWithContext:(id<ISCIRenderContext2D>)renderContext assetManager:(id<ISCIAssetManager2D>)assetManager renderPassData:(id<ISCISeriesRenderPassData>)renderPassData {
// Don't draw transparent series
if (self.opacity == 0) return;
SCIBrushStyle *fillStyle = self.fillBrushStyle;
if (fillStyle == nil || !fillStyle.isVisible) return;
SCIColumnRenderPassData *rpd = (SCIColumnRenderPassData *)renderPassData;
[self p_SCD_updateDrawingBuffersWithData:rpd columnPixelWidth:rpd.columnPixelWidth andZeroLine:rpd.zeroLineCoord];
id<ISCIBrush2D> brush = [assetManager brushWithStyle:fillStyle];
id<ISCIPen2D> pen = [assetManager penWithStyle:SCIPenStyle.DEFAULT];
[renderContext drawEllipsesWithPen:pen brush:brush points:_topEllipseBuffer.itemsArray startIndex:0 count:(int)_topEllipseBuffer.count];
[renderContext drawEllipsesWithPen:pen brush:brush points:_bottomEllipseBuffer.itemsArray startIndex:0 count:(int)_bottomEllipseBuffer.count];
[renderContext fillRectsWithBrush:brush points:_rectsBuffer.itemsArray startIndex:0 count:(int)_rectsBuffer.count];
}
- (void)p_SCD_updateDrawingBuffersWithData:(SCIColumnRenderPassData *)renderPassData columnPixelWidth:(float)columnPixelWidth andZeroLine:(float)zeroLine {
float halfWidth = columnPixelWidth / 2;
_rectsBuffer.count = renderPassData.pointsCount * 4;
_topEllipseBuffer.count = renderPassData.pointsCount * 4;
_bottomEllipseBuffer.count = renderPassData.pointsCount * 4;
float *rectsArray = _rectsBuffer.itemsArray;
float *topArray = _topEllipseBuffer.itemsArray;
float *bottomArray = _bottomEllipseBuffer.itemsArray;
float *xCoordsArray = renderPassData.xCoords.itemsArray;
float *yCoordsArray = renderPassData.yCoords.itemsArray;
for (NSInteger i = 0, count = renderPassData.pointsCount; i < count; i++) {
float x = xCoordsArray[i];
float y = yCoordsArray[i];
topArray[i * 4 + 0] = x - halfWidth - 1;
topArray[i * 4 + 1] = y - columnPixelWidth;
topArray[i * 4 + 2] = x + halfWidth + 1;
topArray[i * 4 + 3] = y;
rectsArray[i * 4 + 0] = x - halfWidth;
rectsArray[i * 4 + 1] = y - halfWidth;
rectsArray[i * 4 + 2] = x + halfWidth;
rectsArray[i * 4 + 3] = zeroLine + halfWidth;
bottomArray[i * 4 + 0] = x - halfWidth - 1;
bottomArray[i * 4 + 1] = zeroLine + columnPixelWidth;
bottomArray[i * 4 + 2] = x + halfWidth + 1;
bottomArray[i * 4 + 3] = zeroLine;
}
}
@end



