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 visualizations to your applications. Find out how in this Tuts+ Premium series!

Tutorial Teaser

Where We Left Off

Last time we went over how to customize the look and style of a line graph (or scatter plot) using classes such as CPTMutableTextStyle and CPTMutableLineStyle. We learned how to customize the X and Y axis increments and number styles using the CPTXYAxisSet and CPTXYAxis classes. We also looked at how to add multiple plots to your graph and modify the data source methods to provide the correct data for the right plots using plot identifiers.

What We’ll Cover Today

Today we’ll be working with a completely new graph. We will be creating a bar chart that shows the total number of students in each subject with each bar representing a subject. We’ll also look at how to customize the look and feel of the graph. Let’s get started!

Step 1: Setting Up

First up we need to add the relevant classes to our project. Let’s create a ViewController called ‘STBarGraphViewController’ and a ‘STGraphView’. (Make sure you put them in the relevant groups)

Notice the naming of the view to ‘STGraphView’ instead of ‘STBarGraphView’. Going forward we will be using this view to display the bar and pie graphs.

Before we start working with any code we need to add a button to the Action sheet of our student list view. First open up ‘STStudentListViewController.h’ and import STBarGraphViewController. Add STBarGraphViewControllerDelegate to the list of registered protocols (the protocol actually doesn’t exist yet but we will create it later):

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

Next, jump into the .m file and locate the ‘graphButtonWasSelected:’ method. Add ‘Enrolment by subject’ to the list of ‘otherButtonTitles:’:

UIActionSheet *graphSelectionActionSheet = [[[UIActionSheet alloc] initWithTitle:@"Choose a graph" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Enrolment over time", @"Enrolment by subject", nil] autorelease];

Now find the ‘actionSheet:clickedButtonAtIndex:’ method and modify it to work with buttonIndex == 1:

if (buttonIndex == 0)
{
    STLineGraphViewController *graphVC = [[STLineGraphViewController alloc] init];
    [graphVC setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];
    [graphVC setModalPresentationStyle:UIModalPresentationFullScreen];
    [graphVC setDelegate:self];
    [graphVC setManagedObjectContext:[self managedObjectContext]];

    [self presentModalViewController:graphVC animated:YES];

    [graphVC release];

}
else if (buttonIndex == 1)
{
    STBarGraphViewController *graphVC = [[STBarGraphViewController alloc] init];
    [graphVC setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];
    [graphVC setModalPresentationStyle:UIModalPresentationFullScreen];
    [graphVC setDelegate:self];
    [graphVC setManagedObjectContext:[self managedObjectContext]];

    [self presentModalViewController:graphVC animated:YES];

    [graphVC release];
}

Again, this will show some warnings because we haven’t implemented the delegate or managedObjectContext properties on STBarGraphViewController yet.

Now jump into STBarGraphViewController.h. Import CorePlot-CocoaTouch.h and add the following property declaration:

@protocol STBarGraphViewControllerDelegate
@required
- (void)doneButtonWasTapped:(id)sender;

@end

Now add the following properties:

@property (nonatomic, strong) CPTGraph *graph;
@property (nonatomic, assign) id<STBarGraphViewControllerDelegate> delegate;
@property (nonatomic, strong) NSManagedObjectContext *managedObjectContext;

Finally, register that this class will follow these protocols:

@interface STBarGraphViewController : UIViewController <CPTBarPlotDelegate, CPTBarPlotDataSource>

Notice that, aside from conforming to different protocols, this class is the same as STLineViewController. Ideally, you would have a base class that would have these properties that you would subclass to reduce code repetition. This tutorial is focusing on core plot only, so we are only focusing on how best to work with the CorePlot framework. If you’ve got the knowledge and time, feel free to create the base class and use inheritance, but we’re going to keep it simple in the sample code here.

Next, jump into the .m file, synthesize the properties, and release them in the dealloc method.

Now let’s link the view class as the controller’s view. Import ‘STBarGraphView.h’, and add the following method:

- (void)loadView
{
    [super loadView];

    [self setTitle:@"Enrolment by subject"];
    [self setView:[[[STGraphView alloc] initWithFrame:self.view.frame] autorelease]];

    CPTTheme *defaultTheme = [CPTTheme themeNamed:kCPTPlainWhiteTheme];

    [self setGraph:(CPTGraph *)[defaultTheme newGraph]];
}

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.