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

Tutorial Teaser

Today we will look at how to make the graph more useful to the user by specifying axis increments and how to format the increment labels. We’re going to look at different ways we can customize the look and feel of the graph. Finally, we’re going to discuss how to work with different plots on a single graph. Let’s get started!

Step 1: Setting Axis Increments

To modify the properties of an X and Y axis we work with the ‘CPTXYAxisSet’ and ‘CPTXAxis’ objects. Open the STLineGraphViewController.m file and go to the viewDidLoad method. Just below where we work with the plot Space enter the following code:

[[graph plotAreaFrame] setPaddingLeft:20.0f];
[[graph plotAreaFrame] setPaddingTop:10.0f];
[[graph plotAreaFrame] setPaddingBottom:20.0f];
[[graph plotAreaFrame] setPaddingRight:10.0f];
[[graph plotAreaFrame] setBorderLineStyle:nil];
NSNumberFormatter *axisFormatter = [[NSNumberFormatter alloc] init];
[axisFormatter setMinimumIntegerDigits:1];
[axisFormatter setMaximumFractionDigits:0];
CPTMutableTextStyle *textStyle = [CPTMutableTextStyle textStyle];
[textStyle setFontSize:12.0f];
CPTXYAxisSet *axisSet = (CPTXYAxisSet *)[graph axisSet];
CPTXYAxis *xAxis = [axisSet xAxis];
[xAxis setMajorIntervalLength:CPTDecimalFromInt(1)];
[xAxis setMinorTickLineStyle:nil];
[xAxis setLabelingPolicy:CPTAxisLabelingPolicyFixedInterval];
[xAxis setLabelTextStyle:textStyle];
[xAxis setLabelFormatter:axisFormatter];
CPTXYAxis *yAxis = [axisSet yAxis];
[yAxis setMajorIntervalLength:CPTDecimalFromInt(1)];
[yAxis setMinorTickLineStyle:nil];
[yAxis setLabelingPolicy:CPTAxisLabelingPolicyFixedInterval];
[yAxis setLabelTextStyle:textStyle];
[yAxis setLabelFormatter:axisFormatter];

Let’s go over everything above. First, we are working with a property of the graph called the ‘plotAreaFrame’. With this we are able to set the padding of the area where the graph is actually drawn and it allows us to see the axis labels (which were previously hidden). We then set the Border line style to nil to get rid of the border around the graph.

We then create an NSNumber formatter which we use to format the axis labels. We also create something called a ‘CPTMutableTextStyle’. When formatting lines, fill section and text for CorePlot objects we use objects such as CPTMutableTextStyle to do it. For now we only set the font size but we can set the font type and color as well.

We then get a CPTXYAxisSet object from our graph. This axisSet contains an xAxis and a yAxis (both objects of type ‘CPTXYAxis’). We then set a variety of properties on each axis. The major interval length sets what the interval at each main tick will be. We also want to get rid of the minor ticks so we set the line style to nil. We set the labellingPolicy to fixed intervals. We then set the text style for the CPTMutableTextStyle object we created earlier and the label formatter to the NSNumberFormatter we created.

Now try going to the student view and adding a student. Afterward you can go back to the graph and you should see it change. However, it still looks a bit bland…

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.