Drawing a Simple Chart

Let’s draw a simple chart. First, create a new UIViewController’s subclass and call it, for example, NChart3DTestViewController. Do not forget to set its instance as a root view controller of the main window in the application:didFinishLaunchingWithOptions: method of AppDelegate as follows:

self.window.rootViewController = [NChart3DTestViewController new];

The main class of NChart3D framework is called NChart and its instance is accessible from the NChartView. NChartView is the subclass of UIView that represents everything needed to display the chart in your views hierarchy. You can create an NChartView instance, place it anywhere you want and then communicate with the chart through the corresponding property of that instance. To achieve this, you should include the headers. Add the

#import <NChart3D/NChart3D.h>

to your NChart3DTestViewController.h file. This will include everything that is needed to operate with NChart3D framework.
After that, add the internal field m_view of the NChartView * type to the NChart3DTestViewController, override the loadView method of NChart3DTestViewController and create there the new instance of the NChartView class like this:

- (void)loadView
{
	m_view = [[NChartView alloc] initWithFrame:CGRectZero];
	self.view = m_view;
}

Now you can customize the chart through the m_view.chart property.
If you have a license key, set it to the chart like this:

m_view.chart.licenseKey = @"Your license key";

Now you may want to add some margin to the chart to get a spacing from the screen borders:

m_view.chart.cartesianSystem.margin = NChartMarginMake(10.0f, 10.0f, 10.0f, 20.0f);

The top margin is more than the others because of the iOS’ status bar.
Now you may switch on anti-aliasing (that is off by default). It will not hurt performance, because the anti-aliasing algorithm is adaptive, so it is recommended to switch it on to get better visual quality of the image. Add the following line of code:

m_view.chart.shouldAntialias = YES;

Now you should create a series that will be displayed. First, create only one column series and assign some brush that will fill this series with color. For example, let this series be green:

NChartColumnSeries *series = [NChartColumnSeries new];
series.brush = [NChartSolidColorBrush solidColorBrushWithColor:[UIColor colorWithRed:0.0 green:0.7 blue:0.4 alpha:1.0]];

Now you should assign a data source to that series. If you have worked with UITableView the idea of a data source should be familiar to you. NChart3D framework uses the same concept of a data source for supplying data and delegates for reacting to user interactions.
There is a protocol called NChartSeriesDataSource that you should implement to build a data source. For example, you can make a data source from NChart3DTestViewController simply by adding the reference to the protocol in the NChart3DTestViewController.h file as follows:

@interface NChart3DTestViewController : UIViewController <NChartSeriesDataSource>

And then add two methods that will supply data and names for the series:

- (NSArray *)seriesDataSourcePointsForSeries:(NChartSeries *)series
{
	NSMutableArray *result = [NSMutableArray array];
	for (int i = 0; i <= 10; ++i)
	{
		[result addObject:[NChartPoint pointWithState:[NChartPointState pointStateAlignedToXWithX:i Y:(rand() % 30) + 1]
		                                    forSeries:series]];
    }
	return result;
}

- (NSString *)seriesDataSourceNameForSeries:(NChartSeries *)series
{
	return @"My series";
}

As you can see, the first method generates an array of points with some random data. Each point can contain an array of states representing the changes of data in time. However in this tutorial we will create only one state for each point, which will be automatically the current one. Each state holds the actual data. For 2D columns the data are represented by X and Y values. We want the columns to be aligned to the X axis to make them look like "paling", so we use integer X values. The height of columns is "free", so normally double values are used, but in our case also integers are used because of the rand() function. Feel free to experiment with different values and see what happens.
The second method generates names for series to allow NChart3D to build the legend.
Now, when the data source is ready, assign it to the series you have created and finally add series to the chart:

series.dataSource = self;
[m_view.chart addSeries:series];

That’s almost all we need to visualize the data. The only thing we’ve missed is to update data in the chart:

[m_view.chart updateData];

This will force the NChart3D framework to process the data and build the visual appearance of the series. You should call this method any time the data was changed. Now you can build and run your application and see what happens. You should get the following result:

@interface NChart3DTestViewController : UIViewController <NChartSeriesDataSource, NChartValueAxisDataSource>

- (NSArray *)valueAxisDataSourceTicksForValueAxis:(NChartValueAxis *)axis
{
	if (axis.kind == NChartValueAxisX)
		return @[@"one", @"two", @"three", @"four", @"five", @"six", @"seven", @"eight", @"nine", @"ten", @"eleven"];
	else
		return nil;
}

- (NSString *)valueAxisDataSourceNameForAxis:(NChartValueAxis *)axis
{
	switch (axis.kind)
	{
		case NChartValueAxisX:
			return @"X Axis";

		case NChartValueAxisY:
			return @"Y Axis";

		default:
			return nil;
	}
}

m_view.chart.cartesianSystem.xAxis.dataSource = self;
m_view.chart.cartesianSystem.yAxis.dataSource = self;

m_view.chart.background = [NChartLinearGradientBrush linearGradientBrushFromColor:[UIColor colorWithRed:0.7 green:0.7 blue:0.7 alpha:1.0]
                                                                          toColor:[UIColor whiteColor]];

series.borderThickness = 2.0f;
series.borderBrush = [NChartSolidColorBrush solidColorBrushWithColor:[UIColor blackColor]];

m_view.chart.caption.margin = NChartMarginMake(0.0f, 0.0f, 0.0f, 20.0f);
m_view.chart.caption.text = @"NChart3D";

NChartAreaSeries *series2 = [NChartAreaSeries new];
series2.brush = [NChartSolidColorBrush solidColorBrushWithColor:[UIColor orangeColor]];
series2.brush.opacity = 0.7f;
series2.dataSource = self;
[m_view.chart addSeries:series2];
    
NChartLineSeries *series3 = [NChartLineSeries new];
series3.brush = [NChartSolidColorBrush solidColorBrushWithColor:[UIColor redColor]];
series3.lineThickness = 3.0f;
series3.dataSource = self;
[m_view.chart addSeries:series3];

series.tag = 1;
series2.tag = 2;
series3.tag = 3;

- (NSString *)seriesDataSourceNameForSeries:(NChartSeries *)series
{
	return [NSString stringWithFormat:@"My series %d", series.tag];
}

@interface NChart3DTestViewController : UIViewController <NChartSeriesDataSource, NChartValueAxisDataSource, NChartDelegate>

- (void)chartDelegatePointOfChart:(NChart *)chart selected:(NChartPoint *)point
{
	[m_prevSelectedPoint.tooltip setVisible:NO animated:0.25f];

	if (point)
	{
		if (point.tooltip)
		{
			if (point == m_prevSelectedPoint)
				m_prevSelectedPoint = nil;
			else
			{
				m_prevSelectedPoint = point;
				[self updateTooltipText:point];
				[point.tooltip setVisible:YES animated:0.25f];
			}
		}
			else
		{
			m_prevSelectedPoint = point;
			point.tooltip = [self createTooltip];
			[self updateTooltipText:point];
			[point.tooltip setVisible:YES animated:0.25f];
		}
	}
	else
	{
		m_prevSelectedPoint = nil;
	}
}

- (NChartTooltip *)createTooltip
{
	NChartTooltip *result = [NChartTooltip new];
    
	result.background = [NChartSolidColorBrush solidColorBrushWithColor:[UIColor whiteColor]];
	result.background.opacity = 0.9f;
	result.padding = NChartMarginMake(10.0f, 10.0f, 10.0f, 10.0f);
	result.borderColor = [UIColor colorWithRed:0.5f green:0.5f blue:0.5f alpha:1.0f];
	result.borderThickness = 1.0f;
	result.font = [UIFont systemFontOfSize:16.0f];
    
	return result;
}

- (void)updateTooltipText:(NChartPoint *)point
{
	point.tooltip.text = [NSString stringWithFormat:@"%@ : %.2f", point.series.name, point.currentState.doubleY];
}

m_view.chart.delegate = self;