Working With CorePlot – Tuts+ Premium

When working with data intensive applications, a developer must often do more than just show lists of data records in a table view. The CorePlot library will allow you to add stunning data visualisations to your applications. Find out how in this Tuts+ Premium series!

Tutorial Teaser

Where We Left Off

Last time we introduced the CorePlot framework and discussed what it can do and how we can use it to enhance data visualisation in our applications. We also explored the sample application we’re going to create in the series and how to add CorePlot to our Application. For a code snapshot of where we left off last time, download the source code for this tutorial (otherwise feel free to use your existing code base and save yourself the download time!).

Step 1. Setting Things Up

Before we can create a graph we’ll need a view to do it in. We’re going to allow the user to click on a UIBarButtonItem in the ‘Students’ tab that will bring up an action sheet containing a list of graphs for the user to choose. Once a selection is made a modal view will display a graph with the relevant data on it.

We’re going to create a new group called ‘Graphing’ underneath the ‘StudentTracker’ group. Create a ‘Views’ and ‘Controllers’ group underneath this like in the ‘Student Listing’ and ‘Subject Listing’.

Create a new class called ‘STLineGraphViewController’ (subclassing UIViewController) in the ‘View Controllers’ group. When choosing where to add the files the best place to put them is the ‘Classes/Graphing/View Controllers’ folder (You will have to create the ‘Graphing/View Controllers’ directory).

We are going to come back and work on customizing this later. Right now we’re going to implement that code that allows the user to select a graph to look at.

First open up STStudentListViewController.h and add the ‘UIActionSheetDelegate’ and ‘STLineGraphViewControllerDelegate’ protocol declarations. This protocol doesn’t exist yet but we will create it later (Also make sure you import the ‘STLineGraphViewController.h’ file).

@interface STStudentListViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, AddStudentViewControllerDelegate, UIActionSheetDelegate, STLineGraphViewControllerDelegate>

Next, open the .m file and implement the ‘actionSheet: clickedButtonAtIndex:’ method with the following code:

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
    if (buttonIndex == 0)
    {
        STLineGraphViewController *lineGraphVC = [[STLineGraphViewController alloc] init];
        [lineGraphVC setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];
        [lineGraphVC setDelegate:self];
        [lineGraphVC setManagedObjectContext:[self managedObjectContext]];
        [self presentModalViewController:lineGraphVC animated:YES];
        [lineGraphVC release];
    }
}

This code shouldn’t need too much explaining. We are simply creating a LineGraph View Controller and presenting it modally. We set ourselves as the delegate so that we know when to dismiss the modal view. We also give the view controller a managed object context to work with so it can interface with core data. These last two methods will create a warning (or error if using ARC) because the properties don’t exist yet, but we will be creating them later.

Next we’ll create a method to call the action sheet and add a UITabBarItem to call it from. Add a method declaration in the .m interface called ‘graphButtonWasSelected:’:

@interface STStudentListViewController ()
@property (nonatomic, strong) NSArray *studentArray;
- (void)addStudent:(id)sender;
- (void)graphButtonWasSelected:(id)sender;
@end

Next, add the method implementation:

- (void)graphButtonWasSelected:(id)sender
{
UIActionSheet *graphSelectionActionSheet = [[[UIActionSheet alloc] initWithTitle:@"Choose a graph" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Enrolment over time", nil] autorelease];
	[graphSelectionActionSheet showInView:[[UIApplication sharedApplication] keyWindow]];
}

Next we need to add a UIBarButtonItem for the user to select when they want to view the graph. We’ll do this in the viewDidLoad method underneath where we create the right bar button item:

[[self navigationItem] setLeftBarButtonItem:[[[UIBarButtonItem alloc] initWithTitle:@"Graphs" style:UIBarButtonItemStylePlain target:self action:@selector(graphButtonWasSelected:)] autorelease] animated:NO];

Finally, we need to implement a STLineGraphViewController protocol method that will tell the controller to dismiss the modal view when the user is done looking at the graph:

- (void)doneButtonWasTapped:(id)sender
{
    [self dismissModalViewControllerAnimated:YES];
}

Now we’re ready to start creating the graph!

Get the Full Series!

This tutorial series is available to Tuts+ Premium members only. Read a preview of this tutorial on the Tuts+ Premium web site or login to Tuts+ Premium to access the full content.

Joining Tuts+ Premium. . .

For those unfamiliar, the family of Tuts+ sites runs a premium membership service called Tuts+ Premium. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Mobiletuts+, Nettuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+. You’ll learn from some of the best minds in the business. Become a premium member to access this tutorial, as well as hundreds of other advanced tutorials and screencasts.