Creating Charts in iOS Development (Using CorePlot)

Workspace Setup

My notes on how to start creating charts developing an iOS app.

Create an Xcode project. This should be a New Project, at the top of the screen select iOS as the platform, select Single View App, and click next.

Give it a product name, we’ll call this project FrequencyResponseSimulator. You’d want a Team there as well as an Organization Identifier, and make sure you select Storyboard as the User Interface. Basically copy the picture and click next:

Keep the Add to option as “Don’t add to any project or workspace” and click create. This will create a project folder in your selected destination, and Xcode will work out of that folder.

Download zipped file from Core-Plot’s GitHub here. Unzip the downloaded folder and find CorePlot.xcodeproj inside the framework folder. Drag this into our newly created FrequencyResponseSimulator.xcodeproj.

Click the project FrequencyResponseSimulator on the left, under Build Phases, scroll down to Dependencies. Click the + sign to add CorePlot-CocoaTouch library, and click Add to complete the process.

Now in the same window, scroll down to Link Binary with Libraries, click the + sign again to add libCorePlot-CocoaTouch.a and click Add to complete the process.

Build the project by using cmd+B. This should build successfully and you should be ready.

Installing CocoaPod

CocoaPod must be initialized and installed. Close Xcode.

Open Terminal, type in:

cd ~/documents/"Xcode files"/FrequencyResponseSimulator/

Then type in:

pod init

This will initialize the Xcode project with CocoaPod(?) and create a Podfile

Then type in:

open -a Xcode Podfile

This will open the Podfile in Xcode

In the Podfile that’s opened, type in:

pod 'CorePlot' '~>2.3'

The 2.3 should be replaced with any new CorePlot release.

Close the Xcode window, go back to the terminal window and type in:

pod install
Should look like this.

Launch Screen Storyboard

We’ll work on the launch screen first to give it a placeholder, since this is the first thing we’ll see. Click on LaunchScreen.storyboard under the FrequencyResponseSimulator to open the view.

Use cmd+shift+L to open the objects window, drag and drop the StackView component into our storyboard, then set all constraints to zero. Then drag a label in there, center it, make the font System 30.0, and rename it “Loading…”. Running this should give you the “Loading…” label in the middle, and then go away after it loads. It was simulating too fast that I couldn’t capture the loading screen when it was fully visible.

Main.storyboard

Ok, so main.storyboard is where most of the visible things happen.

Home Screen

The first screen we have is tied to ViewController.swift, that’s automatically generated. We’ll call this the Home Screen, where users can choose which module of the app they want to use. For now, they only have one choice, but we’ll do this to leave it open for future growth of the app.

We shall start by adding objects to the screen so it looks more like an app. Design is tricky, and even more so if you’re designing as you build the app. I prefer to have a loose design of how the view is going to look before I start building. Start with vertical stacks, start adding things such as navigation bars, table view controllers, and such.

To change the name of “ViewController.swift” and make sure nothing breaks, open ViewController.swift, right click the class name ViewController:, refractor, rename. This will open a UI that renames everything for you. Rename it as HomeScreenViewController, and click Rename at the top right.

Create another .swift file naming it MainMenuController.swift. This will control how the main menu works, and will declutter our HomeScreenViewController.swift file.